Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
IE and xhtml/css help
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
<!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.
0
This discussion has been closed.
Comments
(tried thing and unless I am doing something wrong, it doesn't work)
[EDIT] Ok it looks like it works it just uses both stylesheets instead of just the alternative and MacIE doesn't recognize it[/EDIT]