DIV-Tag width im IE nicht 100% sondern lässt Freiraum

[Judith Merges]

Hallo,

ich gestalte ein Seitenmenü und möchte, dass alle Menüeinträge genauso breit sind, wie das Elternelement. Ich habe versucht, das mit der Einstellung width=100%. Im Firefox funktioniert das tadellos, im Internet Explorer bleiben rechts Lücken.

Im folgenden Beispiel, nutzt der erste Menüeintrag im IE nicht die gesamte Breite, sondern lässt rechts einen schwarzen Leerraum, im Firefox funktionierts.

<div style="margin:15px; background-color:#000000; text-align:left; font-size: 90%; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; color:#000000; white-space:nowrap">

<!-- Menü-Eintrag 1 -->
<div style="padding:0px; margin:0px; background-color:#ff0000; height:20px; width:100%;">Level 2 Item 1.1</div>

<!--Menü-Eintrag 2 -->
<div style="margin:0px; padding:0px; background-color:#00ff00; height:20px; width:100%;">Level 3 Item 1.1.1.1.1.1</div>

</div>

Ist das ein Problem mit dem IE oder sehe in den Wald vor lauter Bäumen nicht?

Grüße
Judith

[Gunnar Bittersmann]

Hi Judith,

Im folgenden Beispiel, nutzt der erste Menüeintrag im IE nicht die gesamte Breite, sondern lässt rechts einen schwarzen Leerraum, im Firefox funktionierts.

Kann ich im IE 5.0 nicht nachvollziehen.

Du sprachst von Menüeinträgen, da hört sich doch verdammt nach Liste an. Also warum diese div-Suppe?

<div>  
  <div></div>  
  <div></div>  
</div>

Schreib dafür doch

<ul>  
  <li></li>  
  <li></li>  
</ul>

Gruß,
Gunnar

[Judith Merges]

Hallo Gunnar,

Kann ich im IE 5.0 nicht nachvollziehen.

Ich benutze den IE 6.0 und den Firefox 1.0 und habe mal einen Screen-Shot gemacht und als Grafik-URL angegeben. Vielleicht liegt es daran, dass die div-Tags sich bei mir innerhalb einer Tabelle befinden. Wenn ich eine Lösung finde, werde ich sie posten.

Du sprachst von Menüeinträgen, da hört sich doch verdammt nach Liste an. Also warum diese div-Suppe?

<div>

<div></div>
  <div></div>
</div>

>   
> Schreib dafür doch  
> ~~~html

<ul>  

>   <li></li>  
>   <li></li>  
> </ul>

Ich möchte das ganze in ein CMS (typo3) einbetten und die User sollen alles selber einstellen können, verschiedene Bullet-Bildchen für verschiedene Ebenen und so weiter. Bisher habe ich das mit verschachtelten Tabellen gelöst und ich dachte ich steige jetzt mal auf div's um. Das scheint allerdings nicht so einfach wie ich dachte. *seufz*
Trotzdem vielen Dank für den Tipp
Grüße
Judith

[Gunnar Bittersmann]

Hi Judith,

Bisher habe ich das mit verschachtelten Tabellen gelöst und ich dachte ich steige jetzt mal auf div's um. Das scheint allerdings nicht so einfach wie ich dachte.

Der Umstieg auf Listen wär auch nicht schwerer. Aber besser.
Gruß,
Gunnar

[MudGuard]

Hi,

Ich möchte das ganze in ein CMS (typo3) einbetten und die User sollen alles selber einstellen können, verschiedene Bullet-Bildchen für verschiedene Ebenen und so weiter. Bisher habe ich das mit verschachtelten Tabellen gelöst und ich dachte ich steige jetzt mal auf div's um. Das scheint allerdings nicht so einfach wie ich dachte. *seufz*

Der blaß-orange Bereich ist zu schmal.

Der IE geht - so wie's aussieht - wie folgt vor:

Der blaß-orange Bereich hat eine bestimmte Breite - diese wird erstmal genommen.

Jetzt wird die Breite des schwarzen Bereichs in diese Breite eingepaßt.

Dann wird die Breite des roten Bereichs in den schwarzen Bereich eingepaßt.

Dann wird die Breite des grünen Bereichs in den schwarzen Bereich eingepaßt - das klappt aber nicht, dieser ist zu breit. Dank des vom schwarzen div geerbten white-space:nowrap darf auch nicht umgebrochen werden.
Da IE auch statt overflow:visible korrekt umzusetzen lieber die Größe des Bereichs an den Inhalt anpaßt, wird das grüne Element verbreitert.

Da IE auch statt overflow:visible korrekt umzusetzen lieber die Größe des Bereichs an den Inhalt anpaßt, wird demzufolge auch das schwarze Element verbreitert.

Da IE auch statt overflow:visible korrekt umzusetzen lieber die Größe des Bereichs an den Inhalt anpaßt, wird demzufolge auch das blaß-orange Element verbreitert.

Eine Neuberechnung der Breite der Nachfahrenelemente findet dabei wohl nicht statt ==> das rote Element wird nicht auf die Breite des grünen Elements gezogen - denn das paßt ja in die vorgegebene Breite.
Dadurch kommt hier das hintere schwarze Element zum Vorschein.

cu,
Andreas