[CSS] <hr> in MSIE

[_Thanatos_]

Ik heb vandaag de zoveelste bug in MSIE ontdekt, waar ik een workaround voor moet verzinnen. Stel ik heb het volgende...

Cascading Stylesheet:

hr {margin: 0px}

Nou, simpeler kan haast niet

Wat blijkt, MSIE zet met deze code tóch een margin om een HR heen, terwijl ik toch duidelijk aangeef dat ie 0 pixels moet zijn. Als ik de margin op 5 pixels zet, dan telt ie er dus 5 pixels bij op ipv dat ie gewoon 5 pixels wordt.

Ik heb ook met padding gespeeld, maar daar doet ie helemaal niets mee. MSIE wil padding nog weleens verwarren met margin, maar padding wordt bij een HR dus compleet genegeerd (niet dat ik padding nodig heb, maar padding hoort in een HR wel te werken)...

Overigens werkt dit in Mozilla en Opera wel gewoon zoals het hoort...

[Willem]

En wat wil je hier vervolgens mee zeggen?

[_Thanatos_]

Nou, ik wil weten hoe MSIE vindt dat je een 0px margin op een HR maakt

[André]

Dat is omdat die margin/padding er gewoon bij hoort in IE.

[_Thanatos_]

met andere woorden, het is een bug waarvoor geen workaround is?

[Willem]

Nee, IE doet 't gewoon fout. Je zou het "bug" kunnen noemen. Je kunt er omheen werken met negatieve marges. Maar dat is ranzig. Maar dat geeft niet. Probleem opgelost?

2 zielen 1 gedachte

[ Voor 13% gewijzigd door Willem op 26-03-2004 15:04 ]

[André]

Bug? Feature

[pagani]

* pagani checked @ W3C

Een HR heeft geen margin attribuut (of ben ik nou heel dom)

http://www.w3.org/TR/1999...sent/graphics.html#h-15.3

[ Voor 53% gewijzigd door pagani op 26-03-2004 15:11 ]

[Rickets]

HTML:

div hr { display:none }
...
<div><hr /></div>

Dit is crossbrowser te stylen + je hebt de functionaliteit van <hr /> in text-only browsers

johnnyv.nl schreef op 26 maart 2004 @ 15:10:
Een HR heeft geen margin attribuut (of ben ik nou heel dom)

Eigenlijk wel, want het gaat hier om de CSS-property

[_Thanatos_]

nouja, dan maar een knopje "best viewed without IE" erbij

En negatieve marges kan wel, maar als goeie browsers het correct renderen (en dat doen ze) dan gaat het daarin natuurlijk weer niet werken...

goed, een hele ranzige oplossing:

Cascading Stylesheet:

div.smallline {margin-top: 4px; margin-bottom: 4px;
   height: 1px; border-bottom: solid 1px rgb(76,76,76)}

en dan...

HTML:

<div class="smallline"><div></div></div>

Als ik die binnenste <div> weghaal, dan krijg ik opeens een margin-top van maarliefst een hele regel!

En met 0px margin werkt dit uiteraard ook, omdat hiermee geen HR gebruikt wordt...

/edit
Rickets, dat is idd nog een goed idee, alleen zullen oudere browsers er wel weer de grootste problemen mee krijgen (maarja, met mijn oplossing ook )

[ Voor 17% gewijzigd door _Thanatos_ op 26-03-2004 15:20 ]

[pagani]

Rickets schreef op 26 maart 2004 @ 15:16:
Eigenlijk wel, want het gaat hier om de CSS-property

Schaam

[CH4OS]

Wel leuk trouwens, dat je HR wil opmaken, aangezien bij HTML4.01 het presentational gebeuren, deprecated is...

En ik kwam er ook al achter... Dat IE dat zo doet, mijn workaround: doctype weghalen

Toen ik later verder ging, kon ik gewoon de doctype er weer inzetten, dus had ik eerst wat fout

[creative8500]

_Thanatos_:

Cascading Stylesheet:

hr {margin: 0px}

Nou, simpeler kan haast niet

"Haast" niet, nee. Maar: die 'px' mag je achterwege laten.

[Vampier]

creative8500 schreef op 27 maart 2004 @ 10:28:
[...]

"Haast" niet, nee. Maar: die 'px' mag je achterwege laten.

liever niet eigenlijk

[Verwijderd]

Liever wel. Scheelt twee bytes.

Heb je het ook al geprobeerd in combinatie met 'display:block;' ('padding' op 0 zetten zal ook wel niet helpen, wel?)?

[_Thanatos_]

die "px" had idd weggemogen. 0%, 0em, 0px, 0ex, 0pt. Het is toch allemaal hetzelfde

enne, display:block is toch standaard voor een HR? Die padding had ik idd geprobeerd, en dat gaat in Mozilla en Opera natuurlijk gigantisch fout, omdat zij de padding wel correct renderen.

Maargoed, het was dus al "opgelost" met die divjes...

[Verwijderd]

Nee dat is helemaal niet standaard (gedraagt zich ongeveer als BR).

[creative8500]

_Thanatos_: Maargoed, het was dus al "opgelost" met die divjes...

Je zegt het zelf al: dit is geen oplossing.