Solved

IE7 bug - ul bullets not shown after first-letter

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This video teaches users how to migrate an existing Wordpress website to a new domain.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

786 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