[css][html] div hoogte is verschillend met andere browser

[me1299]

Ik heb een div nodig met een vaste hoogte, die vrij klein is.

Als ik in IE dit doe:

code:

<div style='height: 1px; border: 1px solid #000000;'></div>

Krijg ik een hoogte van 12 ipv 1... Dat is op te lossen door overflow hidden toe te passen.

Maar als ik nu de volgende code heb:

code:

<div id='nav_home' style='
width: 56px; height: 11px; overflow: hidden;
margin-top: 100px; margin-left: 40px;
cursor: pointer; border: 1px solid #000000;'
onclick='document.location.href = "index.php"'>
</div>

Zo staat er een kader op de juiste plaats om een menu item op mijn website. Maar als ik nu firefox pak is hij langer dan bij IE.. als ik daarna nog meer div's eronder zet die weer uitlijnen aan de hand van de bovenstaande loopt heel de positionering in de soep.

Kan iemand mij vertellen waarom firefox een grotere hoogte hanteerd??

Ik heb nog een afbeelding om het een beetje duidelijk te maken:



Let op het zwarte kader.. deze loopt verder naar beneden en ook naar rechts in firefox.. het lijkt misschien weinig maar met een aantal items onder elkaar is het voldoende om de uitlijning in de war te schoppen.

Update:

Het heeft vrij weinig met een te kleine height te maken. Als ik een hoogte van 20 doe is hij bij firefox ook gewoon hoger dan bij internet explorer.

Waar slaat dat op? Pixels zijn toch altijd nog gewoon pixels.

[ Voor 13% gewijzigd door me1299 op 08-06-2004 14:41 ]

[André]

Cascading Stylesheet:

line-height: 1px;

-moz-box-sizing:border-box;
box-sizing:border-box;

Het box model van Firefox is anders dan die van IE:

[search=box-model]

[ Voor 74% gewijzigd door André op 08-06-2004 14:43 ]

[me1299]

André schreef op 08 juni 2004 @ 14:41:

Cascading Stylesheet:

line-height: 1px;

-moz-box-sizing:border-box;
box-sizing:border-box;

Het box model van Firefox is anders dan die van IE:

[search=box-model]

Line height werkt nu ipv overflow hidden.. maar de hoogte blijft nog steeds verschillend van firefox.

Ik ben nu ff aan het zoeken in got naar die box modellen e.d.. maar ik blijf het maar idioot vinden hoe elke browser weer anders werkt.

Maar in hoeverre is er bij mij sprake van een 'box model'?? Het enige wat ik wil is een div een aantal pixels van de kant af positioneren.

[ Voor 15% gewijzigd door me1299 op 08-06-2004 14:48 ]

[Verwijderd]

DeathKnight schreef op 08 juni 2004 @ 14:46:

Maar in hoeverre is er bij mij sprake van een 'box model'?? Het enige wat ik wil is een div een aantal pixels van de kant af positioneren.

http://www.w3.org/TR/REC-CSS2/box.html

IE begrijpt het pas vanaf IE 6 en dan alleen in strict mode.

[me1299]

En hoe kan ik het nu oplossen? Ik snap er nu helemaal geen zak meer van.

Wat ik nu eigenlijk wil is met css punten op een deel van mijn website aanklikbaar maken en niet met die zwaar irritante image-maps, en dat moet werken in de meeste browsers.

Is dat zowieso wel mogelijk??

Hmm ik geloof dat

-moz-box-sizing:border-box;
box-sizing:border-box;

het probleem inderdaad oplost. Ik neem aan dat dat een tag is die door mozilla ondersteund wordt en er voor zorgt dat deze net zo posiotioneerd als ie normaal gesproken doet.

Dank!

[ Voor 32% gewijzigd door me1299 op 08-06-2004 15:37 ]

[Verwijderd]

Heb je het uberhaupt wel doorgelezen? vind dat het behoorlijk duidelijk wordt uitgelegd.

Je kan 2 dingen doen, of je dwingt IE in strict mode door een strict doctype declaratie (de enige juiste manier), of je dwingt Mozilla in een IE box model (border-box), zoals hierboven al aangegeven werd.

[Verwijderd]

line-height: 11px; misschien

[ Voor 50% gewijzigd door Verwijderd op 08-06-2004 15:40 ]

[me1299]

Verwijderd schreef op 08 juni 2004 @ 15:36:
Heb je het uberhaupt wel doorgelezen? vind dat het behoorlijk duidelijk wordt uitgelegd.

Je kan 2 dingen doen, of je dwingt IE in strict mode door een strict doctype declaratie (de enige juiste manier), of je dwingt Mozilla in een IE box model (border-box), zoals hierboven al aangegeven werd.

Als ik IE in strict mode zet, werkt mijn website dan nog wel op IE op de Mac?

Verwijderd schreef op 08 juni 2004 @ 15:37:
line-height: 11px; misschien

Met line-height heeft mijn probleem inmiddels nix meer van doen.

[André]

Verwijderd schreef op 08 juni 2004 @ 15:37:
line-height: 11px; misschien

lees jij topics wel?

[Verwijderd]

DeathKnight schreef op 08 juni 2004 @ 15:46:
Als ik IE in strict mode zet, werkt mijn website dan nog wel op IE op de Mac?

IE mac ik denk het wel.... maar er zal ongetwijfeld wel weer iets anders dan niet werken.

[drm]

DeathKnight:
Als ik IE in strict mode zet, werkt mijn website dan nog wel op IE op de Mac?

afaik heeft IE5 Mac alleen problemen met een prolog (<?xml version=.....?> bovenaan)

[Verwijderd]

en probeer anders de max-height property, die begrijpt IE toch niet, daarmee kan je misschien ook wel afdwingen wat je wilt.

[me1299]

Hmm.. Het eerste element gaat goed met firefox nu.. maar als ik daarna relatief daar weer iets onder gooi staat het weer niet op z'n plek

Dan maar geen mozilla support, het is toch om gek van te worden!

[ Voor 3% gewijzigd door me1299 op 09-06-2004 10:39 ]

[Verwijderd]

DeathKnight schreef op 09 juni 2004 @ 10:39:
Dan maar geen mozilla support, het is toch om gek van te worden!

blijkbaar mis je een fundamentele kennis van box models en plaatsing van elementen binnen de viewport, dat nu die gebrekkige kennis er voor zorgt dat je een IE-only (so 90's) site hebt is triest.

[Amras]

Verwijderd schreef op 09 juni 2004 @ 10:52:
[...]


blijkbaar mis je een fundamentele kennis van box models en plaatsing van elementen binnen de viewport, dat nu die gebrekkige kennis er voor zorgt dat je een IE-only (so 90's) site hebt is triest.

En als je die kennis eenmaal een beetje hebt opgedaan zul je je vele malen verbazen waarom Mozilla het goed doet en IE er een potje van maakt.

[me1299]

Ja heel fijn, maar 95% van mijn klanten werkt met Internet Explorer, dus ik kan er moeilijk mee aan komen zetten dat een website niet werkt in IE maar wel in Mozilla.

Als je mij uit kan leggen hoe ik iets kan positioneren dat het ook in mozilla werkt gaarne.

Ik kan IE 6 wel strict gaan laten werken, maar dan werkt de website weer niet in 5..

Voor de aafbeeldingen heb ik nu imagemap gebruikt. Maar wat als je nu een tekst over een plaatje wil projecteren???

[Verwijderd]

DeathKnight schreef op 09 juni 2004 @ 11:47:
Als je mij uit kan leggen hoe ik iets kan positioneren dat het ook in mozilla werkt gaarne.

Als je mij een linkje geeft naar de site, dan kan ik (en anderen met mij) vast wel wat verzinnen op jouw probleem op dit punt heb ik te weinig informatie om met een zinnig antwoord te komen.

[me1299]

Momenteel werkt het geheel in firefox zowel als IE.. Ik maak gebruik van 1 div die ik positioneer, icm die css tag wordt het geheel goed weer gegeven.

Ik moet nu alleen zien te voorkomen dat ik binnen die betreffende div weer andere div's plaats met eigen marges e.d.