CODEWITHSUNDEEP
cssinternet-explorer-7
andreapier
andreapier

Reputation: 2958

list elements disappearing in ie7

you can see the website i'm currently working at here.
I know, it is VERY old styled but my customer designed it this way, and i'm just implementing it the way he wants... Don't worry, you won't be looking at it for too long!
The problem is that the navigation bar at the top disappear in internet explorer 7 (only 7) when the mouse is over it...
Exactly, all but the first element disappear. For some reason the first one stays... I cannot get any clue on what is happening, i'm sure there must be some kind of css trick i should use!
So here it is my css (only the one related to the navigation bar). 

/*Relevant part*/
.navigation-menu-wrapper {
    height: 143px;
    max-height: 143px;
    width: 829px;
}

.navigation-menu {
    list-style: none;
}

.navigation-menu-item {
    float: left;
    background-color: rgba(255, 255, 255, 0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#99FFFFFF', endColorstr='#99FFFFFF'); /*IE 7/8 fix for rgba*/
    width: 163px;
    height: 143px;
    max-height: 143px;
    font-family: "Times New Roman";
    color: #000000;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 143px;
    border: 1px solid #000000;
    margin: 0;
    padding:0;
}

.navigation-menu-item-selected {
    background-color: rgba(255, 255, 255, 1);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFFFFFFF'); /*IE 7/8 fix for rgba*/
}


/*End relevant part*/
/*Page CSS, just in case you need it*/

.page-wrapper {
    width: 1024px;
    height: 100%;
    max-height: 100%;
    min-height: 768px;
}

.center-content-wrapper {
    width: 824px;
    min-height: 768px;
    background-image: url("../../img/background.jpg");
    background-repeat: no-repeat;
}

.main-content-wrapper {
    width: 100%;
    min-height: 623px;
    max-height: 623px;
}

.main-content-overlay {
    margin: 25px;
    padding-left: 70px;
    padding-right: 70px;
    padding-top: 20px;
    background-color: rgba(0, 0, 0, 0.85);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d8000000', endColorstr='#d8000000');
    min-height: 509px;
    max-height: 509px;
    height: 509px;
    overflow-y: auto;
    font-size: 14px;
    font-family: "Times New Roman";
}

Can you suggest a fix? Even a dirty trick would be very much appreciated!
Thanks!

Upvotes: 0

Views: 175

Answers (2)

Adrift
Adrift

Reputation: 59779

It's because you're wrapping your <a> around your list items .. it should be the other way around. Wrap your <li> around your <a>

So like this as an example:

<ul class="navigation-menu no-margin no-padding">
 <li class="navigation-menu-item single-line"><a class="navigation-menu-item navigation-
 menu-item-selected link-no-decoration" href="index.php">L'attivitá</a>
 </li>

It works this way .. just do the same to all of your <li> and it will work in IE7

Upvotes: 1

Milche Patern
Milche Patern

Reputation: 20452

Your markups are messed up.

<ul class="navigation-menu no-margin no-padding">
    <a class="navigation-menu-item navigation-menu-item-selected link-no-decoration" href="index.php">
        <li class="navigation-menu-item single-line">L'at (...)

Element a not allowed as child of element ul in this context.

Upvotes: 1

Related Questions