CODEWITHSUNDEEP
htmlcssnavigationmenubar
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

Navigation Menu - Not working on IE

I have designed a Navigation Menu, it work fine on Chrome and Firefox but it don't appear to work properly on IE7 and IE8.. how to fix this?

Note: it is not a dropdown functionality.

<div class="nav-block">
                <ul id="nav">
                <li><a class="active" href="/">Home</a></li>

                <li>
                <a href="/">Category</a>
                  <ul class='subnav'> 
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                  </ul>
                </li>
                <li>
                <a href="/">Accounts</a>
                  <ul class='subnav'> 
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                  </ul>
                </li>
                <li><a href="/">Logout</a></li>
            </ul>
</div>

CSS:

<style>
.nav-block{
    background-color:black;
    height: 45px;
}

#nav {
    padding:12px;
    list-style:none;
}

#nav li{
    display:inline;
    margin:0 1px 0 -1px;
    padding:3px 15px;
    float:left;
    font-size:14px;
}

#nav a {
    background-color:white;
    color:#C51721;
    padding:10px;
    text-decoration: none;
}

#nav .subnav {
    padding:0px;
    list-style:none;
    width:130px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    color:#000000;
    margin-top:9px;
    margin-left:-2px;
    background-color:white;
}

#nav .subnav li {
    padding:0px;
    float: none;
    width:100px;
    color:#000000;
}

#nav .subnav li a {
    padding:3px;
    padding-left:10px;
    display:block;
    background-color:white;
    color:#C51721;
    text-decoration: none;
    border-bottom:1px solid #DEDEDE;
}
 </style>

If the code can be improved, let me know. thanks

Upvotes: 0

Views: 1259

Answers (2)

Kev
Kev

Reputation: 187

Make sure you are declaring what version of HTML you're coding in through the DOCTYPE tag. This will make sure that no browsers run in quirks mode which could change the way your website is rendered (aka. it may make your website display weird).

Also, if you're not already doing this, consider using a css reset to help reduce browser inconsistencies. Try the Eric Meyer reset: http://meyerweb.com/eric/tools/css/reset/

Upvotes: 0

Kraz
Kraz

Reputation: 7090

the height of li in the .subnav is big. It should be the same size as Firefox and Chrome

When I test it, I have the opposite issue : IE7 being too small.

It seems to be because of some margins on the li. To have them all of the same height, I used : 

#nav .subnav li {
    padding:0px;
    float: none;
    width:100px;
    color:#000000;
    margin:0px;
}

The main issue is that you have an inline element (<li>) with a block element nested inside it (<a>).

You should fix it by changing your <li> to a block element. But then, you'll have other issue, since you <a> won't take all the width...

#nav .subnav li {
    padding:0px;
    float: none;
    color:#000000;
    display:block;
    width:130px;
}

This should get you close to what you want.

Upvotes: 2

Related Questions