[CSS/IE/FF]Irritant problemen mbt boxmodels

[Dr_Frickin_Evil]

Ben bezig met een site opnieuw opbouwen, zelfde ontwerp, maar nettere code.
Nu loop ik tegen een paar problemen aan die het er echt NIET leuker op maken, ik zit er al de hele middag mee te k*tten, maar ik kom er niet goed uit. Ik heb al op GOT zitten zoeken enz., maar heb nog geen duidelijkheid.

(ik gebruik een XHTML 1.0 strict doctype)

1e probleem.
Ik heb een menuutje gemaakt als volgt:

code:

<div id="menu">
    <ul>
        <li><a href="">Home</a></li>
        <li onmouseover="showLayer('submenu1');" onmouseout="hideLayer('submenu1')">
            <a href="">Menu 1-></a>
            <ul id="submenu1">
                <li><a href="">submenu1a</a></li>
                <li><a href="">submenu1b</a></li>
            </ul>
        </li>
        <li onmouseover="showLayer('submenu2');" onmouseout="hideLayer('submenu2')">
            <a href="">Menu 2-></a>
            <ul id="submenu2">
                <li><a href="">submenu2a</a></li>
                <li><a href="">submenu2b</a></li>
            </ul>
        </li>
        <li><a href="">Contact us</a></li>
    </ul>
</div>

De 2 javascript functies zetten de visibility van de submenu's op 'visible' resp 'hidden'. Werkt prima, is het probleem ook niet verder. Mbv de volgende css-properties zet ik het menu op de goeie plaats ed:

code:

* { box-sizing: border-box; -moz-box-sizing: border-box; }

#menu { position: absolute; left: 0; top: 80px; }
#menu ul, #menu li, #menu a { display: block; margin: 0; padding: 0; border: 0; }
#menu ul {
    margin: 0 0 10px 0;
    width: 110px;   
    }
#menu li { position: relative; padding: 0 0 1px 0; }
#menu ul ul { position: absolute; top: 0; visibility: hidden; width: 150px; 
z-index: 10; left: 109px; }
#menu a {
    padding: 0 0 0 25px;
}
#menu li>a { width: auto; }
#submenu1, #submenu2 { visibility: hidden; }

Het probleem zit hem in #menu a { padding: 0 0 0 25px; } icm #menu ul ul { position: absolute; left: 109px; }. Mozilla zet het submenu dan op 109px vanaf de linkerkant van het scherm. IE zet het submenu op 109px vanaf de anchor waarmee hij is aangeroepen. Dus op 109+25px. Naar mijn mening doet Mozilla het goed, maar hoe zorg ik er nou voor dat IE dat ook zo doet?? Ik zie niks fouts in mijn tekst

2e probleem:
Ik heb een grote container div, met daarin een div waar de daadwerkelijke content in komt te staan. Dit heb ik gedaan, omdat de content mbv scrollknoppen (don't ask) te scrollen moet zijn. Ik loop nu tegen het probleem aan dat in mozilla de width van een element incl de border-width ervan is, terwijl in IE de borderwidth bij de width wordt opgeteld. Opzich maken die 2 pixels niks uit, maar een van de knopjes voor het scrollen staat rechts van de divs tegen de border aan, met als gevolg dat ik hem niet èn in IE èn in Mozilla op de goeie plek kan plaatsen.

Wie kan mij met deze problemen helpen?

[crisp]

da's inderdaad een vage bug van IE, want de padding van de anchor zou niets met de positie van de ul mogen doen...
wb je 2e probleem moet je gewoon voorkomen dat je padding en/of border ism width en height gebruikt; vaak betekent dat dat je gewoon een extra container moet gebruiken met width/height en daarbinnen je element met border/padding - de box-sizing heb je dan ook niet nodig

[Dr_Frickin_Evil]

Wat betreft je antwoord op het 2e probleem, dat heb ik geprobeerd, maar het is nogal een lastig divje. De container wordt bij het laden van de pagina (of bij resize) aangepast, het is op het moment geen goeie optie om de div waar de content in staat een width te geven. Maargoed, das ff minder belangrijk, het gaat me vooral om het eerste probleem. Is dat een bekende IE bug, of ligt het toch (deels) aan mijn code? Iemand een idee?

De site staat overigens hier online: http://131.155.241.103/bersonnew/

[Verwijderd]

Ik denk dat je beter 'display' kunt gebruiken voor je menu. Dat terzijde, lukt het misschien hiermee: http://www.naarvoren.nl/artikel/hover.html ?

[crisp]

of het een bekende bug is weet ik niet; ik ben inmiddels al zoveel bugs in IE tegengekomen dat ik het zelf niet meer bijhou.

Wat is trouwens de reden dat je de container moet/wil aanpassen bij resizing? Dat lijkt me behoorlijk onrustig...

edit: even gekeken, en inderdaad; die resizing is erg onrustig - het feit dat het beeld na het inladen van de plaatjes en content ineens veranderd geeft een onprettig verassingseffect. Dat is trouwens ook de reden dat ik zelf onload-dingen mijdt als de pest...

[ Voor 37% gewijzigd door crisp op 30-03-2004 21:09 ]

[X-Lars]

Een CSS hack toepassen? Dus zet er CSS in die met IE6 werkt en gebruik daarnaast iets als #menu > ul ul voor Mozilla, etc.

Ja dat met die resize is geen succes vrees ik... Lijkt me nogal een gevoelig iets in verschillende browsers. Hier met Firefox lijkt het goed te gaan en in IE6 gaat de 1e resize goed, maar daarna..

[Dr_Frickin_Evil]

De resize vind ik zelf totaal niet storend eigenlijk, ik begrijp ook niet helemaal wat er zo storend zou zijn? Het is ook niet mijn keus, maar de 'klant' had dat graag. Ik vind het verder wel oke. Dat 2e probleem, daar ga ik dan verder wel uitkomen, het gaat me meer om het 1e. Ik kan natuurlijk ook wel de menuutjes helemaal absoluut positioneren op het scherm, maar dit zou ook gewoon prima moeten werken, ik snap het probleem niet. Dat :hover attribute toevoegen aan IE zie ik ook niet echt zitten eerlijk gezegd, ik schrijf het allemaal liever zelf.

[Dr_Frickin_Evil]

Ik word echt helemaal gek van IE (en een beetje ook van firefox) op dit moment. Ik kom nu echt bug na bug tegen lijkt het wel. Ik heb een menu zoals gegeven in de openingspost. En ik heb deze CSS properties: #menu ul, #menu li, #menu a { display: block; margin: 0; padding: 0; border: 0; } en #menu li { padding: 0 0 1px 0; }. Werkt netjes. Maak ik de padding nu 0 voor alle li's in #menu, dan voegt IE spontaan een padding gelijk aan een lineheight toe. Ja joh, waarom niet he? Haal ik nu de display: block weg in #menu, #menu li, #menu a, dan werkt het wel weer goed, maar dan heb ik het probleem dat in firefox de li's met een submenu, een padding rechts van een pixel of 2 krijgen. Hoe kan dit nu allemaal? Belangrijker: hoe kom ik er af??

Zo is er echt geen lol meer aan, ben vandaag veel uurtjes bezig geweest, en meer als 80% ben ik met dit soort problemen bezig geweest.

Imagine.... A world without IE, where everyone would use Firefox. Wouldn't that be worth fighting for? Wouldn't that be worth DYING for?

Driewerf ja!

Ik ga naar bed