Bullets not displaying in IE [Archive] - Web Design & Web Development Forum: HTML, CSS, JavaScript, PHP

mickapoo

27 Mar 2009, 12:43 PM

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:

<style type="text/css">

</style>

And here is the code in the body:

<ul>
<li>Accurate Traffic Reenactments -- Accuracy is everything.</li>

<img src="http://www.singletoncommunications.com/e-newsletter/images/thumbnails1.jpg" alt="Traffic Reenactments" width="267" height="55">
<li>Combining Evidence into a Split Screen Presentation</li>

<img src="http://www.singletoncommunications.com/e-newsletter/images/thumbnails2.jpg" alt="Combining Evidence Into a Split Screen Presentation" width="268" height="52">
<li>Explaining Explicit Surgical Procedures Using Computer Animation</li>


<img src="http://www.singletoncommunications.com/e-newsletter/images/thumbnails3.jpg" alt="Surgical Procedures Using Computer Animation" width="268" height="52">
</ul>

FUTURE ISSUES:
<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>


Thank you for your help in advance!

Wickham

27 Mar 2009, 03: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):-

<!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>



</head>
<body>


Accurate Traffic Reenactments -- Accuracy is
everything.

<img
src="http://www.singletoncommunications.com/e-newsletter/images/thu
mbnails1.jpg" alt="Traffic Reenactments" width="267" height="55">
Combining Evidence into a Split Screen
Presentation

<img
src="http://www.singletoncommunications.com/e-newsletter/images/thu
mbnails2.jpg" alt="Combining Evidence Into a Split Screen
Presentation" width="268" height="52">
Explaining Explicit Surgical Procedures Using
Computer Animation


<img
src="http://www.singletoncommunications.com/e-newsletter/images/thu
mbnails3.jpg" alt="Surgical Procedures Using Computer Animation"
width="268" height="52">


FUTURE ISSUES:


<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>


</body>
</html>