[CSS] Header-div wordt verkeerd weergegeven in Firefox

[mr_obb]

We zijn hier bezig met een pagina. Lange tijd is het ons gelukt om onder alle browsers een goed werkende website te houden. Sinds gisteren wordt echter de header-div, de grijze balk bovenin de pagina, onder FF en Opera niet meer goed weergegeven.

Knip

De header-div

Cascading Stylesheet:

#Header {
    margin:25px 0px 10px 0px;
    padding:17px 0px 0px 20px;
    /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
    height:99px; /* 80px (correct height) + 17px (padding) + 2px (border) = 33px */
    border-style:solid;
    border-color:black;
    border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
    line-height:11px;
    background-color:#eee;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
    voice-family: "\"}\"";
    voice-family:inherit;
    height:80px; /* the correct height */
    }
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:80px;}

Op regel 5 wordt de hoogte van de div opgegeven voor IE5, voor de overige browsers op regel 19. Alleen houden deze twee browsers zich daar niet aan.

Hebben jullie enig idee waar het aan ligt? Het heeft gewerkt, maar blijkbaar is er iets fout gegaan.

Knip

Voor de volledige html: rechtermuisknop

[ Voor 14% gewijzigd door mr_obb op 06-02-2005 13:01 ]

[Blauw]

_{Offtopic: erg geinspireerd geraakt op http://www.bluerobot.com/ ?}

Wat is er mis met de grijze balk dan? Die werkt toch gewoon?

[Verwijderd]

Wat denk je op te geven op regel 25 dan?

Verder is het natuurlijk alles behalve slim om hacks te gebruiken, die heb je helemaal nergens voor nodig. Een beetje handig omgaan met height, margin en padding op verschillende elementen is voldoende.

[ Voor 73% gewijzigd door Verwijderd op 05-02-2005 20:31 ]

[mr_obb]

Blauw schreef op zaterdag 05 februari 2005 @ 20:29:
_{Offtopic: erg geinspireerd geraakt op http://www.bluerobot.com/ ?}

Ik bedank bluerobot ook in mijn colofon.

Wat is er mis met de grijze balk dan? Die werkt toch gewoon?

Bekijk hem eens onder FF en IE en zie het verschil. Onder IE staat het logo volledig in de grijze balk. Onder FF en Opera is de balk maar heel klein en wordt alleen de padding meegenomen. Twee mogelijkheden: De header is te klein, of de Content-div is te hoog.

[ Voor 8% gewijzigd door mr_obb op 06-02-2005 13:02 ]

[mr_obb]

Verwijderd schreef op zaterdag 05 februari 2005 @ 20:30:
Wat denk je op te geven op regel 25 dan?

Dat staat in de css op internet gewoon op 80. Foutje in de startpost.

Verder is het natuurlijk alles behalve slim om hacks te gebruiken, die heb je helemaal nergens voor nodig. Een beetje handig omgaan met height, margin en padding op verschillende elementen is voldoende.

Leg uit... (Flamen is makkelijk, leg dan uit hoe ik het volgens jou zou moeten doen.)

[crisp]

14 (height, zie regel 25) + 17 (padding-top) + 2 x 1 (border-top en border-bottom) = 33 pixels

Overigens is de Tantek hack wel 1 van de meest ugly hacks die er zijn. Als IE5 echt belangrijk voor je is probeer dan eens iets te doen met conditional comments om om boxmodel problemen heen te werken, dan kan je je main-CSS ook gewoon schoon houden.

[mr_obb]

crisp schreef op zaterdag 05 februari 2005 @ 20:36:
14 (height, zie regel 25) + 17 (padding-top) + 2 x 1 (border-top en border-bottom) = 33 pixels

Deze 14 staat op de site op 80.

Probleem opgelost. Was een probleem in een ander deel van de CSS die dit veroorzaakte.

[ Voor 17% gewijzigd door mr_obb op 05-02-2005 20:46 ]

[crisp]

mr_obb schreef op zaterdag 05 februari 2005 @ 20:42:
[...]


Deze 14 staat op de site op 80.

Nee hoor; na je #Tabs declaratie staat er echt:

Cascading Stylesheet:

body>#Header {height:14px;}

handig, die webdeveloper extentie. 'View Style Information' en dan gewoon op het element klikken om te zien welke styles er precies zijn toegepast

[ Voor 26% gewijzigd door crisp op 05-02-2005 20:46 ]

[Verwijderd]

Als het nodig zou zijn, was ik het eens met crisp, maar zo'n simpele layout moet je gewoon uit je mouw kunnen schudden als je even oefent met CSS. Je hoort gewoon te weten hoe height, width, padding en margin (samen)werken.

Als je het mij vraagt heb je gewoon een partij CSS bij elkaar ge-c/p't.

Het is werkelijk heel simpel. Je hebt een div met id="header", die moet op zoveel pixels van de bovenkant komen, dat is dus margin. Je aan de boven- en onderkant een pixel brede border, dan wat vrije ruimte, margin dus, en dan een regeltje tekst, weer een beetje ruimte. Waarom zou je in vredesnaam een hoogte opgeven? Die div rekt wel mee als je geen gekke dingen uithaalt.

[mr_obb]

crisp schreef op zaterdag 05 februari 2005 @ 20:44:
[...]


Nee hoor; na je #Tabs declaratie staat er echt:

Cascading Stylesheet:

body>#Header {height:14px;}

handig, die webdeveloper extentie. 'View Style Information' en dan gewoon op het element klikken om te zien welke styles er precies zijn toegepast

Heb je gelijk in. Had ik ook net gevonden Nu werkt het weer prima.

[ Voor 6% gewijzigd door mr_obb op 05-02-2005 20:47 ]

[crisp]

Overigens eensch met Cheatah. Je maakt het jezelf nodeloos moeilijk, en met al die hacks in je CSS zie je dus op een gegeven moment door de bomen het bos (of de fout) niet meer

[ Voor 5% gewijzigd door crisp op 05-02-2005 20:48 ]

[mr_obb]

crisp schreef op zaterdag 05 februari 2005 @ 20:48:
Overigens eensch met Cheatah. Je maakt het jezelf nodeloos moeilijk, en met al die hacks in je CSS zie je dus op een gegeven moment door de bomen het bos (of de fout) niet meer

Door jullie "gezeur" ben ik de site ook eens gaan testen zonder al die hacks. Volgens een website die plaatjes maakt van de website onder andere browsers doet hij het overal prima. Alleen het menu is in IE5 iets smaller, maar daar kan ik niet meer zitten. Er zitten nu dus geen hacks meer in de CSS.