[CSS] Guru's?
 

Nou ben ik iets tegengekomen wat ik nog nooit heb meegemaakt...

Ik design/check mijn code (of site(s)) altijd met Opera 6.05 en Mozilla 1.0. Heeeel soms met IE 6.0, omdat ik weet dat IE niet zo goed is met CSS.

Vandaag was zo'n dag.

Ik heb de volgende 'test'-site gemaakt (meer een begin van een fansite):
http://www.erikdokter.nl/divine

Rechtbovenin moet een div-element staan (position: fixed). Met 2 img-tags en een x-aantal links. De links hebben een background-image, en wanneer je er met de muis overheen gaat, wordt de background-image veranderd (dit gebeurt in CSS). De links moeten een width en een height hebben van respectivelijk 121px en 30px (breedte en hoogte van het achtergrondplaatje).

Opera geeft op de een of andere manier de achtergrondplaatjes niet weer. (er is een bug in Opera, met het zogenaamde hover effect en position:fixed... Daar kan het iets mee te maken hebben, maar waarom worden de achtergrondplaatjes niet geladen??).

Mozilla doet het beter dan Opera, maar de links hebben niet de ingestelde breedte en hoogte. Tevens werkt (bij die links) het hover effect niet. Bij de links die onderaan de pagina staan, doet het het wel goed (die zijn hetzelfde opgebouwd). Ook zijn de links niet goed gepositioneerd.

IE zet het div-element links neer (kennelijk kent hij het position: fixed, ism width: 120px en right: 0px niet). Echter, IE is de enige die de links goed weer geeft (inclusief de achtergrondplaatjes en het hover effect) en de links goed positioneerd.

Goed. Wat nu?
Waar kan dit aan liggen????
Foutje(s) in het stylesheet? Of browser-bugs?

Tabellen schoppen nou eenmaal kont. :D :P

Ik vind div's mooier :)

maar ja... wie ben ik?

Misschien wel mooier, maar de incompatibility tussen browsers compenseert daar ruimschoots voor. :P

Welke incompatibititeit?

FYI: Het div-element zit er al vanaf HTML 3.2 in. (http://www.w3.org/TR/REC-html32#div)

hint hint ;)

Waar heb je het nou in je eerste post ook alweer over? :P Het verschil in implementatie door de browsers maakt dat het gebruik van DIVs e.d. niet geheel consistent is.

Ik probeer je een goede raad te geven. Misschien is dat niet leuk, maar het helpt misschien wel. Dus ga me dan niet lopen afpissen dat ik beter nix kan zeggen. :P

Dat ligt niet aan de div's, maar aan de correctheid van style-sheet ondersteuning :p

Hierin verschillen Opera, Mozilla en IE.

Zelfde idee.

Totaal niet :p

Maar ik heb het al (bijna) opgelost.
Nu nog een hack vinden om een style-sheet IE-only te maken :p (of gewoon IE uitsluiten;))