Forum Moderators: not2easy
The issue is Width; in any browser other than IE the <li> are wider than the specified width.
If you chang the Doc Type to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> No problems?
Here’s the code
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<style type="text/css">
#navlist {
float: left;
margin-top: 40px;
margin-left: 15px; }
#navlist a {
display: block;
width: 140px;
padding: 2px 2px 2px 24px;
background-color: #999; }
#navlist a:hover {
background-color: #f60;
color: #333; }
#navlist li {
margin: 0 0 3px 0; }
#navlist ul {
margin: 0;
padding: 0;
list-style-type: none; }
</style>
</head>
<body>
<div id="navlist">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</body>
</html>
The XML declaration:
<?xml version="1.0" encoding="iso-8859-1"?>
...activates a bug [nemesis1.f2o.org] in IE that sends it into quirks mode rendering -- i.e., IE is using the same rendering mode for DOCTYPEs w/ no DTD, as it is for the fully qualified DOCTYPE you are using.
Second thing is, IIRC, Mozilla's (W3C) box model sets width without taking borders and padding into account. IE takes everything into account. That padding 24px might be getting added to the width 140px in Moz. If so you can set a Mozilla specific [xulplanet.com] CSS attribute to control this and make the behavior consistant with IE:
#navlist a {
display: block;
width: 140px;
[b]-moz-box-sizing: border-box;[/b]
padding: 2px 2px 2px 24px;
background-color: #999;
}Not sure about for other browsers or what box model they use.
Hope that helps. :)
Jordan
I think the fix all is just to eliminate the 24px padding and use a couple to keep the text off the border.
That IE quirks mode bug is new to me but I don’t think it maters much.
Thank You MonkeeSage I had been struggling with that one a wile.
box-sizing: border-box
Jordan
