I'm working on a new site design and while it looks correct in all normal browsers it as one would expect IE isn't happy with this nice valid xhtml design. Most of my designs I stick with valid xhtlm strict and css and just say to hell with ie, but this one I sort of want to work in ie. Since I don't have experience dealing with ie's eccentricities I was hoping some more experienced eyes could help. IE6 is a must. MacIE and IE5 would just be icing on the cake, but not necessary (as long as they are still functional).
Example Site
Any help would be greatly appreciated.
Example Site
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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=utf-8" />
<title>Title</title>
<style type="text/css">
<!--
body {
margin: 0;
font-family: "lucida grande", verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background: cyan;
}
#header {
background: lightblue;
padding-top: .5em;
}
#header h1 {
color: black;
font-size: 2.5em;
text-align: center;
margin: 0 0 .3em 0;
}
#header a {
color: black;
text-decoration: none;
}
#header a:hover {
color: red;
}
#header ul {
list-style: none;
text-align: center;
font-size: 1.4em;
margin: 0;
padding: .43em 0 .3em 0;
}
#header ul li {
display: inline;
white-space: nowrap;
margin: 4px;
}
#header ul li a {
background: url(right-in.png) no-repeat 100% 0;
padding: .43em 1.4em .3em 0;
}
#header ul li a span {
background: url("left-in.png") no-repeat;
padding: .43em 0 .3em 1.4em;
margin-left: -11px;
}
#header #current {
background: url("right.png") no-repeat 100% 0;
padding-bottom: .36em;
}
#header #current span {
background: url("left.png") no-repeat;
padding-bottom: .36em;
}
#header ul+ul {
background: white url(subtab.gif) repeat-x bottom;
padding: .4em 0;
font-size: 1em;
border: 1px solid #C6C6C6;
margin-bottom: 2.5em;
}
#header ul+ul li {
padding: 1em;
margin: 0;
}
#header ul+ul li a {
background: none;
}
#header ul+ul #subcurrent {
background: #d8fef5 url(subtabcurrent_blue.gif) repeat-x bottom;
padding: .4em;
}
#content {
width: 644px;
margin: 0 auto;
background: white;
padding: 1em;
line-height: 3em;
}
-->
</style>
</head>
<body>
<!--HEADER-->
<div id="header">
<!--Logo-->
<h1>Title</h1>
<!--End Logo-->
<!--Tabs-->
<ul>
<li><a href="" id="current"><span>Link1</span></a></li>
<li><a href=""><span>Link2</span></a></li>
<li><a href=""><span>Link3</span></a></li>
<li><a href=""><span>Link4</span></a></li>
<li><a href=""><span>Link5</span></a></li>
</ul>
<!--End tabs-->
<!--Sub tabs-->
<ul>
<li><a href="" id="subcurrent">Sublink1</a></li>
<li><a href="">Sublink2</a></li>
<li><a href="">Sublink3</a></li>
<li><a href="">Sublink4</a></li>
</ul>
<!--End sub tabs-->
</div>
<!--END HEADER-->
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed in mi. Quisque ultrices dui eget turpis. Vestibulum lacinia elementum orci. Quisque lorem risus, condimentum at, luctus et, interdum convallis, pede. Aenean sagittis tincidunt elit. Morbi felis lectus, rhoncus eu, molestie nec, gravida volutpat, felis. Pellentesque ornare lacus sit amet elit fringilla malesuada. Phasellus eget elit sit amet arcu euismod fringilla. Duis sit amet orci at felis aliquet luctus. In ut urna.
</div>
</body>
</html>Any help would be greatly appreciated.