Stefan W.: Internet Explorer 6 ignoriert eine "height:"-Angabe

Liebe Forennutzer,

nachdem ich Jahrelang in diesem Forum mitgelesen habe um HTML-Probleme zu lösen, habe ich mich jetzt entschieden selber mal etwas zu posten.

Ich habe folgendes Problem:
Ich habe ein Thema mit vielen Runden Elementen erstellt.
Für jeden Runden Rahmen habe ich 4 <div>-Elemente in diesen gepackt, welche jeweils eine Ecke des Containers mit einer Hintergrund-Grafik abrunden.

Das sieht dann so aus.

  
<div class="rounded-input">  
  <div class="left-top corner"></div>  
  <div class="right-top corner"></div>  
  <div class="right-bottom corner"></div>  
  <div class="left-bottom corner"></div>  
  <input class="input" type="text" />  
</div>

Allerdings will der IE 6 mal wieder nicht :-(

Bei einer Box (die um das <input>-Element) scheint der IE die Höhenangabe im CSS zu ignorieren. Das führt dann zu einem Layoutfehler. Seht selbst (im IE6):
http://freepaid.ath.cx/theme/

Zeile 91 im CSS:
http://freepaid.ath.cx/theme/style.css

  
.rounded-input .corner {  
  position: absolute;  
  width: 8px; height: 8px;  
  background-image: url('rc_input.png');  
}  

Ich kann die "height: 8px" verändern wie ich will und es sieht immer gleich aus.

Im Firefox, Google Chrome und Opera wird es korrekt angezeigt.
Für alle die keinen IE haben hier ein Bild vom Fehler:
http://freepaid.ath.cx/theme/fehler.jpg

Ich hoffe Ihr könnt mir bei meinem Problem helfen,

vielen Dank im Vorraus

grüße Stefan

  1. Yerf!

    Ich hoffe Ihr könnt mir bei meinem Problem helfen,

    Hm, die Elemente scheinen zwar komplett leer zu sein (also auch ohne Whitespace) aber evtl. schlägt da trotzdem der alte IE-Bug mit der Anwendung von Höhenangaben zu... Der IE vergrößert Boxen automatisch, wenn der Inhalt nicht reinpsst. 8px dürfte kleriner sein als die Line-Height und somit zu klein für eine Zeile Text, weswegen der IE vermutlich die Box auf diese Größe vergrößert.

    Setz mal entweder die Line-Height für die Box kleiner oder Overflow auf Hidden.

    Gruß,

    Harlequin

    --
    <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
    1. Darauf bin ich garnicht gekommen kopf->wand

      Hm, die Elemente scheinen zwar komplett leer zu sein (also auch ohne Whitespace) aber evtl. schlägt da trotzdem der alte IE-Bug mit der Anwendung von Höhenangaben zu.

      Funktioniert einwandfrei!

      Setz mal entweder die Line-Height für die Box kleiner oder Overflow auf Hidden.

      Danke für deine Hilfe!

      grüße Stefan