[CSS] HR Plaatje met ongewenste randen in IE

[pderaaij]

Ha Tweakers,

Ik ben bezig om een website compatible te maken met de diverse gebruikte browsers en loop daar tegen een aantal probleempjes op. Nu krijg ik de meeste wel opgelost, alleen dit probleem lukt me niet en ik kan er niet zoveel over vinden.

Wat is nu het probleem. Als je met IE op deze pagina kijkt. Zie je dat de blauwe streep een extra (ongewenst) kader bevat. Dit heb ik niet in FireFox.

Iemand enig idee hoe ik dat op kan lossen?

De CSS is alsvolgt

code:

hr
{
    background: #fff url(images/lineBreakLong.png) no-repeat bottom right;
    width: 425px;
    height: 12px;
    border: 0;
    margin-left: -5px;
    margin-bottom: -5px;
    line-height: 0;
}

[BtM909]

Volgens mij kan je hier je info wel vandaan halen: <hr> tag met css?

[pderaaij]

pfff... wie heeft IE ooit gereleased zonder de CSS regels toe te passen...

Ik ga een workaround maken met een div en het zo maar oplossen.

[Verwijderd]

Dit werkt voor mijn site (zowel onder IE als onder Firefox, Opera en Safari):

Cascading Stylesheet:

hr {
    height: 1px;
    border-color: #999999;
    color: #999999;
    background-color: #999998;
    border: 0px;
}

offtopic:
psst check je site ook even op SQL injections: dit lijkt mij toch niet echt de bedoeling. Bij mij valt trouwens het logo achter het menu (Firefox 2.0.0.6).

[pderaaij]

Het voorkomen van SQL injections was mijn volgende stap, in ieder geval dank voor het waarschuwen.

Maar jou code werkt niet met een achtergrond plaatje zoals ik het gebruikt lijkt mij? In ieder geval heb ik het nu met een div gedaan. Werkt ook prima, maar is helaas niet helemaal semantisch correct...