[HTML/CSS] div "hitvlak" verkeerd in IE7 - Softwareontwikkeling

dinsdag 9 januari 2007 15:20

Acties:

Topicstarter

oplossing gevonden:
de tekst in de <li>`s plaatsen tussen <a> met display:block; werkt.

Hey Allemaal,

Heb een gekke fout gevonden in IE7..
Ik heb een div in een div in een div... deze div staat op hidden en wordt met mouseover op visible gezet.
Als zijnde een popmenu. Geen javascript met een teller, etc. gewoon aan/uit.
Werkt perfect in FF en IE<7.. alleen IE7 neemt niet het "hitvlak" van de div (box van height+width) maar neemt alleen de tekst in de div staat.

Deze tekst in een <p>, <span> of <div> zetten met de juiste maten vergroot het hitvlak niet.
Gekke is dat de bovenliggende divs wel het hele block neemt bij mouseover.

relevante code:
html

code:

        <div id="MenuDiv">
            <div class="MenuBarOptie" onMouseOver="this.className='MenuBarOptieOn'" onMouseOut="this.className='MenuBarOptie'">Home</div>
            <div onclick="window.location.replace('index01.aspx?id=zoek')" class="MenuBarOptie" onMouseOver="this.className='MenuBarOptieOn'" onMouseOut="this.className='MenuBarOptie'">Zoeken</div>
            <div class="MenuBarOptie" onMouseOver="this.className='MenuBarOptieOn'" onMouseOut="this.className='MenuBarOptie'">A&nbsp;tot&nbsp;Z</div>
            <div class="MenuBarOptie" onMouseOver="this.className='MenuBarOptieOn'" onMouseOut="this.className='MenuBarOptie'">Onderwerpen</div>
            <div class="MenuBarOptie" onMouseOver="this.className='MenuBarOptieOn'" onMouseOut="this.className='MenuBarOptie'">Afgeprijsd</div>
            <div class="MenuBarOptie" onMouseOver="this.className='MenuBarOptieOn'" onMouseOut="this.className='MenuBarOptie'">Contact</div>
            <div class="MenuBarOptie" onMouseOver="this.className='MenuBarOptieOn'; document.getElementById('ExtraMenuDiv').style.visibility='visible'" onMouseOut="this.className='MenuBarOptie'; document.getElementById('ExtraMenuDiv').style.visibility='hidden'">Meer...
                <div id="ExtraMenuDiv">
                <div class="MenuBarExtraOptie" onMouseOver="this.className='MenuBarExtraOptieOn'" onMouseOut="this.className='MenuBarExtraOptie'">Over Ons</div>
                <div class="MenuBarExtraOptie" onMouseOver="this.className='MenuBarExtraOptieOn'" onMouseOut="this.className='MenuBarExtraOptie'">Bezoek Ons</div>
                <div class="MenuBarExtraOptie" onMouseOver="this.className='MenuBarExtraOptieOn'" onMouseOut="this.className='MenuBarExtraOptie'">Beurzen</div>
                <div class="MenuBarExtraOptie" onMouseOver="this.className='MenuBarExtraOptieOn'" onMouseOut="this.className='MenuBarExtraOptie'">Links</div>
                </div>
            </div>
        </div>

en de CSS

code:

#MenuDiv
{
    background-color: #2E2E2E;
    background-image: url('grijs_vlak_verloop.gif');
    background-repeat: repeat-x;
    width: auto;
    height: 25px;
    position: relative;
    margin-left: 150px;
}

#ExtraMenuDiv
{
    z-index: 2;
    position: relative;
    top: 0px;
    left: -10px;
    width: 140px;
    height: 100px;
    visibility: hidden;
}

.MenuBarOptie
{
    height: 100%;
    width: auto;
    font-family: Verdana, Arial;
    font-size: 12px;
    color: #FFF;
    text-align: left;
    vertical-align: bottom;
    line-height: 25px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    cursor: pointer;
    float: left;
}

.MenuBarOptieOn
{
    background-color: #C5231D;
    background-image: url('grijs_vlak_verloop_on.gif');
    background-repeat: repeat-x;
    height: 100%;
    width: auto;
    font-family: Verdana, Arial;
    font-size: 12px;
    color: #FFF;
    text-align: left;
    vertical-align: bottom;
    line-height: 25px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    cursor: pointer;
    float: left;
} 

.MenuBarExtraOptie
{
    background-color: #2E2E2E;
    background-image: url('grijs_vlak_verloop.gif');
    background-repeat: repeat-x;
    height: 25px;
    width: 140px;
    font-family: Verdana, Arial;
    font-size: 12px;
    color: #FFF;
    text-align: left;
    vertical-align: bottom;
    line-height: 25px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    cursor: pointer;
}

.MenuBarExtraOptieOn
{
    background-color: #C5231D;
    background-image: url('grijs_vlak_verloop_on.gif');
    background-repeat: repeat-x;
    height: 25px;
    width: 140px;
    font-family: Verdana, Arial;
    font-size: 12px;
    color: #FFF;
    text-align: left;
    vertical-align: bottom;
    line-height: 25px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    cursor: pointer;
}

Iemand enig idee of zal ik MS maar gaan mailen?

dinsdag 9 januari 2007 15:30

Acties:

mithras

Kennelijk wil je daar een menu van maken, waarvoor html elementen ol, ul en li uitermate geschikt zijn. Je moet niet met div's gaan klooien als je een menu wil maken: daarvoor zijn lijsten bedoeld.

Wat jij eigenlijk wil is een zogenaamd suckerfish menu, die je uitermate goed kan stylen met css: [google=suckerfish css] en dan met name het artikel van A List Apart.

dinsdag 9 januari 2007 15:56

Acties:

Predje

Topicstarter

mithras schreef op dinsdag 09 januari 2007 @ 15:30:
Kennelijk wil je daar een menu van maken, waarvoor html elementen ol, ul en li uitermate geschikt zijn. Je moet niet met div's gaan klooien als je een menu wil maken: daarvoor zijn lijsten bedoeld.

Wat jij eigenlijk wil is een zogenaamd suckerfish menu, die je uitermate goed kan stylen met css: [google=suckerfish css] en dan met name het artikel van A List Apart.

Mhh die van het artikel van A List Apart ziet er wel heel mooi uit, lijkt een nettere oplossing dan moet div`s. thx..
Maargoed blijft die "probleem" onopgelost..

dinsdag 9 januari 2007 17:00

Acties:

Predje

Topicstarter

Ondanks dat het een mooiere oplossing heeft zijn er 2 dingen fout..
Allereest zijn nu alleen de links (tekst) klikbaar en nu het hele hovervlak (div onclick).
Ten tweede heeft IE7 exact dezelfde fout als beschijven in de openingspost..
Dus ik hanteer wel de suckerfish opbouw (netter in de html/css), maar de fout blijft...

help

dinsdag 9 januari 2007 17:03

Acties:

Predje

Topicstarter

Mhh, de voorbeelden in het artikel werken wel in IE7..
Ga maar weer verder zoeken wat ik dan fout heb.

dinsdag 9 januari 2007 17:04

Acties:

André

Analytics dude

Predje, kun je de edit knop gebruiken als je iets nieuws te melden hebt

dinsdag 9 januari 2007 17:13

Acties:

gvanh

Webdeveloper

Zelf werk ik ook altijd met DIVs om uitklapmenu's te maken ... en dat werkt voor mij altijd prima. Ik heb verschillende keren met lijsten gewerkt, maar dat is tot nog toe altijd geeindigd in frustratie ... de linker-marge van de bullets en links van de bullets werken in IE en Firefox zo essentieel anders ... dat ik steeds weer op een muur ben gelopen. Maar gut ... dat is wellicht een hiaat in kennis aan mijn kant.

.

De DIV menu's heb ik dan overigens gebouwd op basis van een "position:absolute" stijl, waarbij ik de menu's onder de desbetreffende bovenbalk plaats op het moment dat er een "mouseover" plaatsvindt. De gewenste positie (left, top) van het menu wordt bepaald aan de hand van de positie het DOM element dat het mouse-over event triggert.

Dan nog even een commentaar op wat jij zelf hebt gemaakt ... alhoewel ik niet verwacht dat het je probleem oplost.

HTML:

<div class="MenuBarExtraOptie" onMouseOver="this.className='MenuBarExtraOptieOn'" onMouseOut="this.className='MenuBarExtraOptie'">Over Ons</div>
                <div class="MenuBarExtraOptie" onMouseOver="this.className='MenuBarExtraOptieOn'" onMouseOut="this.className='MenuBarExtraOptie'">Bezoek Ons</div>
                <div class="MenuBarExtraOptie" onMouseOver="this.className='MenuBarExtraOptieOn'" onMouseOut="this.className='MenuBarExtraOptie'">Beurzen</div>
                <div class="MenuBarExtraOptie" onMouseOver="this.className='MenuBarExtraOptieOn'" onMouseOut="this.className='MenuBarExtraOptie'">Links</div>
                </div>

Als je van die div's nou 'ns <a>-tjes maakt. Je geeft dan in je stylesheet "display: block" aan bij ieder van die a's, zodat ze zich hetzelfde gedragen als de <div>s. Vervolgens kun je met pseudo-classes in je stylesheet de mouseover en mouseout handelingen stijlen ... dat scheelt een hoop javascript en code.
Je stylesheet wordt dan dus zoiets:

div.menu a {
color: blue;
}
div.menu a:hover {
color: red;
}

[ Voor 44% gewijzigd door gvanh op 09-01-2007 17:18 . Reden: Aanvulling verhaal over <div> naar <a> ]

dinsdag 9 januari 2007 17:24

Acties:

Predje

Topicstarter

Dat is ook netter inderdaad, maar van die code ben ik nu eigelijk afgestapt.
Ik had namelijk dezelfde fout met de lijsten en die waren al javascript vrij en veel minder code.
Zoek nu dus een oplossing voor hetzelfde probleem, maar mijn opzet is nu anders geworden.

Pagina: 1

Reageer