[CSS] DIV met height en padding anders in IE dan FF - Softwareontwikkeling

dinsdag 31 mei 2005 14:53

Acties:

Topicstarter

Hoi,

ik heb een probleempje met een DIV met een vaste hoogte.
De DIV heeft een hoogte van 77 pixels (in totaal), en een padding van 11 pixels (top en bottom).

In IE en Opera gaat dit prima, en is de DIV netjes 77 pixels hoog. In FF, NS en Safari wordt de padding echter opgeteld, en wordt dus 99 pixels hoog. En dat ziet er niet uit....
De hoogte aanpassen naar 55 pixels lost het probleem in FF, NS en Safari wel op, maar daarmee gaat het dus in IE en Opera fout...

Alhier de pagina in kwestie

Hoe kan ik dit het beste oplossen?
Mijn zoektocht heeft tot nu toe alleen oplossingen voor 100% hoogte opgeleverd, wat ik dus niet nodig heb....

dinsdag 31 mei 2005 14:55

Acties:

Verwijderd

Je moet even een andere stylesheet voor IE dan in Firefox gebruiken, of iig een aparte width en/of height in de stylesheet vermelden. Het is idd een bekend probleem dat ze beide op een andere manier de height en width bepalen als je padding gebruikt.

dinsdag 31 mei 2005 14:57

Acties:

crisp

Devver

Pixelated

Een volledige DTD boven je document zetten, zonder HTML comment daarvoor - hierdoor dwing je IE en Opera ook in standard compliants mode te renderen en gebruiken ze ook het W3C boxmodel.
Enige probleem dat je dan nog hebt is oudere IE versies

Intentionally left blank

dinsdag 31 mei 2005 14:58

Acties:

LoeiOrdinair

To Infinity and Beyond

Dat kan je heel simpel zo oplossen:

code:

div.test {
_height: 30px;
height 28px;
}

De gene met de underscore ervoor gebruikt IE en FF geruikt de andere. Het is wel een quick 'n dirty oplossing, maar werkt perfect.

dinsdag 31 mei 2005 15:21

Acties:

Xcalibur

Topicstarter

LoeiOrdinair schreef op dinsdag 31 mei 2005 @ 14:58:
Dat kan je heel simpel zo oplossen:
code:
1
2
3
4
div.test {
_height: 30px;
height 28px;
}
De gene met de underscore ervoor gebruikt IE en FF geruikt de andere. Het is wel een quick 'n dirty oplossing, maar werkt perfect.

dit werkt inderdaad, moest ze alleen wel omdraaien

quick 'n dirty of niet, als het werkt is het goed

dinsdag 31 mei 2005 15:23

Acties:

Xcalibur

Topicstarter

crisp schreef op dinsdag 31 mei 2005 @ 14:57:
Een volledige DTD boven je document zetten

is die van mij niet volledig?
of doel je meer op het bovenaan zetten? (dat staat ie in ieder geval niet)

dinsdag 31 mei 2005 15:27

Acties:

BtM909

Watch out Guys...

Xcalibur schreef op dinsdag 31 mei 2005 @ 15:23:
[...]

is die van mij niet volledig?
of doel je meer op het bovenaan zetten? (dat staat ie in ieder geval niet)

Geen HTML commentaar iig ervoor

En idd is je DTD niet compleet: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 31 mei 2005 15:29

Acties:

crisp

Devver

Pixelated

Dit is volledig (Strict in dit geval):

HTML:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

En output - ook een HTML comment - voor de DTD zorgt ervoor dat IE weer in quirksmode rendered. Die moet je dan dus weghalen.
Om boxmodel verschillen in IE < 6 op te lossen include ik vaak een speciale stylesheet mbv conditional comments.

Intentionally left blank

dinsdag 31 mei 2005 15:34

Acties:

Sappie

De Parasitaire Capaciteit!

Xcalibur schreef op dinsdag 31 mei 2005 @ 15:21:
[...]

dit werkt inderdaad, moest ze alleen wel omdraaien
quick 'n dirty of niet, als het werkt is het goed

Das idd een behoorlijk quick en dirty oplossing en bovendien lost het alleen dit specifieke probleem op en geen eventuele latere problemen.

Je zou nu een keuze moeten maken tussen de verschillende box-models (en dan met name content-box en border-box) als je het goed wilt doen. IE rendert alleen aan de hand van het (goede) (W3C) content-box box-model wanneer er een volledige DTD aanwezig is (en geen html comments daarboven). Firefox daarentegen rendert standaard altijd aan de hand van het goede box-model. Wel kan je mbv box-model switching aangeven dat firefox een ander box-model moet gebruiken.

Je zult een afweging moeten maken tussen deze twee (en bedenk daarbij ook dat IE < 6 het content-box box-model in zijn geheel niet ondersteunt). Voor IE < 6 wordt in de praktijk vaak een andere stylesheet geserveerd dmv bijv conditional comments..

edit:
beetje traag

[ Voor 4% gewijzigd door Sappie op 31-05-2005 15:35 ]

Specs | Audioscrobbler

dinsdag 31 mei 2005 15:40

Acties:

LoeiOrdinair

To Infinity and Beyond

Xcalibur schreef op dinsdag 31 mei 2005 @ 15:21:
[...]

dit werkt inderdaad, moest ze alleen wel omdraaien
quick 'n dirty of niet, als het werkt is het goed

idd.

Pagina: 1

Reageer