The bullets show in Firefox, but not in IE

Written By: Shadow
Submitted At: 2009-08-24 11:25:08
Num Views: 1631
Category: HTML / CSS

The code..
<!DOCTYPE html PUBLIC �-//W3C//DTD XHTML 1.0 Transitional//EN�
�http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd�>
<html xmlns=�http://www.w3.org/1999/xhtml�>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>All my web pages in one</title>

<link rel="stylesheet" type="text/css" href="../CSS/style.css" />
</head>

<body>

<h1 align="center"><img src="pics/illusion.jpg" width="100" height="100" alt="Illusion" border="1" align="left" />Linking Pages...</h1>
<hr />

<ul type="circle">
<li>Click <a href="red_wines.html" target="_blank">here</a> to see a red wine "list" example.</li>
<li>These are <a href="ordered_and_unordered_lists.html" target="_blank">ordered and unordered</a> lists.</li>
<li>This is how a <a href="definition_lists.html" target ="_blank">definition list</a> is displayed.</li>
<li><a href="all_about_links.html" target="_blank">Linking</a> pages together, 101.</li>
<li>How to insert a <a href="pictures.html" target="_blank">picture</a> with borders and different sizes.</li>
<li>More <a href="more_pics.html" target="_blank">pics</a> and multiple links in a pic.</li>
<li>Create an <a href="../CSS/internal_style_sheet.html" target="_blank">internal</a> style sheet.</li>
<li>Another <a href="../CSS/internal_style_sheet2.html" target="_blank">internal</a> style sheet.</li>
<li>Create an <a href="../CSS/external_style_sheets.html" target="_blank">external</a> style sheet.</li>
<li>How to create an internal style sheet and <a href="../CSS/cssint_transto_ext.html" target="_blank">export</a> it.</li>
</ul>

</body>

</html>

By Shadow @ 2009-08-24 11:25:08

And this is the .css file code:
body {background: #363636; color: #CCCCCC; font-family: Garamond;
margin-left: 72px; margin-right: 72px; margin-top: 72px;}

hr {color: grey; width: 75%; align: center; size: 2}
h1 {font-size: 48px;}
h2 {font-size: 36px;}
h3 {font-size: 24px;}

p, ol, ul {font-size: 18px;}

ul {background-color: #8B7E66; display: block;}

a {text-decoration: none; font-weight: bold}
a {color: #000080;}
a:visited {color: #000000;}
a:hover {text-decoration: underline;}

By Shadow @ 2009-08-24 11:59:45

Ok... It seems IE cuts the bulets/numbers off if you put the list in a block display.
I set the padding to 32px overall and it works fine in both now.

ul,ol {background-color: #8B7E66; display: block; width: 500px; padding: 32px}

Thanks for your help, once again!

By Shadow @ 2009-08-24 12:13:56

I know you said setting the padding is not advised, cause IE and Firefox handles it differently,
but it seems to work. I will test it on other browsers.
This also works:

padding: 0px 0px 0px 32px

By Shadow @ 2009-08-24 12:18:31

Sorry I must have miss-worded it. I do not recommend padding in certain elements as some work in firefox and not in IE. Generally IE6 is the main problem IE. Glad you sorted it out! Good Job!

By PHPin24 @ 2009-08-24 13:03:58