|
|||
Problem im Firefox mit Listenhintergrund
Hallo und Guten Morgen.
Ich sitze grade am Layout für unsere Firma und hab da seit gestern ein Problem. ich habe drei "buttons" angelegt als Listenelemente, welche den Hintergrund auf voller größe und breite des Divs bei hover wechseln. So soll es aussehen und sah es bis gestern mittag auch sowohl im IE als auch im FF aus: Hab dies in HTML umgesetzt, was auch funktionierte. Seit dem Firefox update gestern vormittag zerschiesst es diesen Listenstyle und zeigt den Background nicht mehr in voller breite und höhe an. im IE funktioniert es so wie es soll, auf anderen rechnern auch. Im FF sieht es nun so aus: Vielleicht weiss jemand rat, wieso es das nun im FF nicht mehr korrekt darstellt? |
Sponsored Links |
|
|||
Klaro, gerne.
HTML Schnipsel: Code:
<div id="categories"> <div id="cat1"> <ul> <li><a href="#" > </a></li> </ul> </div> <div id="cat2"> <ul> <li><a href="#" > </a></li> </ul> </div> <div id="cat3"> <ul> <li><a href="#" > </a></li> </ul> </div> </div> Code:
div#categories { width:220px; height:230px; margin:0; padding:0; float:left; } #header #categories #cat1,#header #categories #cat2 { width:220px; height: 76px; padding:0px; margin-bottom:1px; } #header #categories ul { width: 220px; height: 76px; padding: 0; overflow: hidden; margin:0; } #header #categories li { width: 220px; height: 76px; padding: 0px; padding: 0; overflow: hidden; list-style: none; } #header #categories #cat1 li a { width: 220px; height: 76px; padding: 0; overflow: hidden; margin: 0; list-style: none; background: url(images/navi_ds.jpg) left no-repeat; text-decoration: none; } #header #categories #cat1 li a:hover { width: 220px; height: 76px; padding: 0px; overflow: hidden; margin: 0px 0px 1px 0px; list-style: none; background: url(images/navi_ds_hover.jpg) left no-repeat; text-decoration: none; } #header #categories #cat2 li a { width: 220px; height: 76px; padding: 0px; overflow: hidden; margin: 0px; list-style: none; background: url(images/navi_md.jpg) left no-repeat; text-decoration: none; } #header #categories #cat2 li a:hover { width: 220px; height: 76px; padding: 0px; overflow: hidden; margin: 0px; list-style: none; background: url(images/navi_md_hover.jpg) left no-repeat; text-decoration: none; } #header #categories #cat3 li a { width: 220px; height: 76px; padding: 0px; overflow: hidden; list-style: none; margin: 0px; background: url(images/navi_ind.jpg) left no-repeat; text-decoration: none; } #header #categories #cat3 li a:hover { width: 220px; height: 76px; padding: 0px; overflow: hidden; list-style: none; margin: 0px; background: url(images/navi_ind_hover.jpg) left no-repeat; text-decoration: none; } |
|
|||
Warum so kompliziert? Probiers mal mit:
HTML-Code:
<div id="categories"> <ul> <li id="cat1"><a href="#" > </a></li> <li id="cat2"><a href="#" > </a></li> <li id="cat3"><a href="#" > </a></li> </ul> </div> Code:
* { border: 0; margin: 0; padding: 0; } div#categories { width:220px; height:230px; float:left; } #cat1, #cat2 { margin-bottom: 1px; } #categories ul { width: 220px; overflow: hidden; list-style: none; } #categories ul li a { width: 220px; height: 76px; display: block; text-decoration: none; background-repeat: no-repeat; } #categories ul li#cat1 a { background-image: url(images/navi_ds.jpg); } #categories ul li#cat1 a:hover { background-image: url(images/navi_ds_hover.jpg); } #categories ul li#cat2 a { background-image: url(images/navi_md.jpg); } #categories ul li#cat2 a:hover { background-image: url(images/navi_md_hover.jpg); } #categories ul li#cat3 a { background-image: url(images/navi_ind.jpg); } #categories ul li#cat3 a:hover { background-image: url(images/navi_ind_hover.jpg); } |
|
|||
Stimmt eigentlich. Hab gar nicht dran gedacht, dass ich ja dem li auch eine ID zuweisen kann.
Danke jetzt funktioniert es wieder wie es soll! Danke für Eure Hilfe und den Tip mit der li-ID |
|
|||
Genau deswegen!
ich wollte erst eine liste nehmen für alle drei, aber dann hätte ich ja allen nur ein und denselben hintergrund geben können. daher entschied ich mich für die umständlichere variante. Naja, manchmal denkt man einfach zu umständlich. |
|
|||
Ja sicher, das ergibt sich dann eben daraus, dass man nicht für jede Liste einzeln die Definitionen getrennt angeben muss. Wie gesagt mein erster Gedanke war ja, es auch so anzulegen, jedoch hatte ich es dann wieder verworfen.
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Meiner erster Post mit nem Firefox (Hack?) Problem. | Apex | CSS | 2 | 27.06.2008 09:37 |
IE & Firefox Problem | Killer3d | (X)HTML | 7 | 04.01.2008 14:19 |
problem mit div box im firefox - dringend!! | tee | CSS | 11 | 27.09.2007 20:21 |
Firefox: float / margin Problem | kadees | CSS | 4 | 14.01.2007 14:23 |
CSS Problem im FireFox aber nicht IE | fra232 | CSS | 1 | 29.11.2004 01:04 |