[(x)html/css] horizontal rules vaste padding/margin in IE7?

[kaesve]

<offtopic> huu! my first topic =D </offtopic>

Ik heb een probleem met IE7. Ik ben bezig met het bouwen van een website (layout). Ik ben al aardig gevordert, maar loop tegen een probleem. Ik gebruik in de website een horizontal ruler, met daaronder een navigatie-divje. Nu is het probleem dat dat divje in IE7 niet direct daaronder komt, maar er ~5px tussen de div en de hr zitten.. In andere browsers (SRWare Iron en FireFox) heb ik dit probleem niet.

Ik heb een testcase gemaakt om te laten zien wat ik bedoel.

Ik heb al gezocht op sites als w3schools en quirksmode, maar ik kan er niets vinden over dit probleem/verschil. Ook de margins en paddings op 0 zetten in alles wat ook maar enigszins gerelateerd is aan de hr heeft niet geholpen..

Ik hoop hier graag een structurele oplossing voor te vinden. dus niet een aparte css voor IE met een negatieve top-margin voor het divje, of de hr helemaal vervangen met een divje. als deze er niet blijkt te zijn zou ik wel weten waarom trident/IE7 hier zo moeilijk over doet.

[Xander]

Op google is er genoeg te vinden over exact dit probleem, helaas ook zonder oplossingen.

W3 zegt er het volgende over:

quote: http://www.w3.org/TR/html401/present/graphics.html#h-15.3

The amount of vertical space inserted between a rule and the content that surrounds it depends on the user agent.

Ook niet echt hoopgevend, dus... Ik ben bang dat er niets anders overblijft dan wat IE-only CSS of de <hr> in zn geheel vervangen.

[kaesve]

bedankt voor de reactie.. ik moet eens wat beter leren zoeken P:

ik ga denk ik maar voor de laatste oplossing dan. dan weet ik tenminste zeker dat hij het naast ff/ie/iron het ook goed doet in andere browsers.

[Xander]

kaesve schreef op woensdag 18 maart 2009 @ 13:24:
bedankt voor de reactie.. ik moet eens wat beter leren zoeken P:

Zo ingewikkeld was mijn zoekquery toch niet?

[google=hr margin ie]

[OkkE]

Het lijkt er op dat "position: absolute;" op de HR het probleem oplost:
http://archivist.incutio.com/viewlist/css-discuss/68815

Of het bruikbaar is binnen je ontwerp is natuurlijk een tweede. Je haalt het element uit de flow, dus het geeft wel een aantal nadelen. Maar misschien kun je er iets mee.

[ Voor 40% gewijzigd door OkkE op 18-03-2009 13:34 ]

[Da Weef]

<hr> elementen zijn imo sowieso beter te vermijden. Gebruik van een divje werkt voor mij altijd prima...

[ Voor 9% gewijzigd door Da Weef op 18-03-2009 13:44 ]

[kaesve]

Da Weef schreef op woensdag 18 maart 2009 @ 13:38:
<hr> elementen zijn sowieso deprecated en dus beter te vermijden. Gebruik van een divje werkt voor mij altijd prima...

de presentational attributes zijn deprecated, maar het element zelf volgens mij niet hoor..

en inderdaat, als ik hem absoluut maak heeft IE het probleem niet meer. toch probeerde ik dit eigenlijk te vermijden om het ontwerp zo soepel mogelijk te houden..

[OkkE]

Deprecated zijn ze volgens mij niet nee, maar Da Weef heeft wel een punt; er zijn zoveel problemen en vreemde dingen met HR elementen, dat het eigenlijk een stuk fijner werkt wanneer je ze niet gebruikt.

Het absoluut positioneren is zeker geen geweldige oplossing, maar wel een die bruikbaar kan zijn. Een andere oplossing kan zijn; het element onder de HR een negative margin-top mee te geven in IE, maar dat is ook niet echt geweldig.

Zoals Da Weef al zei; een stuk eenvoudiger is om gewoon een DIV te gebruiken. Of een border toevoegen, daarmee is vaak ook een prima "ruler" te maken. Niet semantisch, maar dat is IMO vaak ook niet nodig.

[ Voor 14% gewijzigd door OkkE op 18-03-2009 13:53 ]

[BtM909]

Da Weef schreef op woensdag 18 maart 2009 @ 13:38:
<hr> elementen zijn imo sowieso beter te vermijden. Gebruik van een divje werkt voor mij altijd prima...

Tja, aan de andere kant kan je ook zeggen dat je die 4 extra pixels maar voor lief neemt in IE

Semantisch gezien is een <hr> element toch bruikbaar

[Da Weef]

Ik had het idd al verbeterd Dat ik het een achterhaald element vind, maakt het nog niet deprecated...

Is er een specifieke reden dat je het hr-element liever niet vervangt door een divje? Ik geloof in ieder geval niet dat er een elegante manier is om de ongewenste marge in IE te verwijderen...

Semantisch gezien is een <hr> element toch bruikbaar

Tja, het kán semantisch wel waarde hebben (als separator), maar in de meeste (deze?) toepassingen is die nagenoeg non-existent.

[ Voor 25% gewijzigd door Da Weef op 18-03-2009 14:08 ]

[kaesve]

@ da weef: nee hoor. zoals ik in mijn 2e post al had gezegt (blijkbaar toch niet duidelijk genoeg..?) heb ik gekozen voor het vervangen van de hr met een divje (en het werkt )

en @btm909: idd, ik gebruikte de hr vooral omdat ik een keertje wilde proberen zo semantisch correct mogelijk op te bouwen. divjes zijn niet bepaald gemaakt voor het scheiden van content, hoewel het er wel mee kan.
helaas vallen die 4 extra pixels behoorlijk op. het gaat namelijk (als je even naar de layout kijkt, waar ik eerder naar linkte) nu om het dropdown-icoontje, naast het woord 'content' onder de header. in IE sluit het doosje dus niet meer mooi aan en dat is toch vrij schadelijk voor de layout D: