✔ Problem mit width: auto im IE

Status
Nicht offen für weitere Antworten.
K

kjus

Grünschnabel
Hallo,

ich bin dabei ein dynamisches horizontales Menü zu erstellen. Sprich die einzelnen div-Container weisen eine unterschiedliche Breiten auf. Also war mein Gedanke "width:auto".
Funktioniert im Firefox wunderbar, im IE leider nicht überhaupt nicht. Stattdessen wird es auf die volle Breite gezogen (100%).

Hab das Internet schon durchsucht aber irgendwie nichts gescheites gefunden. Es muss doch da irgendein Workaround geben oder habe ich ein Atribut vergessen ?
Hoffe es kann mir jemand nen schubser in die richtige Richtung geben.

gruß
 
Hallo,

danke erstmal für die schnelle Antwort. Ich habe die divs mit float:left nebeneinander gestellt.

Mit display:inline oder float:left besitzen die Elemente auch im IE eine automatische Breite, und das ganz ohne width:auto.
Zum Vergrößern anklicken....
Wenn ich dich richtig verstehe gebe ich also mit float:left gleichzeitig eine automatische Breite mit. Oder meinst du das auch ohne width:auto die Breite eh automatisch sprich inhaltsbezogen dargestellt wird ?

Die CSS-Play-Seite habe ich auch schon gefunden, während meiner Internet/Forum-recherche. Hab mir den Code nun schon mehrmals angeschaut. Aber irgendwie versteh ich nicht, wie in dem Beispiel die Breite gesetzt wurde, so das sie variabel ist. Oder ist sie schlichtweg garnicht gesetzt, da sie ja letztendlich eh automatisch gesetzt wird.
Was mich dann natürlich zu der Frage treibt, warum Firefox das richtig darstellt und IE eben nicht.

Deswegen pack ich mal meinen Code hier rein, evtl entdeckt ihr ja eine Ungereimtheit die ich nicht sehe. Lasst euch nicht von den 'style'-Anweisungen verwirren. Die Klasse kommt von microsoft (Handelt sich um ein Sharepoint-Projekt, bevor ihr fragt/ wen es interessiert) und ich versuche diese nur zu erweitern und bin logischerweise noch in der testphase- von daher nicht der schönste code.
Code: 
<html>
  <body>
<style type="text/css">
.ms-topnav 
{
border-top-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-top-color: #c2dcff;
border-right-color: #c2dcff;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #ffffff;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: -moz-use-text-color;
background-image: url(/_layouts/images/topnavunselected.gif);
background-repeat: repeat-x;
font-family: Tahoma;
font-size: 8pt;
background-color: #e2efff;
color: #3764a0;
}

</style>
    <div id="mis.nav_link_main" class="ms-banner">
      <div class="ms-topnav" style="border:1px solid #83B0EC;float:left; width:8%;">
        <div class="ms-topnav" style="width:100%;" id="Ueberschrift1_ueber">
          <center ><a href="#" onclick="javascript:menue('Ueberschrift2'); return false; "onblur="javascript:menueaus('Ueberschrift2');return false; "onmouseout="javascript:normal('Ueberschrift2_ueber'); ">Ueberschrift1</a></center>
        </div>
        <div style="background-color:#D6E8FF;position:absolute;z-index:500; display:none;" id="Ueberschrift1">
       <a href="#" onmousedown="{javascript:seiteLaden('http://dev/sites/Ticketstatistik.aspx');}">Ticketstatistik</a>
      </div>
      </div>
      <div class="ms-topnav" style="border:1px solid #83B0EC; float:left; width:auto;">
        <div class="ms-topnav" style="width:100%;" id="Ueberschrift2_ueber">
          <center onmouseover="{javascript:bunt('Ueberschrift2_ueber');}" onmouseout="{javascript:normal('Ueberschrift2_ueber');}"><a href="#" onclick="{javascript:menue('Ueberschrift2');return false;}" onblur="{                  javascript:menueaus('Ueberschrift2');return false;}                " onmouseout="{javascript:normal('Ueberschrift2_ueber');}">Ueberschrift2</a></center>
        </div>
        <div style="background-color:#D6E8FF;position:absolute;z-index:500; display:none;" id="Ueberschrift2">
       <a href="#" onmousedown="{javascript:seiteLaden('http://dev/sites/abc/menue.aspx');}">Menue</a>
       <a href="#" onmousedown="{javascript:seiteLaden('http://dev/sites/navigation.aspx');}">Navigation</a>
       <a href="#" onmousedown="{javascript:seiteLaden('http://dev/sites/wissensdatenbank.aspx');}">Wissensdatenbank</a>
      </div>
      </div>
    </div>
  </body>
</html>

gruß
 
Hi,

dann schau mal, was du hier deklariert hast:

Code: 
<div class="ms-topnav" style="border:1px solid #83B0EC; float:left; width:auto;">
        <div class="ms-topnav" style="width:100%;" id="Ueberschrift2_ueber">
 
hab ich auch schon dran gedacht is es aber leider nicht, da ändert sich garnichts.

Sollte evtl noch erwähnen, das auf meinen Testsystem IE 6 läuft.

hab nochmal beispielbilder angehängt, wie es im firefox und im ie aussieht, falls es jemand nicht verstanden hat.

gruß
 

Anhänge

  • menu_ff.jpg
    menu_ff.jpg
    2,5 KB · Aufrufe: 180
  • menu_ie.jpg
    menu_ie.jpg
    4,5 KB · Aufrufe: 188
Das kann ich nicht bestätigen, wenn ich die angesprochene width:100%-Deklaration entferne:

demo_kjus.jpg
(IE6 / WinXP)
 
Hallo,
also wenn ich das auf dem Desktop meiner Testumgebung mache, dann funktionert es auch, wenn ich es in die Seite einbinde dann nicht wie ich am Freitag noch etwas irritiert habe. Also muss das Problem woanders liegen.

Auf jeden Fall erstmal Danke für die Hilfe.

Gruß
 
HalliHallo!

Kämpfe grade mit dem gleichen Problem.

Auszug aus dem CSS-File:
#mainlevel-nav {
margin: 0; padding:0;

}
#mainlevel-nav li {
padding:0;
background-image: none;
height:50px;
width:auto;
text-align:center;
overflow:hidden;
list-style:none;
float:left;
margin: 0;
font-size: 14px;
line-height:50px;
}

#mainlevel-nav a {
padding-left:15px;
padding-right:15px;
display: block;
text-decoration: none;
font-weight:normal;
color: white;
}

#mainlevel-nav a:hover, #active_menu {
background:#eeeeee url(../images/balkenhover.png);
color:black
}

Wenn ich bei width eine fixe Größe eingebe, wird das Menü (auch im IE) richtig (horizontal) dargestellt. Wenn ich auto drinnen habe, passt's nicht.
Die Breite soll aber variabel sein, je nachdem wie lange der jeweilige Menüpunkt ist.

Hat jemand einen Tipp?!

glg Sandra
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück