xhtml/css IE help

Discussion in 'Web Design and Development' started by AmbitiousLemon, Jan 22, 2006.

  1. AmbitiousLemon Moderator emeritus


    Nov 28, 2001
    down in Fraggle Rock
    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="http://www.w3.org/1999/xhtml">
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <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;
      <div id="header">
      <!--End Logo-->
        <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>
       <!--End tabs-->
       <!--Sub tabs-->
        <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>
       <!--End sub tabs-->
      <!--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.
    Any help would be greatly appreciated. :)
  2. Squareball macrumors regular

    Mar 16, 2004
    Palo Alto, CA
    I don't think IE handles ul+ul very well.

    I suggest you set it up like

    <ul id="mainMenu">...</ul>
    <ul id="subMenu">...</ul>

    And then set the styles accordingly. I did a quick test locally and that works somewhat for me.

    The tabs are still jacked though in IE and that is common. One thing to remember about IE is that if you have a container and you don't specify a font size.. even if you specify a height.. if the default font size is larger than that height the container will be the height of the default font size and not the height you set. I think that might be an issue with the tabs but I'd have to really look at it.. either way it's handy to know because that bug got me good a few times.
  3. Squareball macrumors regular

    Mar 16, 2004
    Palo Alto, CA

Share This Page