Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

IE7 bug - ul bullets not shown after first-letter

Posted on 2008-10-21
4
Medium Priority
?
708 Views
Last Modified: 2013-12-25
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>
0
Comment
Question by:taoiseachjoe
  • 2
  • 2
4 Comments
 

Expert Comment

by:sillieeebunnieee
ID: 22771159
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
 

Author Comment

by:taoiseachjoe
ID: 22772805
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
 

Accepted Solution

by:
sillieeebunnieee earned 1500 total points
ID: 22773206
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
 

Author Closing Comment

by:taoiseachjoe
ID: 31510172
Thanks for your help.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Ready to get certified? Check out some courses that help you prepare for third-party exams.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question