✔ Hintergrundgrafik wird nicht angezeigt

Status
Nicht offen für weitere Antworten.
M

murdi

Erfahrenes Mitglied
Guten Abend,

ich habe folgendes Problem ( wäre sinnvoll, den angehangenen Code anzuschauen ):

Im Internetexplorer wird die Hintergrundgrafik, welche ich über #mainmenu li#spacer definiere, angezeigt. Ebenso wird auch die Höhe der li-Elemente richtig interpretiert ( Höhe:36px; ). Schaue ich mir das ganze jedoch im Firefox an, wird weder die Hintergrundgrafik angezeigt, noch die von mir definierte Höhe dargestellt.

Einen richtigen Lösungsansatz habe ich bisher nicht gefunden. Möglicherweise kann mit jemand von euch weiterhelfen.

Mit freundlichen Grüßen
murdi

Code: 
<html>
 <head>
  <title></title>
 </head>
 <style>

 body {
 margin:0px;
 padding:0px;
 }

 #mainmenu {
 margin:50px;
 padding:10px;

 }

 #mainmenu ul {

 }

 #mainmenu li {
 display:inline;
 height:36px;
 }

 #mainmenu li a {
 font-family:arial;
 font-size:0.9em;
 text-decoration:none;
 padding-left:10px;
 padding-right:10px;
 color:#878;
 }

 #mainmenu li#spacer  {
 background:url(Trenner.gif);
 width:1px;
 height:36px;
 }

 </style>

 <body>

 <div id="mainmenu">
  <ul>
   <li><a href="">1. Link</a></li>
   <li id="spacer"></li>
   <li><a href="">2. Link</a></li>
   <li></li>
   <li><a href="">3. Link</a></li>
  </ul>
 </div>

 </body>
</html>
 
Weise dem li-Element anstelle der display:inline-Eigenschaft die float:left-Eigenschaft zu und deaktiviere im Selektor #mainmenu ul mittels list-style:none die Anzeige der Bullet-Zeichen:


Code: 
body {
 margin:0px;
 padding:0px;
 }

 #mainmenu {
 margin:50px;
 padding:10px;
 }

 #mainmenu ul {
 list-style:none;
 margin: 0;
 padding: 0;
 }

 #mainmenu li {
 float:left;
 height:36px;
 }

 #mainmenu li a {
 font-family:arial;
 font-size:0.9em;
 text-decoration:none;
 padding-left:10px;
 padding-right:10px;
 color:#878;
 }

 #mainmenu li#spacer  {
 background:url(Trenner.gif);
 width:1px;
 height:36px;
 }
 
Hallo,

vielen Dank für deine Hilfe. Funktioniert nun. Wollte nochmal schnell Fragen, ob du mir die Änderungen an meinem Code begründen könntest.

Danke.
 
Klar, kein Problem ;)

Damit die Hintergrundgrafik eines Elements angezeigt wird, muß dieses entweder ein Block-Element sein, oder die "Block-Level-Charakteristika" besitzen.

Dies war aber durch die display:inline-Eigenschaft nicht gegeben, weshalb Firefox die Hintergrundgrafik nicht angezeigt hat.

Aus diesem Grund habe ich die Listenpunkte mittels der float:left-Eigenschaft horizontal ausgerichtet, womit sie auch gleichzeitig die erforderliche Block-Level-Charakteristika besitzen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück