CSS Menu Issue

ziycon

Below is the code I've created for my menu, it works fine in FF but in IE7 the menu links are moving like in a step formation, I've attached an image of what it looks like in FF and IE7.

Expand|Select|Wrap|Line Numbers

 <div id="menu_container">

  <ul class="main_menu">

    <li><a href="index.html">Home</a></li>

    <li><a href="#">News</a></li>

  </ul>

</div>

Expand|Select|Wrap|Line Numbers

 /**** Menu ****/

div#menu_container {

    float: left;

    width: 100%;

    height: 25px;

    background-color: #00A7E1;

    margin: 5px 0px 0px 0px;

    clear: left;

    display: inline;

}

ul.main_menu {

    float: left;

    width: 100%;

    margin: 0px;

    padding: 0px;

    list-style: none;

    clear: left;

}

.main_menu li a {

    float: left;

    width: 90px;

    padding: 4px 10px 7px 10px;

    border-right: 1px #CCCCCC solid;

    color: #FFFFFF;

    text-decoration: none;

    text-align: center;

    display: block;

}

.main_menu li a:hover {

    float: left;

    width: 90px;

    height: 14px;

    padding: 4px 10px 7px 10px;

    color: #00A7E1;

    background-color: #FFFFFF;

    display: block;

}

ziycon

Can anyone point me the right direction, I've tried everything and can't figure it out?

Dormilich

without looking deeper into the code, i’d guess it’s the Microsoft Box Model that’s causing it.

zorgi

if you remove change this

.main_menu li a {

INTO

.main_menu li {

and than style your <a>

ziycon

Fixed it. After all the investigating and changing code, moving stuff around etc. The below piece of CSS fixed it in IE.

Expand|Select|Wrap|Line Numbers

 ul.main_menu li {

    display: inline;

}

CSS Menu Issue

re: CSS Menu Issue

re: CSS Menu Issue

re: CSS Menu Issue

re: CSS Menu Issue

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about