<ul> achter onderliggende <img>

[Noctonix]

Hi there!

Ik zit met een irritant probleempje. Ik heb een <ul> met een sub menu dat uitklapt, nu doet hij het overal prima.

Firefox


IE8


Alleen nu komt het probleem dus bij IE7


Ik weet dat het met een position, of z-index te maken heeft. Maar ik krijg het maar niet voor elkaar..
Heeft iemand enig idee hoe of waar het aan ligt?

Ik gebruik de volgende html layout (php gegenereerd):

HTML:

<nav class="mainMenu">
<ul>
<li class="active">
  <a href="/specialismen/lichamelijkmeervoudig-gehandicapt" class="roze">specialismen</a>
  <ul>
    <li class="active">
      <div>
        <a href="/specialismen/lichamelijkmeervoudig-gehandicapt" class="roze">&gt; lichamelijk/meervoudig gehandicapt</a>
      </div>
    </li>
    <li>
      <div>
        <a href="/specialismen/langdurig-zieken" class="roze">&gt; langdurig zieken</a>
      </div>
    </li>
    <li>
      <div>
        <a href="/specialismen/gedrag" class="roze">&gt; gedrag</a>
      </div>
    </li>
    <li>
      <div>
        <a href="/specialismen/zeer-moeilijk-lerend" class="roze">&gt; zeer moeilijk lerend</a>
      </div>
    </li>
  </ul>
</li>
<li>
  <a href="/professionals/begeleiding-en-advies" class="blauw">professionals</a>
  <ul>
    <li>
      <div>
        <a href="/professionals/begeleiding-en-advies" class="blauw">&gt; begeleiding & advies</a>
      </div>
    </li>
    <li>
      <div>
        <a href="/professionals/trainingen-en-cursussen" class="blauw">&gt; trainingen & cursussen</a>
      </div>
    </li>
    <li>
      <div>
        <a href="/professionals/voorlichting-en-presentaties" class="blauw">&gt; voorlichting & presentaties</a>
      </div>
    </li>
  </ul>
</li>
<li>
  <a href="/leerlingen-en-ouders/begeleiding-en-advies" class="groen">leerlingen & ouders</a>
  <ul>
    <li>
      <div>
        <a href="/leerlingen-en-ouders/begeleiding-en-advies" class="groen">&gt; begeleiding & advies</a>
      </div>
    </li>
  </ul>
</li>
<li>
  <a href="/website/contact" class="roze">website</a>
  <ul>
    <li>
      <div>
        <a href="/website/contact" class="roze">&gt; contact</a>
      </div>
    </li>
  </ul>
</li>
</ul>
</nav>
<div id="headerImg">
    <div class="wrapper">
                <div id="headerLines"></div>
                <div id="headerText">
                    <h1>Onderwijsadvies en -ondersteuning op maat</h1>
                </div>
                <img src="/images/background/l_LG_MGgroot.jpg" alt="Onderwijsadvies en -ondersteuning op maat" />
            </div>
            
            <div id="colorDivWrapper">
                <div id="colorDiv"></div>
            </div>
        </div>

En de CSS:

Cascading Stylesheet:

 #headerImg .wrapper{ margin:0 auto; position:relative;}
#colorDivWrapper{ height:13px; width:1000px; margin:0 auto; }
    #colorDiv{ height:13px; width:400px; background-image:url(../images/imgMap.png); background-position:0 -204px; background-repeat:no-repeat; }
.wrapper{ width:1000px; margin:27px auto 0; clear: both; position:relative; }
.top{ margin:10px auto 0; }
    header{ width:955px; height:96px; margin:0 auto; }
    
        #headerTop{ width:955px; height:40px; }
            #zoek{ width:180px; height:25px;  background-color:#cc0033; font-family:'conduit_itc_lightregular';  font-size:15px; color:#FFF; line-height:24px; float:right;}
                #zoek label{ padding:0 5px 0 10px; }
                    #zoek input{ width:113px; height:17px; border:none; font-size:12px; padding:0 0 0 3px; font-family:Arial, Helvetica, sans-serif;}
                    #zoek input#btnArrow{ width:12px; height:19px; background: url(../images/imgMap.png) repeat-y -408px 221px; text-indent:-9999px;}
                        #zoek input#btnArrow:hover{ cursor:pointer; }
                    
        #headerBottom{ width:955px; height:55px; }
            #logo{ width:160px; height:42px; margin:0 85px 0 0; float:left; background-image:url(../images/imgMap.png); background-repeat:no-repeat;}
                #logo a{ width:160px; height:42px; text-indent:-9999px; display:block; }
            nav.mainMenu{ width:auto; height:42px; position: relative; z-index: 100; margin:0 0 0 222px;}
                nav.mainMenu ul{ margin:0; padding:0; }
                    nav.mainMenu ul li { display:inline-block; *display:inline; zoom:1; font-size:16px; height:42px; line-height:41px; width:auto; background-image:url(../images/imgMap.png); background-position:-208px -3px; background-repeat:no-repeat; padding: 0 10px 0 25px; }
                        nav.mainMenu ul li:hover ul{ visibility:visible; cursor:pointer; overflow:visible;}
                        nav.mainMenu ul li a{ text-decoration:none; color:#cc0033; }
                        /* SUBMENU */
                        nav.mainMenu ul li ul{ display:block; background-color:#FFFFFF; margin:0px 0 0 -13px; padding: 10px 0 6px; visibility:hidden; overflow:hidden; position:absolute; min-width:77px; }
                            nav.mainMenu ul li ul li{ padding: 0 20px 0 10px; display:block; clear:right; background-image:none; height:33px; }
                                nav.mainMenu ul li ul li div{ border-bottom:dashed 1px #000; height:39px;}
                                nav.mainMenu ul li ul li:last-child div{ border-bottom:none; }
                                nav.mainMenu ul li ul li a{ color:#000; font-size:13px; } 
                        
        #headerImg{ width:100%; height:250px; border-top:#C03 solid 13px; border-bottom:#C03 solid 13px; background-color:#C03; /*background-image:url(../images/afb-headerBack.png); background-repeat:no-repeat; background-position: center center; */ clear:both; }
        #headerLines{ width:105px; height:231px; right:0; position:absolute; background-image:url(../images/afb-headerLines.png); background-repeat:no-repeat; z-index:100; }
        #headerText{ width:1000px; height:250px; position:absolute; }
            #headerText h1{ color:#FFF; position:absolute; bottom:0; right:0; font-family: 'conduit_itc_lightregular'; font-weight:normal; font-size:36px; margin:0 40px 0 0; text-shadow:#000 1px 1px 5px; }
            
            #slider{ width:100%; height:250px; overflow:hidden; }

[MueR]

Begin eens met die divjes uit je <li> te halen. Die zijn behoorlijk nutteloos. Verder is je stylesheet enorm overgespecificeerd.. maar vooral mis je naast de position:absolute ook ngo waar dat het nou eigenlijk moet staan.

[crisp]

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Geef je .mainMenu een position:relative en een z-index, of negeer IE7 gewoon

[Noctonix]

crisp schreef op donderdag 01 november 2012 @ 13:09:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Geef je .mainMenu een position:relative en een z-index, of negeer IE7 gewoon

nav.mainMenu heeft al een z-index en een relative position.
Het probleem is dat het MOET werken van de klant.

[crisp]

Noctonix schreef op donderdag 01 november 2012 @ 13:31:
[...]


nav.mainMenu heeft al een z-index en een relative position.
Het probleem is dat het MOET werken van de klant.

dan de parent daarvan, of de parent daarvan; lastig te bepalen zonder de gehele broncode

en anders zou het wellicht aan het feit kunnen liggen dat je nieuwe HTML5-elementen gebruikt waar IE7 ook geen ondersteuning voor heeft en de werking van shims daarvoor vaak ook niet perfect is (en afhankelijk van JS).

iig wel de klant extra laten betalen voor ondersteuning van antieke browsers

[ Voor 6% gewijzigd door crisp op 01-11-2012 13:35 ]

[Noctonix]

crisp schreef op donderdag 01 november 2012 @ 13:35:
[...]

dan de parent daarvan, of de parent daarvan; lastig te bepalen zonder de gehele broncode

en anders zou het wellicht aan het feit kunnen liggen dat je nieuwe HTML5-elementen gebruikt waar IE7 ook geen ondersteuning voor heeft en de werking van shims daarvoor vaak ook niet perfect is (en afhankelijk van JS).

iig wel de klant extra laten betalen voor ondersteuning van antieke browsers

Klopt, ik gebruik ook html5 boilerplate. Thnx voor de tips. ik ga het proberen.

[Verwijderd]

En als je het via de css niet direct kun fixen voor alle browsers; Modernizr is altijd nog een optie om die subnav juist te positioneren in IE7

[_Thanatos_]

Het probleem is dat het MOET werken van de klant.

Probeer de klant uit te leggen dat ieder systeem waar IE7 op draait, IE8 ook te installeren is. Eventueel kun je nog statistieken van de (eventuele) huidige website opvragen en kijken wat het IE7 gebruik is.

De klant weet niet wat hij wil, over het algemeen. Het moet alleen maar werken in de browser die ze zelf gbruiken. Als een ruiter met oogkleppen op een paard zonder oogkleppen - dat werkt niet Als je de klant kunt bewijzen dat IE7 niet boeit, hoef je het probleem ook niet op te lossen.

[ Voor 55% gewijzigd door _Thanatos_ op 01-11-2012 22:42 ]