Listen-Menü dem oberen Bild anpassen -> IE-Problem

[Conny]

Hallo ihr,

zwei <div> (bzw. drei, aber die Dritte interessiert momentan nicht), wobei in der ersten lediglich ein Bild liegt mit den CSS-Angaben
#oben {
 width:100%;
 margin-top:30px;
 background-image:url(bilder/linie.jpg);
 background-repeat:repeat-x;
 height:56px;
}

Die zweite Ebene enthält eine Liste mit den Menüpunkten. Die ist so weit auch ok, aber: Sie soll sich der Breite des Bildes (134px) in der oberen Ebene anpassen. Mozilla, Firefox, Opera machen's, der IE nicht. Sein Problem: erstens stimmt links die Kante um ein Pixel nicht und zweitens ist er zu breit.

Vielleicht kann mir ja jemand sagen, was in den CSS-Angaben fehlt bzw. geändert werden müsste. Hier ist der Code:

#menue {
 float:left;
 width:132px;
 margin-left:2px;
}

#rechts {
 margin-left:132px;
 padding-left:30px;
}

#menue ul {
 list-style:none;
 margin:0px;
 padding:0px;
 background-color:#900;
}

#menue li {
 margin-bottom:1px;
 border-bottom:2px solid #333;
 border-top:1px solid #ccc;
 border-left:1px solid #333;
 border-right:1px solid #333;
}

#menue li a {
 color:#fc0;
 text-decoration:none;
 display:block;
 width:132px;
 padding: 7px 10px;
 font:bold 10pt Arial, Helvetica, sans-serif;
}

Gruß,
Conny

[Thomas J.S.]

Hallo Cony,

zwei <div> (bzw. drei, aber die Dritte interessiert momentan nicht), wobei in der ersten lediglich ein Bild liegt mit den CSS-Angaben

Arbeitest du im Quirksmode oder im "sandard-compilant"-mode? (DOCTYPE?)

#oben {
width:100%;
margin-top:30px;
background-image:url(bilder/linie.jpg);
background-repeat:repeat-x;
height:56px;
}

Die zweite Ebene enthält eine Liste mit den Menüpunkten. Die ist so weit auch ok, aber: Sie soll sich der Breite des Bildes (134px) in der oberen Ebene anpassen.

Sorry, das verstehe ich nicht. Dein 1. div ist 100% breit und nicht 134px. (Es sei denn das Elterelement von deinem 1. div ist 134px breit)

Mozilla, Firefox, Opera machen's, der IE nicht. Sein Problem: erstens stimmt links die Kante um ein Pixel nicht und zweitens ist er zu breit.

Vielleicht kann mir ja jemand sagen, was in den CSS-Angaben fehlt bzw. geändert werden müsste. Hier ist der Code:

#menue {
float:left;
width:132px;
margin-left:2px;
}

#rechts {
margin-left:132px;
padding-left:30px;
}

Falls du eine entsprechende DOCTYPE Angabe verwendest:
  margin-left:    2px

• width:        132px
  ----------------------
   gesamtbreite:  134px

• #rechts       132px
  ----------------------
  differenz         2px

#menue li a {
color:#fc0;
text-decoration:none;
display:block;
width:132px;
padding: 7px 10px;
font:bold 10pt Arial, Helvetica, sans-serif;
}

width:       132px
 +padding-left: 10px
 +padding-right:10px
---------------------
 breite von a: 152px
-menü:         134px
---------------------
differenz:      18px

Grüße
Thomas