TheInsider
Programmer
Hello,
The following is simply a rough concept page -- that's why it looks so poorly coded. I am trying to get the vertical spacing of the <li> tags to be exactly the same between IE 6 and Netscape 7.
The sublist should also not have any different vertical spacing than its parent.
Right now if you view this page in IE 6 and then flip to it in Netscape 7, you will see that the list item spacing is slightly wider, vertically, in IE 6. As you increase the css margin and/or padding the difference in spacing between the 2 browsers becomes much more noticable. (Note: bullet.gif is simply 5x5 pixels)
why are the 2 browsers spacing the list items differently and how can i get them to look identical between browsers?
PS I'm not using standard bullets, or the standard list-style-image because IE 6 places bullets at the top of the list item text, and Netscape 7 places it at the bottom of the list item text. I don't believe there is a way to change that.
Thank you in advance,
TheInsider
The following is simply a rough concept page -- that's why it looks so poorly coded. I am trying to get the vertical spacing of the <li> tags to be exactly the same between IE 6 and Netscape 7.
The sublist should also not have any different vertical spacing than its parent.
Right now if you view this page in IE 6 and then flip to it in Netscape 7, you will see that the list item spacing is slightly wider, vertically, in IE 6. As you increase the css margin and/or padding the difference in spacing between the 2 browsers becomes much more noticable. (Note: bullet.gif is simply 5x5 pixels)
Code:
<html>
<head>
<style type="text/css">
li
{
font-family:verdana;
font-size:12px;
vertical-align:middle;
margin: 0px 0px 5px 0px;
padding: 0px 0px 0px 15px;
list-style-type: none;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0 4px;
}
ul.sublist {
margin: 0px 0px 0px 0px;
padding: 5px 5px 0px 0px;
}
ul{
margin: 0px 0px 0px 00px;
padding: 0px 0px 0px 0px;
}
}
</style>
</head>
<body topmargin="0" leftmargin="0">
<ul>
<li>AAAAAAAA</li>
<li>AAAAAAAA
<ul class="sublist">
<li>AAAAAAAA</li>
<li>AAAAAAAA</li>
<li>AAAAAAAA</li>
<li>AAAAAAAA</li>
<li>AAAAAAAA</li>
</ul>
</li>
<li>AAAAAAAA</li>
<li>AAAAAAAA</li>
<li>AAAAAAAA</li>
</ul>
</body>
</html>why are the 2 browsers spacing the list items differently and how can i get them to look identical between browsers?
PS I'm not using standard bullets, or the standard list-style-image because IE 6 places bullets at the top of the list item text, and Netscape 7 places it at the bottom of the list item text. I don't believe there is a way to change that.
Thank you in advance,
TheInsider
