[CSS]Verschillen in browsers

[Dr_Frickin_Evil]

Ik ben bezig met een site, en kom, zoals iedereen al wel eens gezien heeft, regelmatig verschillen tegen tussen Mozilla en IE. Voornamelijk eigenlijk in het interpreteren van de css-file. De breedte klopt vaak niet, of de positionering klopt niet goed. Hoe lossen jullie dit dan op? 2 Verschillende css-files maken, voor elke browser eentje?

[disjfa]

xhtml doctype tovoegen en normale xhtml maken

werkt perfect en nog eens overal

[Thijsmans]

Cascading Stylesheet:

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

Dat lost alvast het positioneringsverschil op

[Verwijderd]

Je bedoelt het box-model probleem... Ik vraag me nog steeds af of die methode wel zo goed is, m.i. kun je beter zoveel mogelijk het 'echte' box-model gebruiken.

[dArtagnan]

Als je het XHTML 1.1 doctype gebruikt dan past Internet Explorer het W3C boxmodel toe (dat Mozilla ook gebruikt). Echter werken er een aantal dingen niet meer goed in internet explorer wanneer je het XHTML 1.1 doctype gebruikt.

[disjfa]

Verwijderd schreef op 30 december 2003 @ 11:50:
Je bedoelt het box-model probleem... Ik vraag me nog steeds af of die methode wel zo goed is, m.i. kun je beter zoveel mogelijk het 'echte' box-model gebruiken.

bedoel jij nou gewoon padding-box? ik zie jou wel vaker posten dat we beter niet met het box-model moeten werken. zover ik weet moet ik op het moment niet werken met een border-box omdat ik daar altijd problemen mee krijg in ie maar als ik het op padding-box zet kan ik alles goed gebruiken.

wat zouden we volgens jou moeten doen?

[Clay]

't enige probleem is dat de ene browser padding en border optelt bij de width en height, en de andere die binnen de width en height plaatsten. Margin valt er altijd buiten. Een mogelijke oplossing is dus:

• Geen padding of border gebruiken icm. opgegeven width of height.
• Width en height op auto laten op block level elementen die padding of border nodig hebben, die rekken vanzelf wel uit.

In alletwee de gevallen is het resultaat identiek, onafhankelijk van welk box model dan ook Alleen in de hoogte ben je dan mogelijk beperkt, maar breedte is toch belangrijker dan hoogte.

[Verwijderd]

Als je het XHTML 1.1 doctype gebruikt dan past Internet Explorer het W3C boxmodel toe (dat Mozilla ook gebruikt). Echter werken er een aantal dingen niet meer goed in internet explorer wanneer je het XHTML 1.1 doctype gebruikt.

Niet geheel correct.

1. IE6.0 is de enige WinIE die box-model wisselt tussen quirks/standardsmode IEbox-model/W3Cbox-model.
2. Dat doet WinIE6 alleen bij een volledige doctype (HTML4.01 + DTD verwijzing) waar _niks_ voorkomt.
3. Alle andere WinIE versies gebruiken standaard het IEbox-model

Verschillen tussen W3C en IE box-model:

W3C box-model-width = width + padding + border + margin (hetzelfde geldt voor height)
IE box-model-width = width + margin (hetzelfde geldt voor height)

Bij het IE box-model worden padding en border als het ware van de width 'afgetrokken'. Oefen hiermee als je het niet geheel begrijpt of lees: http://tantek.com/CSS/Examples/boxmodelhack.html

Persoonlijk gebruik ik het liefst het W3C box-model voor zoveel mogelijk projecten, tenzij niet anders mogelijk is. WinIE6 zet ik in zo'n geval in quirks mode zodat ik iets simpeler kan hacken (alleen 'be-nice-to-Opera' rule is nodig, voor diegene die er iets meer van weten).

Meeste andere hacks zijn niet echt forward compatible. Vooral als je gaat kijken in de W3C CSS3 specificaties over de manier waarop deze properties (momenteel proposed en een Mozilla extensie) verwijdert dreigen te worden. Daarnaast is het uiteraard in de meeste gevallen geheel overbodig.

(Hoe zit het trouwens met oudere Opera versies en Safari? Die doen het volgens mij ook niet zo goed met die hack.... Terwijl goed gebouwde sites daar makkelijk in kunnen werken...)

[disjfa]

oude opera zitten erg aan het IE model.

het erge aan oudere opera is dat die javascript ontiegenlijk slecht ondersteund. ik gebruik hem zelf al lang niet meer en hoop/neem aan dat de mensen die opera gebruiken/te verder zijn gegaan op opera 7 omdat daar de css2 en dhtml veel beter is geimplementeerd.

[Clay]

Opera 7+ doet verschilllende dingen zelfs beter dan mozilla maar oudere Opera versies zou ik echt geen moeite voor doen. Ueberhaupt is het al gepiel in de marge wat je naast IE ondersteunt, en ergens houdt het wel op

[Verwijderd]

oude opera zitten erg aan het IE model.

*Start Opera5 op, ga naar http://tantek.com/CSS/Examples/boxmodelhack.html en Anne merkte op dat z'n vermoeden klopte, Opera is een verdomd goede browser.

het erge aan oudere opera is dat die javascript ontiegenlijk slecht ondersteund.

Tja, er zijn wel meer browsers die JavaScript niet ondersteunen. Een website moet altijd downgraden in dat soort browsers, gebruikers zouden niet hoeven up te graden. Tenzij de doelgroep natuurlijk vast staat, zoals bij een intranet, maar dan heb je uiteraard de nieuwste browser-versie om voor te ontwikkelen en weet je zelfs de scherm-resoluties.

[Verwijderd]

Clay schreef op 30 december 2003 @ 12:03:
't enige probleem is dat de ene browser padding en border optelt bij de width en height, en de andere die binnen de width en height plaatsten. Margin valt er altijd buiten.

idd, heeel irritant vind ik dat! Die oplossingen zijn idd een mogelijkheid, maar toch zijn er nog situaties waar het gewoon niet te doen is om in IE en mozilla helemaal hetzelfde resultaat te bekomen met 1 en hetzelfde css bestand

Nog zoiets wat me mateloos ergert is het feit dat je aan een a tag in mozilla geen width en/of height kunt geven als je geen background image instelt. Het gaat wel als je display: block; gebruikt, maar dan kan je weer geen horizontale lists gebruiken want dan heb je display: inline nodig.

Ik hoop echt dat het niet al te lang meer duurt vooraleer er eidelijk es klaarheid kwam in heel dit browser-valid code-css ondersteuning soepje.

[Dr_Frickin_Evil]

Hmm een width aan een a tag meegeven? Vind ik wel behoorlijk ranzig eigenlijk...

[ Voor 16% gewijzigd door Dr_Frickin_Evil op 30-12-2003 15:53 ]

[Verwijderd]

Verwijderd schreef op 30 december 2003 @ 15:45:
Nog zoiets wat me mateloos ergert is het feit dat je aan een a tag in mozilla geen width en/of height kunt geven als je geen background image instelt. Het gaat wel als je display: block; gebruikt, maar dan kan je weer geen horizontale lists gebruiken want dan heb je display: inline nodig.

Complete onzin natuurlijk, dat het in IE kan wil niet zeggen dat het volgens de standaarden goed is. Een a-tag is een inline element en kent dus geen width of height. Dat is net zoiets als, dat je je mateloos ergert aan het feit dat je in Nederland maar 120 km/h mag op de snelweg, deal with it.

En wat bedoel je met horizontale lists?

[ Voor 5% gewijzigd door Verwijderd op 30-12-2003 15:59 ]

[Verwijderd]

Nog zoiets wat me mateloos ergert is het feit dat je aan een a tag in mozilla geen width en/of height kunt geven als je geen background image instelt. Het gaat wel als je display: block; gebruikt, maar dan kan je weer geen horizontale lists gebruiken want dan heb je display: inline nodig.

Ik denk dat je dan display:inline-block nodig hebt
En voor Mozilla waarschijnlijk: display:-moz-inline-box;
En voor konqueror...

Valt toch wel mee met die css-compatibiliteit

[Clay]

ik zou een horizontale lijst toch eerder met display block en float left of right maken inline is daar helemaal niet handig voor.

[Verwijderd]

Verwijderd schreef op 30 december 2003 @ 15:57:
[...]


Complete onzin natuurlijk, dat het in IE kan wil niet zeggen dat het volgens de standaarden goed is. Een a-tag is een inline element en kent dus geen width of height. Dat is net zoiets als, dat je je mateloos ergert aan het feit dat je in Nederland maar 120 km/h mag op de snelweg, deal with it.

En wat bedoel je met horizontale lists?

ik beweerde toch ook helemaal niet dat het volgens de standaarden goed is omdat het in IE werkt ... Ik zei dat het wel werkte in IE en niet in Mozilla, that's it!

en waarom zou een width geven aan een a ranzig zijn

vb. voor navigatie menu

<ul>
<li><a href="*"></a></li>
<li><a href="*"></a></li>
</u>

dan wil ik toch echt die a 's kunnen definieren dat ze allemaal even breed/hoog zijn...bekijk deze link es ff in IE en mozilla en je zal men frustratie begrijpen.

http://www.hostlounge.be/~bert/files/menu_list.html

let ook even op de leuke verschillen wat betreft paddings en margins


Ik ga wel es proberen om een horizontale list te maken met die float: left/right; Thx 4 the tip!

[Verwijderd]

code:

ul#nav li{display:block;float:left;width:200px;}ul#nav a{display:block;}

Ik hoop dat het probleem wat gecompliceerder lag, maar op het eerste gezicht lijkt dat niet zo te zijn...

[Bluestorm]

Verwijderd schreef op 30 december 2003 @ 13:32:
Persoonlijk gebruik ik het liefst het W3C box-model voor zoveel mogelijk projecten, tenzij niet anders mogelijk is. WinIE6 zet ik in zo'n geval in quirks mode zodat ik iets simpeler kan hacken (alleen 'be-nice-to-Opera' rule is nodig, voor diegene die er iets meer van weten).

Meeste andere hacks zijn niet echt forward compatible. Vooral als je gaat kijken in de W3C CSS3 specificaties over de manier waarop deze properties (momenteel proposed en een Mozilla extensie) verwijdert dreigen te worden. Daarnaast is het uiteraard in de meeste gevallen geheel overbodig.

Ik zelf wil nog weleens box-model problemen oplossen door een max-width te specificeren. deze heeft namelijk een hogere prioriteit voor mozilla dan de width. en IE kent 'm niet. Dit:

Cascading Stylesheet:

#test {
    height: 200px; width: 200px;
    max-height: 180px; max-width: 180px;
    padding: 10px; 
}

ziet er precies het zelfde uit in mozilla en IE. 't ziet er alleen wel beetje raar uit in CSS.

[ Voor 4% gewijzigd door Bluestorm op 30-12-2003 19:12 ]

[Verwijderd]

Verwijderd schreef op 30 december 2003 @ 18:54:

code:

ul#nav li{display:block;float:left;width:200px;}ul#nav a{display:block;}

Ik hoop dat het probleem wat gecompliceerder lag, maar op het eerste gezicht lijkt dat niet zo te zijn...

Clay had het ook al voorgesteld om het op die manier te doen, maar toch bedankt...jij ook Clay

met float werkt het idd in beide browsers.

ik trek een deel van men woorden terug