CODEWITHSUNDEEP
cssinternet-explorer-7
Julian
Julian

Reputation: 1831

css display property not working correctly in IE7. IE7 bug I suspect

My problem is with the menu. There is only 1 .active class li element in the menu yet .active style applies itself to every li element in the menu to the right of it's location. This problem is only in IE7. So far I've tried changing the selectors, modifying the html, and I even re-arrange the rules hoping that it would be resolved.

Link: http://julianjosephs.com/FQBM_NEW/


HTML

<div class="menu">
    <ul>
      <li class="active"><a href="index.html"><span>ACCUEIL </span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /><img src="images/menu-divider.png" alt="" class="menu_divider" /></li>
      <li><a href="Historique.html"><span>HISTORIQUE </span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /><img src="images/menu-divider.png" alt="" class="menu_divider" /></li>
      <li><a href=""><span>EVENEMENTS </span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /><img src="images/menu-divider.png" alt="" class="menu_divider" /></li>
      <li><a href="ListeClubs.html"><span>CLUBS MMA</span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /><img src="images/menu-divider.png" alt="" class="menu_divider" /></li>
      <li><a href=""><span>COMBATTANTS </span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /><img src="images/menu-divider.png" alt="" class="menu_divider" /></li>
      <li><a href="Boutique.html"><span>BOUTIQUE MMA</span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /></li>
    </ul>
  </div>


CSS

    .menu {
    margin:0;
    width: 963px;
    float:left;
    font-size: 16px;
    height: 64px;
    background: url(images/menu-bg.png) no-repeat;
}
.menu ul {
    text-align: left;
    padding:0px 23px 0 35px;
    *padding:0px 6px 0 16px; /* IE7 hack */
    margin:0;
    list-style:none;
    border:0;
    float:left;
    font-size: 16px;
    width: 917px;
}
.menu ul li { float:left; margin:0; padding:0; border:0; height: 64px; position:relative; }
.menu ul li a { float:left; margin:0; padding:21px 0 0 0;  color:#fff; font:normal 16px Arial, Helvetica, sans-serif; text-decoration:none; height: 64px; position:relative; z-index:3; background:transparent; }
.menu ul li a span { padding:20px 23px; }
.menu ul li a:hover { background: transparent; }
.menu ul li a:hover span {

}
.menu ul li a.active { }

.menu ul li a.active span {  }

.menu ul li .radial_gradient{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    display:none;
    z-index:-1;
}

.menu ul li:hover .radial_gradient{
    display:block;
}

.menu ul li.active .radial_gradient{
    display:block;
}

.menu ul li .menu_divider{
    position:absolute;
    right: -6px;
    top: -4px;
    z-index:2;
}

Upvotes: 1

Views: 1475

Answers (3)

My Head Hurts
My Head Hurts

Reputation: 37675

As mentioned by @JQone, your problem is with the placement of the image in the li tags.

A better solution would be to use background images - that way they could still fill 100% of the width and you would only have to include the image once. So your CSS would become:

.menu ul li:hover, .menu ul li.active {
    background: url('images/menu-item-bg-hover-texture-2.png') repeat-x 0 0 transparent;
}

And you could remove the respective .radial_gradient CSS and the <img /> from the HTML.

Upvotes: 1

Pavan
Pavan

Reputation: 4329

Looks like the image at URL images/menu-item-bg-hover-texture-2.png is taking 917 px. Try setting some width in pixels for this image instead of setting width as 100%.

Here is what I did. Opened developer tools and changed widht of the above said image to some 50 px. It worked.

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92943

Try replacing the following styles:

.menu ul li .radial_gradient {
    display:none;
}
.menu ul li.active .radial_gradient {
    display:block;
}

with:

.menu ul li .radial_gradient {
    visibility:hidden;
}
.menu ul li.active .radial_gradient {
    visibility:visible;
}

Upvotes: 1

Related Questions