positioneren: IE vs. FF

[RickyHeijnen]

Ik ben momenteel met mijn website bezig. Hierbij maak ik gebruik van divjes die gepositioneerd moeten worden. Nu kom ik erachter dat IE en FF heel anders omgaan met margin en padding en ook top en left gaan niet bij beide browsers even goed.

Kan iemand mij vertellen waar ik vooral op moet letten en wat een goede oplossing zou kunnen zijn om de site in beide browsers hetzelfde te tonen? (2 stylesheets voor verschillende browsers?).

[Verwijderd]

Box border model

IE rekent de padding en de border bij de width van een div,
FF etc. niet (conform de W3 standaard).

Indien je dit wilt oplossen kan je dit als volgt proberen:

Een box met een width van 100px en padding van 10 px aan beide zijden ..

div#box {
width: 80px !important; /* Voor niet-IE browsers die net als toekomstige UA's de important regel kennen */
width: 100px;
padding: 0 10px;
}


Je moet ook oppassen voor eventuele afrondingsfouten bij de browsers, zo is 50% + 50% niet altijd 100% maar soms ook 100.1%, dus bij een eventuele overflow of rare plaatsing van elementen kan je de width van sommige elementen 'ietwat' minder breed maken, bvb 49.9% en 49.9%/50%.

Let ook op voor IE die bepaalde margin/padding's niet goed rendert, heeft niets te maken met box border model maar met een rare verdubbeling van bvb een linkerpadding/margin.

En zo zijn er nog wel een aantal zaken, probeer je zo goed als het kan bij 1 stylesheet te beperken

[ Voor 39% gewijzigd door Verwijderd op 08-11-2005 20:21 ]

[Verwijderd]

In mijn ervaring kun je het best ontwikkelen op FF, aangezien die zich op dat punt aan de standaarden houdt. Zodra je website helemaal klaar is, ga je hem openen in IE en kijken waar de problemen zitten. Veel is op te lossen met hacks zoals hierboven, of door bv. divjes in divjes te nesten etc.

Ik denk niet dat deze discussie op deze manier heel zinvol is, ik denk dat je beter met specifieke vragen kunt komen, bv. 'waarom kan <iets> in IE niet goed komen'?

[banaan666]

Wat ook een optie is, niet zo netjes vind ik zelf maar soms komt het handig uit. Gebruik geen width en padding of margin in dezelfde style definitie voor hetzelfde element.

<div class="opvulling">
<div class="breedte">
....
</div>
</div>

div.opvulling {
padding: 10px;
}

div.breedte {
width: 100px;
}

Daarnaast kun je IE 6.0 forceren om het W3C box model te gebruiken door de juiste DOCTYPE boven aan in je HTML te zetten.

[banaan666]

Verwijderd schreef op dinsdag 08 november 2005 @ 20:18:
...

Let ook op voor IE die bepaalde margin/padding's niet goed rendert, heeft niets te maken met box border model maar met een rare verdubbeling van bvb een linkerpadding/margin.

...

Dit probleem komt voor wanneer een (un)ordered list, dmv een float horizontaal gezet wordt. In IE zal de eerste margin dan dubbel uitgevoerd worden. Dit is op te lossen door display: inline toe te voegen. Anders even googelen op "ie double float margin bug"

[crisp]

banaan666 heeft het juist, hoewel ik het gebruik van een volledige doctype geen 'forceren' zou willen noemen, maar gewoon iets dat zo hoort

[RickyHeijnen]

De oplossing van n00bslayer heeft me geholpen, hij werkt nu in beide browsers goed... Wel omslachtig en lastig dat de browsers er ander mee omgaan, maarja het is nu eenmaal niet anders.

Als doctype heb ik XHTML 1.1, zou niet weten welke doctype ik anders zou moeten gebruiken...

Bedankt!

[Verwijderd]

html 4.01

xhtml werkt toch niet in IE...

[RickyHeijnen]

XHTML wordt toch steeds meer gebruikt, waarom zou dat niet werken in IE?

[crisp]

zoetericky schreef op dinsdag 08 november 2005 @ 21:24:
XHTML wordt toch steeds meer gebruikt, waarom zou dat niet werken in IE?

Omdat de specificatie zegt dat XHTML 1.1 met een XHTML-mimetype geserveerd dient te worden, en IE kan daar niets mee aanvangen.
XHTML wordt inderdaad steeds vaker gebruikt, maar in 99,9% van de gevallen verkeerd gebruikt.

[ Voor 14% gewijzigd door crisp op 08-11-2005 21:30 ]

[Verwijderd]

omdat xhtml heel iets anders is en IE dat gewoon niet snapt, als je xhtml aanbiedt, probeert ie het te downloaden. Als je xhtml als html aanbiedt (Wat je waarschijnlijk doet) dan behandeld IE het als HTML en dat gaat meestal goed vanwege het feit dat het syntactisch op elkaar lijkt, maar je moet dan niet de illusie hebben dat je met xhtml bezig bent. Het heeft ook dan helemaal geen voordelen, hoogstens nadelen als je niet goed oplet.

Ergo: zorg dat je weet hoe het hele feestje in z'n werk gaat voordat je xhtml (syntax) gaat gebruiken

edit: waarschijnlijk gebruik je ook een xml prefix bij je document, dit triggered IE in quirks mode, vandaar je boxmodel probleem. Aangezien je toch al geen xml (of xhtml) serveert is het toevoegen van zo'n prefix eigenlijk ook een beetje loos (net als je dtd dus)

[ Voor 21% gewijzigd door Verwijderd op 08-11-2005 21:45 ]

[BtM909]

Lijst van doctypes die je kan gebruiken: http://www.w3.org/QA/2002/04/valid-dtd-list.html.

Let op de volledige URI verwijzing naar de DTD. Sommige editors schijnen dat nog te vergeten

[Verwijderd]

Wat relevante ie/google/.. workaround info die misschien kan helpen bij het ondersteunen van doctypes e.d.

[Verwijderd]

Verwijderd schreef op dinsdag 08 november 2005 @ 21:03:
html 4.01

xhtml werkt toch niet in IE...

Onzin. XHTML 1.0 (HTML compatible) werkt wél in IE6, omdat het dan als mediatype text/html verstuurd mag worden. 'Werken' is natuurlijk een groot woord, maar Internet Explorer 6 kan er in ieder geval mee overweg. XHTML 1.1 dient echter als mediatype application/xhtml+xml geserveerd te worden, en als je dat probeert gaat het fout in IE. Lekker HTML-compatible XHML 1.0 gebruiken totdat IE (7?) wel om kan gaan met het mime application/xhtml+xml..

[Verwijderd]

niks onzin, IE beschouwt xhtml op die manier verstuurd als html en dus vind ik dat je kan zeggen dat je xhtml niet werkt.

Iets simpels als:

code:

...
<script type="text/javascript" src="iets.js" />
...

met verder aangevulde code is prima xhtml toch? dat gaat dus niet werken in ie als je het als html verstuurd, waarom? omdat een script element een sluit tag nodig heeft en die /> niet als zodanig beschouwd wordt, resultaat: een leeg venster.

iets anders: in script is iets als document.write toegestaan, dat levert geen ernstige rommel op op dit moment, maar als je switched naar echte xhtml zou je script direct niet meer werken.

Als je van deze (en andere) dingen op de hoogte bent, ga dan vooral je gang, maar weet wel dat xhtml alleen in IE "werkt" omdat de syntax zo verdomt leuk op html lijkt, maar wat er werkt is dus html, geen xhtml

sterker nog, als IE netjes overweg zou kunnen met de sgml NET closing tag (de "/"; "<strong/lala/" wordt dan beschouwd als <strong>lala</strong>), dan had je overal ">" characters door je document gezien, aangezien <br /> gezien wordt als <br>>. Nu dit (gelukkig) niet werkt, kom jij weg met xhtml als html, maar feitelijk is dit vertrouwen op een onvolledige implementatie die in andere browsers wel eens wel zou kunnen zitten

[ Voor 23% gewijzigd door Verwijderd op 09-11-2005 19:36 ]

[Verwijderd]

Verwijderd schreef op woensdag 09 november 2005 @ 19:30:
niks onzin, IE beschouwt xhtml op die manier verstuurd als html en dus vind ik dat je kan zeggen dat je xhtml niet werkt.

De eeuwige discussie. Als ik een pagina maak die valid XHTML is, en IE geeft 'm correct weer, dan werkt het dus.

code:

<script type="text/javascript" src="iets.js" />

met verder aangevulde code is prima xhtml toch? dat gaat dus niet werken in ie als je het als html verstuurd, waarom? omdat een script element een sluit tag nodig heeft en die /> niet als zodanig beschouwd wordt, resultaat: een leeg venster.

Dus doe je:

code:

<script type="text/javascript" src="iets.js"></script>

voila.. valid HTML en valid XHTML.

[ Voor 25% gewijzigd door Verwijderd op 09-11-2005 19:35 ]

[Verwijderd]

"het" werkt ja, maar wat er werkt is wel dus html, geen xhtml. En ik vind het belangrijk dat mensen dat weten, want anders kan je dus problemen krijgen die ik al aangaf, en die kunnen we vervolgens weer hier op GoT gaan oplossen, beter meteen vertellen waar het probleem ligt en die voorkomen

boodschap: doe niet xhtml omdat het hip is of omdat het moet, maar omdat je gebruik kan maken van de voordelen ervan (bv serverside xml tools op los laten). Als je de nadelen weet en afweegt is er ook niks mis mee

[ Voor 29% gewijzigd door Verwijderd op 09-11-2005 19:39 ]

[Verwijderd]

Verwijderd schreef op woensdag 09 november 2005 @ 19:30:
niks onzin, IE beschouwt xhtml op die manier verstuurd als html en dus vind ik dat je kan zeggen dat je xhtml niet werkt.
[..]

Vandaar dat ik het over HTML-compatible XHTML 1.0 had. Ik was al bang dat er een discussie zou komen over het woordje 'werkt.'

edit: mee eens mophor, xhtml heeft ook gewoon client side voordelen, ook nu het nog brak wordt ondersteund in IE

[ Voor 16% gewijzigd door Verwijderd op 09-11-2005 19:45 ]