IE7 bug - ul bullets not shown after first-letter

Hello!
I am trying to use the "first-letter" psuedo element to style the first letter of all my <p> tags.
The first-letter itself seems to work fine. But, if I have more than one <ul> tags on a page, all lists except the first list seem to drop the bullets on the list items in IE7 but NOT in Firefox.

Is this an IE7 bug?

Is there a workaround?

Here is the html code of my test:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>List bug after first-letter</title>
</head>

<body>
<style type = "text/css" >
p:first-letter {
      font-size:1.4em;
      font-family: "Comic Sans MS";
}
</style>    
   
   
<p>Here is the FIRST list:</p>
                        <ul>
                              <li>Item one</li>
                              <li>Item two</li>
                              <li>Item three</li>
                        </ul>


<p>Here is the SECOND list:</p>
                        <ul>
                              <li>Item one</li>
                              <li>Item two</li>
                              <li>Item three</li>
                        </ul>Note that the bullets in the second list are NOT shown by IE7 but ARE shown by Firefox


<p>This is a new paragraph</p>
</body>
</html>
taoiseachjoeAsked:
Who is Participating?
 
sillieeebunnieeeConnect With a Mentor Commented:
Sorry about that. I did test it in IE7. Looks like u can only apply the style to the 2nd ul to make it work. Applying the class to both doesn't work.
0
 
sillieeebunnieeeCommented:
Looks like IE7 bug. The workaround you can do is to define a style for your unordered lists. It makes for better crossbrowser and future style change.




<style type = "text/css" >
p:first-letter {
      font-size:1.4em;
      font-family: "Comic Sans MS";
}
 
ul.bulletstyle {
	list-style-type: disc;
}
</style>
 
<p>Here is the FIRST list:</p>
                        <ul class="bulletstyle">
                              <li>Item one</li>
                              <li>Item two</li>
                              <li>Item three</li>
                        </ul>
 
 
<p>Here is the SECOND list:</p>
                        <ul class="bulletstyle">
                              <li>Item one</li>
                              <li>Item two</li>
                              <li>Item three</li>
                        </ul>Note that the bullets in the second list are NOT shown by IE7 but ARE shown by Firefox
 
 
<p>This is a new paragraph</p>

Open in new window

0
 
taoiseachjoeAuthor Commented:
sillieeebunnieee,

Thanks.

Your code does not seem to work for me - it still drops the bullets in the second list.

Did you try your code in IE7?

I have noticed something else: if I remove the line"<p>Here is the SECOND list:</p>" so that there is NO text between the first and second lists, then the bullets reappear in the second list.
 
0
 
taoiseachjoeAuthor Commented:
Thanks for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.