[CSS] div blokje van 30x19 moet zijn 30x15

[_Brake_]

Beste Tweakers,

Ik ben nu bezig met www.blijborg.nl/nieuw en het laatste dat ik hier aan gedaan heb is het blauwe blokje onder de A van Accountskantoor.

Zoals je ziet in de CSS, is die opgegeven als 30px breed en 15px hoog:

Cascading Stylesheet:

#blue {
    background-color: #38579A;
    position: absolute;
    left: 67px;
    top: 62px;
    width: 30px;
    height: 15px;
    Z-Index: 2
}

In Internet Explorer is het blokje echter 30px breed en 19px hoog! Het schijnt dat Opera wél kan tellen... Waarom IE niet? Heb de code ook al elders in het document gezet, maar niets lijkt te helpen... Wie ziet wat hier fout gaat???

[Skaah]

De border, margin en padding worden er nog bij opgeteld.
Probeer dit eens toe te voegen:

Cascading Stylesheet:

#blue {
padding: 0; margin: 0;
}

Uitleg: in de w3c specs staat dat width en height op de binnenkant van het element slaan. Een beetje een vreemde spec, maar je kunt er dus rekening mee houden door de padding en de border eraf te halen.

[ Voor 46% gewijzigd door Skaah op 07-02-2005 16:44 ]

[_Brake_]

Skaah schreef op maandag 07 februari 2005 @ 16:42:
De border, margin en padding worden er nog bij opgeteld.
Probeer dit eens toe te voegen:

Cascading Stylesheet:

#blue {
padding: 0; margin: 0;
}

Uitleg: in de w3c specs staat dat width en height op de binnenkant van het element slaan. Een beetje een vreemde spec, maar je kunt er dus rekening mee houden door de padding en de border eraf te halen.

Vergeten te vertellen Had ik al geprobeerd. Het bewijs staat nu online.

Cascading Stylesheet:

#blue {
    background-color: #38579A;
    position: absolute;
    left: 67px;
    top: 62px;
    margin: 0px;
    padding: 0px;
    width: 30px;
    height: 15px;
    Z-Index: 2
}

Maakt niks uit dus

[BtM909]

Cascading Stylesheet:

  height: 12px;
  line-height: 12px;

En ff een [plain] [/] in je div plempen.

[ Voor 10% gewijzigd door BtM909 op 07-02-2005 16:50 ]

[_Brake_]

BtM909 schreef op maandag 07 februari 2005 @ 16:49:

Cascading Stylesheet:

  height: 12px;
  line-height: 12px;

En ff een [plain] [/] in je div plempen.

Dan plaats ik liever een gifje

Vind dit wel een aardig ranzige oplossing. Niemand met een verklaring?

offtopic:
Het werkt wel hoor, daar niet van btw

height: 15px;
line-height: 12px;

The document located at <http://www.blijborg.nl/nieuw/index.html> was checked and found to be valid HTML 4.01 Transitional. This means that the resource in question identified itself as "HTML 4.01 Transitional" and that we successfully performed a formal validation using an SGML or XML Parser (depending on the markup language used).

[ Voor 17% gewijzigd door _Brake_ op 07-02-2005 16:55 . Reden: werkt wel... ]

[BtM909]

_Brake_ schreef op maandag 07 februari 2005 @ 16:51:
[...]


Dan plaats ik liever een gifje

Vind dit wel een aardig ranzige oplossing. Niemand met een verklaring?

offtopic:
Het werkt wel hoor, daar niet van btw

[...]

Je gebruikt een div die, blijkbaar, automagisch de default line-height overneemt. Vraag me af of je uberhaupt voor je oplossing een div moet gaan gebruiken

[_Brake_]

BtM909 schreef op maandag 07 februari 2005 @ 16:55:
[...]

Je gebruikt een div die, blijkbaar, automagisch de default line-height overneemt. Vraag me af of je uberhaupt voor je oplossing een div moet gaan gebruiken

Hmm... Ik plaats wel een gifje dan... Misschien is het niet de beste oplossing, maar goed

Wat is die default line-height dan?

[Not Pingu]

_Brake_ schreef op maandag 07 februari 2005 @ 16:59:
[...]


Hmm... Ik plaats wel een gifje dan... Misschien is het niet de beste oplossing, maar goed

Wat is die default line-height dan?

En jij vindt die & nbsp; en line-height instellen een ranzige oplossing? Grote kans dat je met een spacer gifje nog steeds tegen dit probleem aanloopt. IE heeft af en toe idd de neiging om een lege div te zien als een lege tekstregel, en met een image erbij los je dat niet op denk ik.

De default line-height is wat je zelf instelt voor de body (of elementen daaronder).

[ Voor 9% gewijzigd door Not Pingu op 07-02-2005 19:58 ]

[_Brake_]

Heb toch jouw oplossing maar gebruikt, stil maar

Bedankt ook voor de verklaring!

[Blaise]

Wat is die default line-height dan?

+/- 1.2 em (dus 1,2 * font-size)