<li><a>-Inhalt bei display:block hinter <ul>-Background-Image

[mb-bs]

Hallo,

ich habe auf einer Seite nachfolgende CSS-Regeln definiert:

#main #left #menu_bg {  
   width: 224px;  
   background: transparent url(menu_bg.jpg) no-repeat bottom left;  
}  
  
#main #left ul.menu {  
   padding: 7px 12px;  
   list-style-type: none;  
   background: transparent url(top_menu.jpg) no-repeat top left;  
}  
  
#main #left ul.menu li {  
   border-bottom: 2px dashed #90D5F2;  
}  
  
#main #left a {  
   display: block;  
   margin-left: 5px;  
   padding: 10px 0 5px 25px;  
   color: #FFFFFF;  
   text-decoration: none;  
   font-size: 120%;  
   background: none;  
}  
  
#main #left a:hover {  
   background: transparent url(apfel.png) no-repeat center left;  
}  
  
#main #left ul.menu li.last {  
   padding-bottom: 2px;  
   border-bottom: none;  
}

Der zugehörige HTML-Code sieht so aus:

<div id="menu_bg">  
   <ul class="menu">  
      <li><a href="http://www.google.de">Home</a></li>  
      <li><a href="http://www.google.de">Unsere Angebote</a></li>  
      <li><a href="http://www.google.de">Firmenphilosophie</a></li>  
      <li><a href="http://www.google.de">Kursangebot</a></li>  
      <li><a href="http://www.google.de">Öffnungszeiten</a></li>  
      <li class="last"><a href="http://www.google.de">Bildergallerie</a></li>  
   </ul>  
</div>

Im Internet Explorer 6 liegt das Hintergrundbild der Liste über den Listenpunkten. Wenn ich das Image wegnehme, kann ich die Links sehen, wenn ich aus der Link-Definition das display:block wegnehme, passt auch alles.

Gab es nicht eine bestimmte Reihenfolge, an welcher Stelle display: block stehen muss?

Find keinen Fehler im Quellcode, hat jemand noch eine Idee.

Schonmal Danke!

Gruß

mb-bs

[Malcolm Beck´s]

hi,

#main #left #menu_bg {

}

  
Hier kannst du dir #main und #left sparen, da #menu\_bg eine ID ist, ist sie eh eindeutig im Dokument und braucht daher keine abhängigkeiten, so wie Klassen in Seltenen fällen.  
  
~~~css
  

> #main #left ul.menu li {  
> }  
> #main #left a {  
> }

Warum formatierst du hier die a-Elemente nicht direkt für die Liste, statt Global für #main #left?
Wobei du dir auch in diesem fall das vorangehende #main sparen kannst, da auch #left eindeutig ist.

mfg

[mb-bs]

Hi,

verstehe Deine Einwände, aber das hat eigentlich nix mit meiner Problemstellung zu tun, oder?

Gruß

mb-bs

[Malcolm Beck´s]

hi,

verstehe Deine Einwände,

Das waren keine Einwände, sondern Gratis-Tipps zum mitnehmen ;)

aber das hat eigentlich nix mit meiner Problemstellung zu tun, oder?

Ja, 2te Passage, erster Absatz.

mfg

[mb-bs]

Hi,

jetzt versteh ich, was Du meinst. OK, hab die Links nun auf die Liste bezogen, leider keine Änderung.
Man sieht halt beim Seitenaufbau ganz kurz den Linktext, und dann lädt der das Bild da drüber. Naja, egal, dann animier ich Besucher zum Umstieg auf den höheren IE oder direkt Firefox. ;-)

Danke und Gruß

mb-bs

[Malcolm Beck´s]

hi,

OK, hab die Links nun auf die Liste bezogen, leider keine Änderung.
Man sieht halt beim Seitenaufbau ganz kurz den Linktext, und dann lädt der das Bild da drüber.

Vielleicht noch was im Cache des IE -- dafür ist er berühmt berüchtigt.

Naja, egal, dann animier ich Besucher zum Umstieg auf den höheren IE oder direkt Firefox. ;-)

Das ist natürlich die Feine Englische Art, Probleme mit dem IE zu lösen ;)

Optional kannst du ja mal die betroffene Seite verlinken, so dass man sich das mal Live ansehen kann -- vielleicht ist ja doch noch was zu retten.

Antworten kann ich aber erst heute Abend wieder, ich muss erstmal ein bisschen schlafen ;)

mfg

[franzl]

Hi,

Das Hinschreiben oder Weglassen ist egal für die Funktionalität, von daher: ich hab die Sachen immer ganz gerne da stehen: gerade, wenn der CSS Code in einer eigenen Datei steht, erhöht das die Übersichtlichkeit bzgw. erleichtert den Bezug zum HTML Gerüst.

franzl

[Malcolm Beck´s]

hi,

Das Hinschreiben oder Weglassen ist egal für die Funktionalität, von daher:

Dir kann es egal sein, du bist ja auch nicht die Browser rendering, nehme ich mal an ;)

ich hab die Sachen immer ganz gerne da stehen:

Ich habe meine Sachen auch gerne da stehen, aber zu mehr Übersicht hat es mir bis jetzt nicht unbedingt verholfen, leider.

gerade, wenn der CSS Code in einer eigenen Datei steht, erhöht das die Übersichtlichkeit bzgw. erleichtert den Bezug zum HTML Gerüst.

Du hast eine ID in einem Dokument (von der du in der Regel auch weisst, warum sie existiert und wo du sie findest):

Variante A

#content-wrap #style_div #left_floating_box #content_grab #content_hub #l-right-dock a {  
  display:block;  
}

Variante B

#l-right-dock a {  
  display:block;  
}

Gerade das erste Beispiel ist eine Katastrophe in Punkto Debuggen, selbst wenn du nur 2 oder 3 Keys davor setzt, erfordert es mehr sucherei, als das letzte Beispiel (wir lassen mal die Suchfunktion des verwendeten Editor aussen vor) -- und zu dem gibt es ein besseres Browser rendering Gratis oben drauf, wenn man es wie im 2ten Bsp. Handhabt.

mfg

[ChrisB]

Hi,

Im Internet Explorer 6 liegt das Hintergrundbild der Liste über den Listenpunkten. Wenn ich das Image wegnehme, kann ich die Links sehen, wenn ich aus der Link-Definition das display:block wegnehme, passt auch alles.

Probiere mal, den Links auch noch position:relative zu geben - das hilft bei vielen Problemen älterer IEs mit der korrekten Schichtung von Elementen.

Falls das nicht reicht, stelle bitte ein (valides) Online-Beispiel bereit, damit man sich das ganze live anschauen kann.

MfG ChrisB