Bullets not displaying in IE

**mickapoo** · 27 Mar 2009, 11:43 AM

I am creating a bulleted list and the bullets are not displaying in IE. In FF, they display just fine. They are also not displaying the same left margin in IE as they are in FF.

If anyone can assist, I'd greatly appreciate it!

Here's my style sheet:

Code:

<style type="text/css">
<!--

a:link { font: 8pt verdana, sans-serif; }
a:hover { font: 8pt verdana, sans-serif; }
a:visited { font: 8pt verdana, sans-serif; color: 0000FF; }
a:hover { font: 8pt verdana, sans-serif; color: 0000FF; }
a { text-decoration: none }

ul,li { font: 8pt verdana, sans-serif; color: 000000; line-height: 1.5; margin-left: 4px; margin-right: 0px; list-style-type: square; }

p { font: 8pt verdana, sans-serif; color: 000000; line-height: 1.5; margin-left: 5px; margin-top: 10px; margin-right: 5px; }
p.reqs { font: 8pt verdana, sans-serif; color: 333333; line-height: 1.5; margin-left: 10px; margin-top: 10px; margin-right: 10px;}
p.footer { font: 7pt verdana, sans-serif; color: 999999; line-height: 1.3; }
p.heading { font: bold 13pt verdana, sans-serif; color: ffffff; line-height: 1.0; }
span.red_bold { font: bold 8pt verdana, sans-serif; color: CC0000; line-height: 1.5; margin-top: 10px; margin-right: 5px; }
td.blue_subhead { font: italic bold 12px arial, sans-serif; color: 336699; text-align:center; padding-top: 10px;}

-->
</style>

And here is the code in the body:

Code:

<p><ul>
           <li>Accurate Traffic Reenactments -- Accuracy is everything.</li>
        </p>
        <p><img src="http://www.singletoncommunications.com/e-newsletter/images/thumbnails1.jpg" alt="Traffic Reenactments" width="267" height="55"></p>
        <p><li>Combining Evidence into a Split Screen Presentation</li>
        </p>
        <p><img src="http://www.singletoncommunications.com/e-newsletter/images/thumbnails2.jpg" alt="Combining Evidence Into a Split Screen Presentation" width="268" height="52"></p>
        <p><li>Explaining Explicit Surgical Procedures Using Computer Animation</li>
        </p>

        <p><img src="http://www.singletoncommunications.com/e-newsletter/images/thumbnails3.jpg" alt="Surgical Procedures Using Computer Animation" width="268" height="52"></p>
        </ul>
        </p>
        <p style="margin-top: 17px;"><b>FUTURE ISSUES:</b></p>
        <p><ul>
           <li>Converting Existing Video to Digital DVD</li>
           <li>Placing an Animation Sequence Over Existing Video Evidence</li>
           <li>Purchasing Presentation Equipment That Works Best for You</li>
           <li>How to Lead a Jury Where You Want Them to Go -- Why Jury Books Don't Work Anymore</li>
           <li>Recreating a Traffic Accident so Everyone Understands What Happened</li>
           <li>Making Depositions Come Alive</li>
           <li>Preparing a Settlement Presentation That Will Stop Them Dead in Their Tracks</li>
           <li>Negotiating from a Position of Visual Power</li>
           </ul>
        </p>

Thank you for your help in advance!

**Wickham** · 27 Mar 2009, 02:52 PM

IE and Firefox have different default margins on the ul tag and IE normally shows the bullets outside the ul container, so they aren't visible unless you give a margin-left,

Don't mix p tags with ul and li tags; use either/or.

I've edited it all here and included background-colors so that you can see the difference between IE and Firefox, but you may have to edit the margin-left for the ul tag either in the main styles (for Firefox) or in the lower conditional comment (for IE):-

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example Unordered List</title>
<style type="text/css">
a:link { font: 8pt verdana, sans-serif; }
a:hover { font: 8pt verdana, sans-serif; }
a:visited { font: 8pt verdana, sans-serif; color: 0000FF; }
a:hover { font: 8pt verdana, sans-serif; color: 0000FF; }
a { text-decoration: none }

ul { margin-left: -20px; background-color: pink; list-style-type: square;}
li { font: 8pt verdana, sans-serif; color: 000000; line-height: 1.5; 
/*margin-left: 0px; margin-right: 0px; list-style-type: square;*/ 
background-color: yellow; }

p { font: 8pt verdana, sans-serif; color: 000000; line-height: 1.5; 
margin-left: 5px; margin-top: 10px; margin-right: 5px; }
p.reqs { font: 8pt verdana, sans-serif; color: 333333; line-height: 1.5; 
margin-left: 10px; margin-top: 10px; margin-right: 10px;}
p.footer { font: 7pt verdana, sans-serif; color: 999999; line-height: 1.3; }
p.heading { font: bold 13pt verdana, sans-serif; color: ffffff; line-height: 
1.0; }
span.red_bold { font: bold 8pt verdana, sans-serif; color: CC0000; 
line-height: 1.5; margin-top: 10px; margin-right: 5px; }
td.blue_subhead { font: italic bold 12px arial, sans-serif; color: 336699; 
text-align:center; padding-top: 10px;}
</style>

<!--[if ie]>
<style type="text/css">
ul { margin-left: 20px; }
</style>
<![endif]-->

</head>
<body>

<p><!--<ul>-->
           <!--<li>-->Accurate Traffic Reenactments -- Accuracy is 
everything.<!--</li>-->
        </p>
        <p><img 
src="http://www.singletoncommunications.com/e-newsletter/images/thu
mbnails1.jpg" alt="Traffic Reenactments" width="267" height="55"></p>
        <p><!--<li>-->Combining Evidence into a Split Screen 
Presentation<!--</li>-->
        </p>
        <p><img 
src="http://www.singletoncommunications.com/e-newsletter/images/thu
mbnails2.jpg" alt="Combining Evidence Into a Split Screen 
Presentation" width="268" height="52"></p>
        <p><!--<li>-->Explaining Explicit Surgical Procedures Using 
Computer Animation<!--</li>-->
        </p>

        <p><img 
src="http://www.singletoncommunications.com/e-newsletter/images/thu
mbnails3.jpg" alt="Surgical Procedures Using Computer Animation" 
width="268" height="52"></p>
       <!-- </ul>-->
        <!--</p>-->
        <p style="margin-top: 17px;"><b>FUTURE ISSUES:</b></p>
        <!--<p>-->

<ul>
           <li>Converting Existing Video to Digital DVD</li>
           <li>Placing an Animation Sequence Over Existing Video 
Evidence</li>
           <li>Purchasing Presentation Equipment That Works Best for 
You</li>
           <li>How to Lead a Jury Where You Want Them to Go -- Why 
Jury Books Don't Work Anymore</li>
           <li>Recreating a Traffic Accident so Everyone Understands 
What Happened</li>
           <li>Making Depositions Come Alive</li>
           <li>Preparing a Settlement Presentation That Will Stop Them 
Dead in Their Tracks</li>
           <li>Negotiating from a Position of Visual Power</li>
           </ul>
      <!--  </p>-->

</body>
</html>

Thread: Bullets not displaying in IE

Thread Tools

Bullets not displaying in IE

Posting Permissions