IE: Im IE wird width in 2. DIV nicht beachtet

[Detlef G.]

Hallo Marius

ich habe mir eine schöne Statusleste gebastelt, jedoch wird diese nur im Firefox richtig angezeigt.

Meinst du wirklich _nur_ im Firefox oder eher nicht im IE?

Woran liegt das?

Lies dazu bei width (Breite) unter "Beachten Sie:" welches Problem der IE bis zur Version 6 und im Quirksmodus mit Angaben zur Breite hat.

Zur Lösung des Problems, entweder .balken_pro absolut positionieren, damit er keinen Einfluss mehr auf das umgebende Element hat, oder (würde ich besser finden) die verschachtelten Elemente ganz weglassen und stattdessen eine passend positionierte Hintegrundgrafik verwenden.

1. Lösung
CSS:

.balken_bg {  
  ...  
  position:relative;  
  overflow:hidden;  
}  
.balken_pro {  
  ...  
  position:absolute;  
  top:0;  
  left:0;  
  width:100%;  
  height:100%;  
}  

HTML:

<div class='balken_bg'><div class='balken_pro'>20%</div><div class='balken_gr' style='width:20px;'></div></div>  

2. Lösung
CSS:

.balken {  
  background:#DFDFDF url(status.png) 20px 0;  
  border:1px solid;  
  width:100px;  
  height:15px;  
  padding:0;  
  font-size:12px;  
  text-align:center;  
}  

HTML:

<div class='balken'>20%</div>  

AufWiederlesen
Detlef