Forum Moderators: not2easy
#containter {
width: 420px;
margin: 0;
text-align: left;
padding: 0 15px 0 15px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
#contDetail {
width: 420px;
margin: 0 auto 0 auto;
padding: 0;
text-align: center;
}
#subNav {
width: 250px;
margin: 0 auto 0 0;
text-align: left;
}
#subNav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative; /*For some reason, this prevents the disappearing background images in IE*/
}
#subNav li {
margin: 0 2px 0 0;
padding: 0;
}
#subNav a {
background-image: url(images/arrow_right.gif);
background-position: 0 2px;
background-repeat: no-repeat;
padding-left: 8px;
}
#subNav a:hover {
background-image: url(images/arrow_right_70.gif);
background-position: 0 2px;
background-repeat: no-repeat;
text-indent: 0;
padding-left: 8px;
}
<body>
<html>
<div id="container">
<div id="someStuff"></div>
<div id="contDetail">
<div id="subNav">
<ul class="subNav">
<li>list item one</li>
<li>list item two</li>
<li>etc</li>
</ul>
</div><!--close subNav-->
<div id="someMoreStuff">
<h2>Heading</h2>
<h3">Heading</h3>
<ul>
<li>list item one</li>
<li>list item two</li>
</ul>
</div><!--close someMoreStuff-->
</div><!--close contDetail-->
</div><!--close container-->
</body>
</html>
You need to make sure your DTD is in strict mode for the box model to look the same in IE and FF.
I'm aware of the margin/padding difference between browser renderings when it comes to lists--or at least lists in nested divs--but I need to learn how to fix this.
