[FF/IE6] Verschillen in marges, borders en lettertype(ruimte

[Verwijderd]

Ik ben lekker een site aan het bouwen, ben nog niet te handig met <divs> dus gebruik ze niet zoveel, hier en daar verweef ik ze in mijn code aangezien ik nog niet direct weet wat ik allemaal in divs wil gaan zetten.

Ik ben dus iemand van de tabellen op dit moment en dat gaat me prima af, later wil ik een keer over naar <divs> ik heb alleen de tijd/zin niet om dat nu direct uit te gaan zoeken... dit heeft gewoon een latere prio.

Ik kom alleen regelmatig een probleem tegen tussen IE en FF dat de lettertypen kleiner zijn in FF, de enters en/of marges ook. Tevens zijn 1 pixel borders bijna een halve in FF in vergelijking tot IE. Beter gezegd is de 1px border in IE eigenlijk 2px en in FF echt 1px.

Is dit op te lossen door standaard waarden te gebruiken ergens in mijn CSS code ?

Ik gebruik wel een serie lettertypen die eigenlijk iedere browser wel kent, ze zien er alleen in FF anders uit dan in IE.

Dat eigenlijk nog tot daar aan toe, er zijn wel meer verschillen, ook tussen Windows en Linux.

Stel ik heb twee kolommen naast elkaar staan met in 1 van de 2 een plaatje. In de andere kolom typ ik tekst. Wanneer in FF in Linux alles gelijk is onderaan de kolommen is dit in IE en FF in Windows weer niet.

OK, hier kan ik redelijk in komen, maar wanneer je IE en FF onder Windows weer vergelijkt is de marge in IE groter aan de onderkant van de tekst/plaatje tussen beide kolommen dan in FF.

De tussenruimte tussen de tekst en de tekst überhaupt is dus vreselijk verschillend.

Is dit een W3 standaard die ik niet gebruik of blijf je dit houden met kolommen naast elkaar waar niet dezelfde zaken in staan ?

[Verwijderd]

Misschien dat je met vaste margin en padding waarden een eind komt, anders zou je hacks kunnen gebruiken.
margin:4px 2px 4px 2px;
_margin:2px 1px 2px 1px; /*omdat ie6 zuigt*/

Dat van die border vind ik heel raar, want 1px = 1px, ook in IE6.

Kan je het niet online zetten?

[ Voor 22% gewijzigd door Verwijderd op 27-03-2007 16:33 ]

[HyperioN]

Post eens wat (relevante) code, anders is het natuurlijk giswerk waar het aan kan liggen.
Als je volgens het boekje werkt met css, zou het op iedere browser op ieder platform hetzelfde eruit moeten zien. Er zijn natuurlijk altijd lastige dingetjes (vooral met divs) maar relatief simpele dingetjes als lettergroottes en borders zouden geen enkel probleem moeten zijn.

[BikkelZ]

Een aantal verschillen kun je opheffen door de juiste DTD (STRICT, TRANSITIONAL of FRAMESET) te gebruiken in HTML 4.0x of XHTML 1.x

Alle pagina's die niet gedeclareerd zijn worden LOOSE gerenderd en dat is nou eenmaal losjes

[Verwijderd]

OK, dan ga ik eerst mijn code even nalopen, ook de CSS. Ik was redelijk bang dat het aan mij lag namelijk... ligt het in zoverre dus ook

Maar het klopt wel dat de borders verschillen in formaat (beedte) ?

[ Voor 20% gewijzigd door Verwijderd op 27-03-2007 17:04 ]

[HyperioN]

Verwijderd schreef op dinsdag 27 maart 2007 @ 17:00:
OK, dan ga ik eerst mijn code even nalopen, ook de CSS. Ik was redelijk bang dat het aan mij lag namelijk... ligt het in zoverre dus ook

Maar het klopt wel dat de borders verschillen in formaat (beedte) ?

Bedoel je dotted borders? Die zien er inderdaad anders uit..

1px dotted black in IE6 en FF:


Zodra je echter 2px of iedere andere border-style pakt is het wel hetzelfde.

[ Voor 7% gewijzigd door HyperioN op 27-03-2007 17:42 ]

[BasieP]

HyperioN. schreef op dinsdag 27 maart 2007 @ 17:41:
[...]

Bedoel je dotted borders? Die zien er inderdaad anders uit..

1px dotted black in IE6 en FF:
[afbeelding]

de breedte van de borders (van element dus) zou niet uit moeten maken in IE of FF. (tenzij je IE5.5 bedoelt)

[ Voor 11% gewijzigd door BasieP op 27-03-2007 17:43 ]

[HyperioN]

BasieP schreef op dinsdag 27 maart 2007 @ 17:42:
[...]

de breedte van de borders (van element dus) zou niet uit moeten maken in IE of FF. (tenzij je IE5.5 bedoelt)

Ik maak dat screenshot toch echt uit IE6 SP2:

[BasieP]

testcaseje dan maar?

http://basiep.nl/zooi/testcase/test.html

screenshot IE6 en FF2:


zoals je ziet, in zowel IE als FF, zowel solid als dotted: 102 pixels (100 + 2 * 1 voor de border)

[HyperioN]

BasieP schreef op dinsdag 27 maart 2007 @ 18:03:
testcaseje dan maar?

http://basiep.nl/zooi/testcase/test.html

screenshot IE6 en FF2:
[afbeelding]

zoals je ziet, in zowel IE als FF, zowel solid als dotted: 102 pixels (100 + 2 * 1 voor de border)

Ooh, op die manier =) Ja dat snap ik, dat is inderdaad hetzelfde.
Wat ik bedoelde, en RutgerM misschien ook (dat weet ik niet zeker, daarom vroeg ik het) is dat één "dot" in IE 3px breed is, en in FF 1px..

Misverstandje

[BasieP]

HyperioN. schreef op dinsdag 27 maart 2007 @ 18:05:
[...]
Ooh, op die manier =) Ja dat snap ik, dat is inderdaad hetzelfde.
Wat ik bedoelde, en RutgerM misschien ook (dat weet ik niet zeker, daarom vroeg ik het) is dat één "dot" in IE 3px breed is, en in FF 1px..

Misverstandje

ja MS snapt niet wat een dot is. daar heb je gelijk in

[moozzuzz]

Wellicht ligt het aan het feit dat border geinherited wordt in een IE-table en niet in een FF-table?
Op die manier heeft je TD een solid border én je TABLE zelf ook.

Ik gok maar wat, want moeite doen om table-based-layout in orde te krijgen is als roeste antieke spullen weer willen doen blinken als nieuw (slechte vergelijking, but you get the point ;^)

Ivm de verschillen in padding/margin's: spijtig dat je daar niet meer onderzoek naar gedaan hebt, want dat is algemeen gekend. <Insert link Tweakers-FAQ & Forum-regels>

[BasieP]

* BasieP ruikt een border-collapse: collapse;

@moozzuzz
ik denk niet dat je het recht hebt de TS iets te verwijten als je zelf te lui bent om een linkje op te zoeken

[HyperioN]

moozzuzz schreef op dinsdag 27 maart 2007 @ 18:33:
Wellicht ligt het aan het feit dat border geinherited wordt in een IE-table en niet in een FF-table?
Op die manier heeft je TD een solid border én je TABLE zelf ook.

Ik gok maar wat, want moeite doen om table-based-layout in orde te krijgen is als roeste antieke spullen weer willen doen blinken als nieuw (slechte vergelijking, but you get the point ;^)

Ivm de verschillen in padding/margin's: spijtig dat je daar niet meer onderzoek naar gedaan hebt, want dat is algemeen gekend. <Insert link Tweakers-FAQ & Forum-regels>

De reeds genoemde voorbeelden door BasieP en mijzelf waren met div's, dus die beredenering gaat niet op..

[moozzuzz]

BasieP schreef op dinsdag 27 maart 2007 @ 18:38:
@moozzuzz

Heb je gelijk in

HyperioN. schreef op dinsdag 27 maart 2007 @ 18:43:
De reeds genoemde voorbeelden door BasieP en mijzelf waren met div's, dus die beredenering gaat niet op..

Ik versta uit de SP dat divs nog eventjes niet ter sprake komen. Zelf heb ik nog ruzie gehad met de border van een TR die ik uiteindelijk heb moeten vervangen door combi border-top en border-bottom op de TD.

[BasieP]

moozzuzz schreef op dinsdag 27 maart 2007 @ 18:50:
[...]

Heb je gelijk in

[...]

Ik versta uit de SP dat divs nog eventjes niet ter sprake komen. Zelf heb ik nog ruzie gehad met de border van een TR die ik uiteindelijk heb moeten vervangen door combi border-top en border-bottom op de TD.

waar een border-collapse: collapse het waarscijnlijk gefixed zou hebben (gokje, ik ken de situatie niet)

[Verwijderd]

De border-line moet echt met px gezet worden heb ik gemerkt. Thin wordt gewoon anders gezien door beide browsers. IE ziet het als 2 px en FF als 1.

Het tweede euvel met lengte van text in de kolommen is gewoon het verschil van lettertypen in het OS. Hier is gewoon echt niets aan te veranderen op een nette manier omdat de lettertypen beschikbaar met Verdana, Arial, Helvetica, sans-serif gewoon net iets te veel verschillen in Linux en Win.

In Windows werkt het allemaal prima met IE en FF verder.

Om het lengte verschil op te lossen ga ik er gewoon tussenin zitten, valt het lengte/hoogte verschil niet zo op. Je ziet het wel op meer sites met menu's die langer zijn in Win dan in Linux.