Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

IE7 bug - ul bullets not shown after first-letter

Posted on 2008-10-21
4
Medium Priority
?
695 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

718 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