strohhalm.org / Archiv / (X)HTML & CSS / Eintrag lesen

Background-image: Firefox vs. IE

1. Background-image: Firefox vs. IE

   Themenmixer 25. November 2004, 16:02

   Hallöchen!
   
   Ich habe gerade auf der Entwicklungs-Site unsere neuen Firmenhomepage http://spipwz.themenmix.de oben rechts ein paar Link-Buttons eingebaut und mittels CSS mit Grafiken versehen.
   
   Im FF funktioniert die Geschichte vom Prizip her wunderbar.
   Die Grafiken werden dargestellt, die Hover-Grafiken ebenfalls.
   
   Der IE zeigt die Ursprungsgrafiken nicht an, wohl aber die Hover-Grafiken.
   
   Und ich habe keinen Plan mehr woran das liegt. Könnt ihr mir helfen?
   
   Die Styles sehen so aus:
   .braubut,
   .minbut,
   .foodbut {
   display:block;
   width: 60px;
   height: 58px;
   }
   
   a.braubut {
   background-image: url(IMG/brauerei-button-inaktiv.gif);
   }
   a.minbut {
   background-image: url(IMG/mineraloel-button-inaktiv.gif);
   }
   a.foodbut {
   background-image: url(IMG/food-button-inaktiv.gif);
   }
   
   a.braubut:link,
   a.braubut:visited,
   a.braubut:hover,
   a.braubut:active,
   a.minbut:link,
   a.minbut:visited,
   a.minbut:hover,
   a.minbut:active,
   a.foodbut:link,
   a.foodbut:visited,
   a.foodbut:hover,
   a.foodbut:active
   {
   text-decoration: none;
   background-position: center;
   background-repeat: no-repeat;
   }
   
   
   a.braubut:hover {
   background-image: url(IMG/brauerei-button.gif);
   }
   a.minbut:hover {
   background-image: url(IMG/mineraloel-button.gif);
   }
   a.foodbut:hover {
   background-image: url(IMG/food-button.gif);
   }
   
   
   Der Code sieht so aus:
   <dl class="meImgLeft" >
   <dt><a class="braubut" href="#" title="Hier gehts zur Brauereilösung"></a></dt>
   <dd>Brauerei</dd>
   </dl>
   <dl class="meImgLeft" >
   <dt><a class="foodbut" href="#" title="Hier gehts zur Foodlösung"></a></dt>
   <dd>Food</dd>
   </dl>
   <dl class="meImgLeft" >
   <dt><a class="minbut" href="#" title="Hier gehts zur Mineralöllösung"></a></dt>
   <dd>Mineralöl</dd>
   </dl>

2. Re: Background-image: Firefox vs. IE

   Themenmixer 25. November 2004, 16:28

   Gelöst. (ich hätte nicht so schnell aufgeben sollen)
   
   Background:
   Der IE nimmt es übel, wenn man die Background-Image-Definition separat von den allgemeinen Link-Definitionen angibt. Damit kann ich die "redundanten" Einstellungen für die drei Buttons nicht zusammenfassen.
   
   Korrekt ist folgende Schreibweise: (für einen der Buttons)
   a.minbut:link,
   a.minbut:visited,
   a.minbut:hover,
   a.minbut:active {
   text-decoration: none;
   background-image: url(IMG/mineraloel-button-inaktiv.gif);
   background-position: center;
   background-repeat: no-repeat;
   
   }

3. Re: Background-image: Firefox vs. IE

   timbec 27. November 2004, 01:27

   bildhover kann man auch viel eleganter lösen:
   
   man erstellt ein bild mit dem normalen und dem "gehoverten" bild. in der css datei gib man beim link das bild an und verschiebt bei a:hover das hintergrundbild um XX pixel, so das das gehoverte bild erscheint.
   
   gruß,
   tim

4. Re: Background-image: Firefox vs. IE

   gaby 27. November 2004, 13:18

   
   > man erstellt ein bild mit dem normalen und dem "gehoverten" bild. in der css datei gib man beim link das bild an und verschiebt bei a:hover das hintergrundbild um XX pixel, so das das gehoverte bild erscheint.
   
   
   So habe ich das auch mal gemacht, aber es hat sich nicht bewährt. Wenn ich eine Grafik erstelle, die aus 2 Hintergrundbildern besteht und bei ":link" und ":hover" dann nur die Position des bg-Bildes mit zb background-position: top left und background-position: bottom left angebe, wird nämlich bei Schriftvergrößerung auch die Linkfläche mitvergrößert. So passiert es dann, daß als Hintergrund das entsprechende bg-Bild entweder gekachelt wird oder ein Stück des nebendran/untendrunterliegenden bg-Bildes sichtbar wird.
   
   Ich mache es so, daß ich die Hintergrundgrafiken einzeln erstelle und etwas größer mache, als die Link-Fläche.
   Dann positioniere ich das bg-Bild mit position:center center.
   
   Grüße
   gaby

5. Re: Background-image: Firefox vs. IE

   Pedrito 27. November 2004, 16:50

   Hi, Gaby,
   ich arbeite nur moch mit Einzelgrafiken, nur schon aus Performance-Gründen. Ich mache einfach die Bilder überhoch und genügend lang, damit sie auch Schriftgrössenveränderungen mitmachen. Teils langt nur schon background-position:left -> right, um gute Effekte zu erzielen. Left-Right beinhaltet ja schon immer eine vertikale Zentrierung, Beispiel:
   
   http://www.aviation-services.ch/de/firma/geschichte.asp
   
   Die obere Navi ist per left/right positioniert, die Seitennavi so:
   
   background-position:190px 50%;
   background-position:0 50%;
   
   mfG
   
   Peter

6. Re: Background-image: Firefox vs. IE

   gaby 28. November 2004, 09:29

   Hi,
   
   > Die obere Navi ist per left/right positioniert, die Seitennavi so:
   
   
   Auf die Idee bin ich noch gar nicht gekommen, den kleinen Pfeil, der bei hover erscheint, mit in die Hintergrundgrafik zu nehmen.
   Hab' mich bisher immer mit einer Extra-Grafik und <span> oder display:inline abgeplagt.
   
   Das werde ich aber ab sofort ändern. *bg*
   
   Grüße
   gaby

7. Re: Background-image: Firefox vs. IE

   Pedrito 28. November 2004, 10:26

   Habe mal was zu CSS-Navis geschrieben und auch ein paar Beispiele mit Code beigelegt:
   
   http://www.pedrito.ch/pedrito/html-und-css/css-navigationen.asp
   
   
   mfG
   
   Pedrito