[css] IE "verschluckt" background bei Block-Element

[natsuki]

hi,

Ich hab ein Problem mit der Darstellung meines Menüs im Internet Explorer.

Ich habe ein Menü mit einem Untermenü. Menü und Untermenü haben unterschiedliche Hintergründe. Jeweils der 1. Menüpunkt des Menüs oder Untermenüs wird im IE ohne Hintergrund dargestellt. (siehe Fotos / IE und FF zum Vergleich)

Hier der Code:

.left-menue a:link, .left-menue a:visited {
display:block;
color:#f1f1f1;
font-weight: bold;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:10px;
background:url(menue.jpg);
background-repeat:repeat;
text-decoration:none;
margin-bottom:1px;
}

.left-menue a:hover, .left-menue a:active {
display:block;
color:#b00000;
font-weight: bold;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:10px;
background:#ECEBEB;
text-decoration:none;
margin-bottom:1px;
}

.left-umenue a:link, .left-umenue a:visited {
display:block;
color:#f1f1f1;
font-weight: bold;
padding-top:3px;
padding-bottom:3px;
padding-left:20px;
padding-right:10px;
background:url(bg.jpg);
background-repeat:repeat;
text-decoration:none;
margin-bottom:1px;
}

.left-umenue a:hover, .left-umenue a:active {
display:block;
color:#b00000;
font-weight: bold;
padding-top:3px;
padding-bottom:3px;
padding-left:20px;
padding-right:10px;
background:#ECEBEB;
text-decoration:none;
margin-bottom:1px;
}

Ich hoffe es kann mir jemand helfen.

mfg natsuki

 

[stk]

Moin,

nicht sehr verbose - hast mal einen Link zur Seite oder den kompletten Code?

Gruß Stefan

 

[natsuki]

Hier mal der _Link_

Und hier der komplette CSS-Code. Brauchst du auch den Code von der index Seite?

Die Linke Navigation befindet sich im Layer .side

.body {
font-family: verdana;
font-size: 10pt;
/*background-color: #cdcdcd;*/
background: url(bg.jpg);
background-repeat:repeat;
}

.bg {
position: relative;
width: 900px;
padding:20px;
left:50%;
margin-left:-470px;
background-color:#FFFFFF;
}

.header {
position: relative;
width: 900px;
height: 122px;
margin-top:10px;
margin-bottom:10px;
background: url(header.jpg);
}

.navi {
font-size: 10pt;
font-weight: bold;
color: #f1f1f1;
position: relative;
width: 900px;
/*height: 10px;*/
padding-top: 5px;
padding-bottom: 5px;
/*background-color: #B00000;*/
background: url(menue.jpg);
background-repeat:repeat-x;
}

.navi a:link, .navi a:visited {
color: #f1f1f1;
text-decoration: none;
display: inline;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}

.navi a:hover, .navi a:active {
color: #b00000;
text-decoration: none;
display: inline;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #ECEBEB;
}

.umenuebg {
font-size: 8pt;
color: #b00000;
position: relative;
width: 900px;
height: 22px;
background-color: #ECEBEB;
}

.umenuebg a:link, .umenuebg a:visited {
color: #b00000;
text-decoration: none;
}

.umenuebg a:hover, .umenuebg a:active {
color: #b00000;
text-decoration: underline;
}

.umenue {
font-size: 8pt;
font-weight: bold;
color: #b00000;
position: absolute;
width: 880px;
/*height: 5px;*/
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}

.umenue a:link, .umenue a:visited {
color: #b00000;
text-decoration: none;
}

.umenue a:hover, .umenue a:active {
color: #b00000;
text-decoration: underline;
}

.side {
font-size: 10pt;
color: #000000;
position: relative;
float:left;
left:50%;
margin-left:-450px;
width: 200px;
height: 500px;
padding-left: 10px;
padding-right: 10px;
background-color: #ffffff;
border-right: 1px solid #b00000;
}

.left-menue a:link, .left-menue a:visited {
display:block;
color:#f1f1f1;
font-weight: bold;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:10px;
background:url(menue.jpg);
background-repeat:repeat;
text-decoration:none;
margin-bottom:1px;
}

.left-menue a:hover, .left-menue a:active {
display:block;
color:#b00000;
font-weight: bold;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:10px;
background:#ECEBEB;
text-decoration:none;
margin-bottom:1px;
}

.left-umenue a:link, .left-umenue a:visited {
display:block;
color:#f1f1f1;
font-weight: bold;
padding-top:3px;
padding-bottom:3px;
padding-left:20px;
padding-right:10px;
background:url(bg.jpg);
background-repeat:repeat;
text-decoration:none;
margin-bottom:1px;
}

.left-umenue a:hover, .left-umenue a:active {
display:block;
color:#b00000;
font-weight: bold;
padding-top:3px;
padding-bottom:3px;
padding-left:20px;
padding-right:10px;
background:#ECEBEB;
text-decoration:none;
margin-bottom:1px;
}

.main {
color: #000000;
position: relative;
overflow:auto;
width: 670px;
height: 500px;
margin-left:230px;
background-color:#ffffff;
}

.content {
color: #000000;
position: relative;
width: 625px;
padding: 10px;
background-color: #ECEBEB;
border: 1px dotted #b00000;
}

.bottom {
color: #b00000;
font-size: 9px;
position: relative;
width: 900px;
margin-top:10px;
background-color: #dedede;
}

.bottom a:link, .bottom a:visited {
color: #b00000;
text-decoration: none;
}

.bottom a:hover, .bottom a:active {
color: #b00000;
text-decoration: underline;

 

[stk]

Moin,

paßt schon - danke. So ähnlich dachte ich's mir schon

bau mal das HTML etwas um:

<ul id="toplevel">
  <li><a href="#">Eintrag 1.</a></li> 
  <li><a href="#">Eintrag 2.</a></li>
  <li><a href="#">Eintrag 3.</a>
   <ul class="subebene">
     <li><a href="#">Eintrag 3.1</a></li>
     <li><a href="#">Eintrag 3.2</a></li>
     …
   </ul>
  </li>
  <li><a href="#">Eintrag 4.</a>
   …
</ul>

gleiches kannst Du nebenbei bemerkt auch für die obere Navigation machen und über das :hover-Pseudo-Element auch gleich noch das JS einsparen.

Mit dem Konstrukt hast dann a) ein semantisch korrektes HTML und b) eine solide Grundlage um die Formartierung zielsicher zwischen ul.toplevel und ul.sublevel (und den nachfolgenden davon abhängenden li und a) unterzubringen. Im Extrem lassen sich damit sogar Flyout-, bzw. Dropdown-Menüs aufbauen. Für's Konzept siehe auch: http://www.designmeme.com/articles/csspulldownmenu/; praktische Umsetzung z.B. unter: http://www.elsbett.com/de/

Gruß Stefan

 

[natsuki]

hi,

sry ich glaub ich habs nicht ganz verstanden.

Das behebt glaube ich nicht das Problem, dass der Internet Explorer den background jeweils beim 1. Link mit "neuem" Hintergrundbild nicht anzeigt. (siehe Bilder oben)
Also ich versuchs noch mal zu erklären.

also der 1. Link sollte auch den roten Hintergrund haben. Wenn ich zB über dem jetzigen 1. Link einen neuen Link einfüge, wird der neue Link ohne background angezeigt und der Link der zuvor an 1. Stelle stand hat den roten Hintergrund.
Und das ist bei jedem 1. Link, wenn der Hintergrund ein anderer ist.

Ändert der Code von dir nicht hauptsächlich die Auflistung?
Ich hab diese Methode noch nie verwendet, also kann ich mich auch irren.

Ich glaube das Problem liegt irgendwo im CSS.
Wenn ich zB display:block; rausnehme, hab ich den background überall, aber dann hab ich natürlich nicht den Effekt, des Block-Elements.

PS: in allen anderen Browsern, die ich probiert habe funktioniert es. IE ist die einzige Ausnahme

mfg natsuki

 

[Hilarious]

hi,

sry ich glaub ich habs nicht ganz verstanden.

Das behebt glaube ich nicht das Problem, dass der Internet Explorer den background jeweils beim 1. Link mit "neuem" Hintergrundbild nicht anzeigt. (siehe Bilder oben)
Also ich versuchs noch mal zu erklären.

also der 1. Link sollte auch den roten Hintergrund haben. Wenn ich zB über dem jetzigen 1. Link einen neuen Link einfüge, wird der neue Link ohne background angezeigt und der Link der zuvor an 1. Stelle stand hat den roten Hintergrund.
Und das ist bei jedem 1. Link, wenn der Hintergrund ein anderer ist.

Ändert der Code von dir nicht hauptsächlich die Auflistung?
Ich hab diese Methode noch nie verwendet, also kann ich mich auch irren.

Ich glaube das Problem liegt irgendwo im CSS.
Wenn ich zB display:block; rausnehme, hab ich den background überall, aber dann hab ich natürlich nicht den Effekt, des Block-Elements.

PS: in allen anderen Browsern, die ich probiert habe funktioniert es. IE ist die einzige Ausnahme

mfg natsuki

Der Hinweis von stk ist zwar richtig und könnte dir eventuell schon helfen, aber wenn man die Semantik einmal beiseite lässt, sollte es ja, wie Du schon richtigerweise bemängelst, auch im MSIE funktionieren.

Leider hat dieses Stück Software einige Fehler, unter anderem ist es dem MSIE in bestimmten Zusammenhängen unmöglich die Höhe eines Block-Tags (wie zum Beispiel eines DIVs) richtig zu berechnen, um dann zum Beispiel das Hintergrundbild korrekt zu positionieren.

Abhilfe (ich hab's bei mir lokal ausprobiert, es sollte Dir also schnell gelingen) ist, dem DIV-Tag eine »konkrete« Höhenangabe zu geben. Hier sollte es ausreichen, der Selektion .left-menu a:link eine Höhe zuzuweisen. Dies kann natürlich auch eine relative Höhenangabe sein, also nicht nur height: 20px; sondern auch height: 1em;. Die genaue Bemessung ist jetzt nur noch Deine Einstellungssache, aber es sei darauf hingewiesen, dass langfristig die Lösung mit einer »Spiegelstrich-Liste«, also mit dem Konstrukt »<ul><li>...</li><li>...</li>...</ul>« die bessere sein dürfte, aber letztlich kommt es ja darauf an, weniger die Technik-Freaks zu beeindrucken, als die Information so rüberzubringen, wie Du Dir das vorstellst.

Die obige Lösung ist natürlich nur ein Workaround, aber es führt dazu, dass das Hintergrundbild erscheint. Bei den folgenden DIVs »weiß« der MSIE scheinbar über die Höhen besser Bescheid.

Ich hoffe, das hilft!

 

[natsuki]

Abhilfe (ich hab's bei mir lokal ausprobiert, es sollte Dir also schnell gelingen) ist, dem DIV-Tag eine »konkrete« Höhenangabe zu geben. Hier sollte es ausreichen, der Selektion .left-menu a:link eine Höhe zuzuweisen. Dies kann natürlich auch eine relative Höhenangabe sein, also nicht nur height: 20px; sondern auch height: 1em;. Die genaue Bemessung ist jetzt nur noch Deine Einstellungssache, aber es sei darauf hingewiesen, dass langfristig die Lösung mit einer »Spiegelstrich-Liste«, also mit dem Konstrukt »<ul><li>...</li><li>...</li>...</ul>« die bessere sein dürfte, aber letztlich kommt es ja darauf an, weniger die Technik-Freaks zu beeindrucken, als die Information so rüberzubringen, wie Du Dir das vorstellst.

Ich hoffe, das hilft!

Hi,
Danke, das hat geholfen.

Zumindest ist das mal ne vorübergehende Lösung, bis ich mich mit einer "Spiegelstrich-Liste" ein bisschen beschäftigt habe.

Danke
natsuki

 

[Hilarious]

Hi,
Danke, das hat geholfen.

Zumindest ist das mal ne vorübergehende Lösung, bis ich mit einer "Spiegelstrich-Liste" ein bisschen beschäftigt habe.

Danke
natsuki

Fein

Tipp: Auch bei der Abbildung der Listen hilft eine Angabe der Höhe zum relevanten LI-Tag, sonst verrechnet sich der MSIE ganz fürchterlich.