Trennlinie HR mit Hintergrund-Bild

Kürzlich wollte ich eine schön gepunktete Trennlinie auf der Website per CSS erstellen. Wie wir wissen werden allerdings die Standard Formatierung per CSS im Internet Explorer 6.x (IE6) falsch dargestellt. Der Browser intepretiert dotted als dashed und so erscheint die Linie dann gestrichelt anstatt gepunktet, was aboslut nicht ins Design passt. So überlegte ich mir die Linie so zu formatieren, dass die gepunktete Grafik einfach ein Hintergrundbild ist.

Auf dem Internet gibt es einige Informationen dazu, allerdings gibt es Lösungen die gar nicht funktionieren oder einfach nicht für ein gefloatetes Design gemacht sind.


Hier einige Beispiele die in meinem Fall NICHT funktionierten:

• HR mit Hintergrundbild mittels absoluter Positionierung und CROP (rect) Funktion
  Leider funktioniert dieser Ansatz nicht korrekt in einem gefloateten Design...
  
  
• HR Border im IE mit ZOOM Funktion austricksen
  Interessanter Ansatz der bei mir leider nicht 100%ig funktionierte...
  

So blieb mir nichts anderes übrig als die Lösung von Marek Sovavsiti mittels einem zusätzlichen DIV Element über die Trennline (HR) zu erstellen, was wie folgt aussieht:

HTML:

<div class="hr"><hr /></div>


CSS:

div.hr {
height: 15px;
background: #fff url(../images/hr.gif) repeat-x scroll center;
}
div#teaser div.hr hr {
display: none;
}