[CSS] Verschillend resultaat in drie browsers - Softwareontwikkeling

woensdag 21 augustus 2002 18:31

Acties:

Topicstarter

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 (NFI).

Vandaag was zo'n dag.

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

Rechtbovenin moet een div-element staan (position: fixed). Met 2 img-tags en een div met 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). De links zijn relatief uitgelijnd (ze moeten dus onder elkaar komen. Toch

)

Opera geeft op de een of andere manier de achtergrondplaatjes niet weer. Ik weet inmiddels dat in Opera 6 een inline element geen achtergrondplaatje kan bevatten. Maar waarom wordt de tekst niet goed uitgelijnd?

Mozilla doet het beter dan Opera, maar de links hebben niet de ingestelde breedte en hoogte. Ook zijn de links niet goed gepositioneerd.

IE zet het div-element links neer (kennelijk kent hij het position: fixed, ism width: 170px 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?

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert

woensdag 21 augustus 2002 19:33

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

msie kent geen position: fixed; mogelijk werkt het door eerst position: absolute; position: fixed; te doen, de ua die fixed niet ondersteund alt dan terug op absolute.

voor zowel mozilla alswel Opera zou ik de links gewoon display: block maken ipv inline elements, doordat dit inline elementen zijn komen ze niet onder elkaar zolang de width niet uitgevoerd wordt.

ik heb het getest in Chimera (mozilla1.1) en msie5.2/mac; msie5.2/mac zet de oultine om de body verkeerd neer (in de hoeken) en de hover functioneert niet (de hele muis reageert niet en blijft default; alhoewel de link wel functioneert)

richinstyle.com had altijd een prima overzicht van alle CSS-bugs, maar juist mozilla1, opera6 en msie6 ontbreken nog altijd en de site lijkt me wat verouderd aan het geraken te zijn

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 21 augustus 2002 19:54

Acties:

edie

Topicstarter

Hmm... nu is het onder elkaar uitgelijnd (met display:block), maar in Mozilla zit er nu een ruimte tussen de 'buttons'.

En waarom werkt in het div-element de property text-align:center niet (meer)? Of werkt dat niet op block-level boxen?

edit:

Hmm.. het ziet ernaar uit dat Mozilla de padding op block-elementen ziet als margin ofzo

Wat als ik de padding weg haal (padding-top: 0px), dan sluiten de buttons wel op elkaar aan.

Of is de achtergrond afhankelijk van de padding? Nee toch?

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert

woensdag 21 augustus 2002 20:50

Acties:

crisp

Devver

Pixelated

eddie19 schreef op 21 augustus 2002 @ 19:54:
Hmm... nu is het onder elkaar uitgelijnd (met display:block), maar in Mozilla zit er nu een ruimte tussen de 'buttons'.

En waarom werkt in het div-element de property text-align:center niet (meer)? Of werkt dat niet op block-level boxen?

edit:

Hmm.. het ziet ernaar uit dat Mozilla de padding op block-elementen ziet als margin ofzo
Wat als ik de padding weg haal (padding-top: 0px), dan sluiten de buttons wel op elkaar aan.

Of is de achtergrond afhankelijk van de padding? Nee toch?

verplicht leesvoer over boxmodel verschillen tussen IE en Mozilla

Padding wordt dus buiten de content gerenderd. Blijkbaar past Mozilla de background alleen toe op de content-area...

Intentionally left blank

woensdag 21 augustus 2002 23:00

Acties:

edie

Topicstarter

crisp schreef op 21 augustus 2002 @ 20:50:
[...]

verplicht leesvoer over boxmodel verschillen tussen IE en Mozilla
Padding wordt dus buiten de content gerenderd. Blijkbaar past Mozilla de background alleen toe op de content-area...

Ik heb even vluchtig het topic doorgelezen. Ik zal morgen nog wel eens wat meer gaan testen met padding en margin. Ik wist al dat IE crappy was (die verandert de grootte van het element bij padding...).

Op zich zijn Mozilla en Opera gelijk kwa CSS ondersteuning. Alleen ondersteund Opera bepaalde zaken niet (overflow: scroll, een background-image op inline elementen, etc..). Maar dat wordt opgelost (als het goed is

) in Opera 7

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert

woensdag 21 augustus 2002 23:43

Acties:

crisp

Devver

Pixelated

eddie19 schreef op 21 augustus 2002 @ 23:00:
[...]

Ik heb even vluchtig het topic doorgelezen. Ik zal morgen nog wel eens wat meer gaan testen met padding en margin. Ik wist al dat IE crappy was (die verandert de grootte van het element bij padding...).

Op zich zijn Mozilla en Opera gelijk kwa CSS ondersteuning. Alleen ondersteund Opera bepaalde zaken niet (overflow: scroll, een background-image op inline elementen, etc..). Maar dat wordt opgelost (als het goed is ) in Opera 7

Wat je zegt over IE klopt eigenlijk niet; IE rekent de padding wel bij de content, maar de W3C specs rekenen het buiten de content, maar binnen de box.
Opera beweert wel vaker dat ze dingen gaan ondersteunen, maar tot nog toe zie ik nog steeds weinig in een statische render-engine...

Intentionally left blank

woensdag 21 augustus 2002 23:47

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

over de text-align, die werkt gewoon wel hoor, althans hier zowel in Chimera/mozilla alswel Konqueror (waar ik hem voor de grap ook even intestte, en tot mijn verrassing doet hij het daar prima, gelijk aan de rendering door mozilla)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 21 augustus 2002 23:52

Acties:

edie

Topicstarter

crisp schreef op 21 augustus 2002 @ 23:43:
[...]

Wat je zegt over IE klopt eigenlijk niet; IE rekent de padding wel bij de content, maar de W3C specs rekenen het buiten de content, maar binnen de box.

Bij het ontwerpen van pagina's ga ik zoveel mogelijk uit van de W3C specs. IE gebruikers hebben maar pech gehad

crisp schreef op 21 augustus 2002 @ 23:43:
Opera beweert wel vaker dat ze dingen gaan ondersteunen, maar tot nog toe zie ik nog steeds weinig in een statische render-engine...

Opera 7 zou complete DOM2 ondersteuning krijgen, misschien een gedeelte van DOM3 en CSS3, maar dat weet ik niet zeker.

Verder heb ik eigenlijk weinig zin in een discussie over welke browser nou beter is (of beter de W3C specs naleeft). Mijn probleem is grotendeels opgelost (Mozila doet precies wat ik wil; Opera heeft problemen met fixed-elementen (staat in de newsgroup genoeg over het 'hover'-effect) en achtergrondplaatjes bij inline-elementen, maar voor de rest ziet het er zo uit als ik wil; IE zuigt gewoon (NFI) met mijn CSS2)

"In America, consumption equals jobs. In these days, banks aren't lending us the money we need to buy the things we don't need to create the jobs we need to pay back the loans we can't afford." - Stephen Colbert

woensdag 21 augustus 2002 23:57

Acties:

Verwijderd

eddie19 schreef op 21 augustus 2002 @ 23:52:
[...]
Bij het ontwerpen van pagina's ga ik zoveel mogelijk uit van de W3C specs. IE gebruikers hebben maar pech gehad

/me snapt niet echt dat hier 90% vd internetters wordt genegeerd.

woensdag 21 augustus 2002 23:59

Acties:

crisp

Devver

Pixelated

eddie19 schreef op 21 augustus 2002 @ 23:52:
[...]

Bij het ontwerpen van pagina's ga ik zoveel mogelijk uit van de W3C specs. IE gebruikers hebben maar pech gehad

[...]

Opera 7 zou complete DOM2 ondersteuning krijgen, misschien een gedeelte van DOM3 en CSS3, maar dat weet ik niet zeker.

Verder heb ik eigenlijk weinig zin in een discussie over welke browser nou beter is (of beter de W3C specs naleeft). Mijn probleem is grotendeels opgelost (Mozila doet precies wat ik wil; Opera heeft problemen met fixed-elementen (staat in de newsgroup genoeg over het 'hover'-effect) en achtergrondplaatjes bij inline-elementen, maar voor de rest ziet het er zo uit als ik wil; IE zuigt gewoon (NFI) met mijn CSS2)

IE neemt het nou eenmaal niet zo nauw met de specs en gaat meer uit van de 'user-experience'.
Ik ben zelf ook zeer benieuwd naar de ontwikkeling van Opera, maar ik geloof nooit dat ze read-write implementatie van de DOM standaard op zo een korte termijn kunnen implementeren; oftewel van een statische naar een dynamische rendering kunnen gaan. In mijn ogen vergt dat een complete rewrite van de engine die ze op dit moment gebruiken...

Intentionally left blank