I want this nav inline in IE 7 & IE 6.....

Question

I have following CSS for that

/* Start Submenu */

#submenu {
    list-style-type:none; 
}

#submenu ul{
    border-bottom:3px solid #1c29da;
    margin:0px;
    padding:0px;
    display:table;
}

#submenu li{
    width:123px;
    height:58px;
    background:url(submenu_btn.jpg) no-repeat;
    vertical-align:middle;
    text-align:center;
    display:table-cell;
}

#submenu a {
    color:#333333;
    font: bold 12px/13px Arial, Helvetica, sans-serif;
    cursor:pointer;
}

#submenu a:hover {
    color:#2f6535;
    font: bold 12px/13px Arial, Helvetica, sans-serif;
    cursor:pointer;
}

/* End Submenu */

See this image. What is the solution for IE 6 & 7 for making it inline?

Answer 1

The standard cross-browser implementation is to use floats. Start with something like:

#submenu { overflow: hidden; }
#submenu ul { overflow: hidden; }
#submenu li { float: left; }

and style as required.

That being said, I wouldn't roll your own solution to this. There are lots of exceptions and code required for certain browsers. This is only the beginning of your problems. I'd recommend using a prepackaged tab or menu solution instead.