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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns=""> <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. :)


  • I think the major source of your errors is that IE6 doesn't support adjacent sibling selectors (ul+ul, for example). Also, it is very strange that you aren't giving the two lists different classnames, or in any other way semanticly differentiating them. The only difference between them (besides the ID on the first element) is the span in the first list, which serves no semantic purpose.
  • If you got rid of that CSS2 selector, IE would behave better.
  • After hacking away at this for about an hour, the only thing I can say is that sliding doors is a dirty dirty hack that should never be used :D
  • Also: PNG Transparency + IE6 = Crazy Bad Idea
  • lechlech Chicagoland
    if using PNG + alpha channels, do include an <!--IF IE--> clause in your css to feed it to just IE clients.
  • edited January 2006
    Lately I've been thinking that it is impossible to fully support IE and that it might be ebst to have a dumbed down sytlesheet for all IE browsers. Not sure how to do this though. I experimented with some hacks I saw online but none seemed to work (and most invalidated my code). Do you guys have any suggestions on how to have normal browsers use the main stylesheet and have IE browsers use a special shortbus stylesheet?

    (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]
  • edited January 2006
    i found a really good article on the various methods of targetting specific browsers. very handy.
This discussion has been closed.