Solved

IE7 bug - ul bullets not shown after first-letter

Posted on 2008-10-21
4
631 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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
archiving old posts 9 42
Can't find where tracking pixels are coming from 2 56
Compare site how does it work 4 71
app server have enough resources... 2 24
Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Read about why website design really matters in today's demanding market.
The viewer will learn how to dynamically set the form action using jQuery.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now