Chris Ross: <hr /> lässt sich im IE 7 nicht ausrichten

Hallo Forum,

ich habe folgenden Quelltext:

  
...  
             <tr>  
              <td class="td_linie_l">&nbsp;<hr /></td>  
              <td class="td_linie_r">&nbsp;<hr /></td>  
             </tr>  
...  

das dazugehörige CSS sieht so aus:

  
...  
td.td_linie_l hr          { border:solid 1px #DEDEDE; height:1px; width:370px; position:relative; top:0px; left:0px; }  
td.td_linie_r hr          { border:solid 1px #5D5D5D; height:1px; width:170px; position:relative; top:0px; left:10px; }  
* html td.td_ueb1a hr     { border:solid 1px #5D5D5D; height:1px; width:170px; text-align:center; }  
* html td.td_linie_r hr   { border:solid 1px #5D5D5D; height:1px; width:170px; text-align:center; }  
...  

Damit formatiere ich die horizontalen Ternnlienen in den Tabellenzellen und richte sie mittig aus. Im FF2, IE6 und Opera klappt das wunderbar. Nur der IE7 ignoriert die Ausrichtung komplett.

Habe schon versucht das hr in ein div zu packen und dieses dann auszurichten - ohne Erfolg :((

Hat jemand nen Tipp für mich in Bezug auf IE7 und die Positionierung von horizontalen Linien?

Für die, die sich das mal ansehen möchten: http://www.mein-letmathe.de/index.php?id=458&no_cache=1
es geht um die Trennlinien zwischen den Bilder "Zur Homepage"

Wäre sehr dankbar für entsprechende Hinweise.

MfG
Chris

  1. Hallo Chris,

    ...
    td.td_linie_l hr          { border:solid 1px #DEDEDE; height:1px; width:370px; position:relative; top:0px; left:0px; }
    td.td_linie_r hr          { border:solid 1px #5D5D5D; height:1px; width:170px; position:relative; top:0px; left:10px; }

    • html td.td_ueb1a hr     { border:solid 1px #5D5D5D; height:1px; width:170px; text-align:center; }
    • html td.td_linie_r hr   { border:solid 1px #5D5D5D; height:1px; width:170px; text-align:center; }
      ...
    
    > Damit formatiere ich die horizontalen Ternnlienen in den Tabellenzellen und richte sie mittig aus. Im FF2, IE6 und Opera klappt das wunderbar. Nur der IE7 ignoriert die Ausrichtung komplett.  
      
    das wundert mich - <hr> kann man als Blockelement so doch eigentlich nicht ausrichten. AFAIK verhält es sich dabei ähnlich wie mit anderen Blockelementen: Für richtige Browser (FF, Opera, IE7) müsste sowas wie  
      
    [¢ode lang=css]td.td\_line1 hr { width: 170px; margin-left: auto; margin-right: auto; } /\* unwichtige Sachen weggelassen \*/[/code]  
      
    reichen, damit es im IE6 funktioniert, würde man mit folgender Alternative (die es auch in richtigen Browsern tud) arbeiten:  
      
    ~~~css
    td.td_line1 { text-align: center; }  
    td.td_line1 hr { width: 170px; }
    

    ich denke das deckt sich ungefähr mit dem, was du gemacht zu haben behauptest:

    Habe schon versucht das hr in ein div zu packen und dieses dann auszurichten - ohne Erfolg :((

    Nun ja, probier also mal meine zwei einfachen Vorschläge aus.

    Grüße,

    Sven

    1. Hi Sven,

      das wundert mich - <hr> kann man als Blockelement so doch eigentlich nicht ausrichten. AFAIK verhält es sich dabei ähnlich wie mit anderen Blockelementen: Für richtige Browser (FF, Opera, IE7) müsste sowas wie

      td.td_line1 hr { width: 170px; margin-left: auto; margin-right: auto; } /* unwichtige Sachen weggelassen */

      ne, geht im IE7 auch nicht :((

      reichen, damit es im IE6 funktioniert, würde man mit folgender Alternative (die es auch in richtigen Browsern tud) arbeiten:

      im IE6 funktioniert es ja - IE7 zickt rum. :)

      Danke Dir für Deine Anregungen!

      MfG Chris

  2. Hoi,

    vielleicht hilft dir diesden http://inix.blogiem.lv/2008/01/02/10813.html - 1px line

    LG,
    Inita

    --
    Don't forget to love yourself.
    1. vielleicht hilft dir diesden http://inix.blogiem.lv/2008/01/02/10813.html - 1px line

      Hi,

      es geht um die Ausrichtung und nicht um die Line selbst.

      Trotzdem danke!

      MfG Chris