Question

Page is here

Please enlighten me on how to fix this…

I know Dean Edwards’ IE7 javascript, but it might be overkill, is there a simple fix just for my problem?

I tried:

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="demo/css/ie6.css" media="all">
<![else]>
    <link rel="stylesheet" type="text/css" href="demo/css/common.css" media="all">
<![endif]-->

But it doesn’t work, so i replaced it with:

<!--[if lte IE 7]>
<style type="text/css">
...
</style>
<![endif]-->

Currently I’m still having problems with the second level menu, i.e. here

Answer 1

@Miranda: To fix your menu in IE6, update the following rules in your CSS like so —

.menuArea ul {
    height: 38px;
    width: 790px;
}

.menuArea ul li {
    display: inline;
    font-size: 13px;
    line-height:2.7em;
    list-style: none;
    margin-right: 2px;
    text-transform: capitalize;
}

.menuArea ul li a {
    color: #383838;
    display: block;
    float: left;
    height: 38px;
    padding: 0 16px;
    text-decoration: none;
}

I suggest you use conditional-comments for IE6 if you start to notice that any styles you update/define to make the page work for it start to negatively affect it in other browsers. Create a ie6.css file and use the conditional-comment below your main CSS file like this:

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" media="all">
<![endif]-->