zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem im Firefox mit Listenhintergrund

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.02.2009, 10:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.05.2008
Beiträge: 35
netnite befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.02.2009, 11:28
Wissensbegierig
neuer user
 
Registriert seit: 17.05.2006
Beiträge: 89
Synoxis befindet sich auf einem aufstrebenden Ast
Standard

Hast du mal einen Link oder zumindest deinen Code damit man sich das mal ansehen kann? Nur mit den Bildern kann man da nämlich nicht viel machen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.02.2009, 11:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.05.2008
Beiträge: 35
netnite befindet sich auf einem aufstrebenden Ast
Standard

Klaro, gerne.

HTML Schnipsel:

Code:
<div id="categories">
<div id="cat1">
<ul>
<li><a href="#" >&nbsp;</a></li>
</ul>
</div>
<div id="cat2">
<ul>
<li><a href="#" >&nbsp;</a></li>
</ul>
</div>
<div id="cat3">
<ul>
<li><a href="#" >&nbsp;</a></li>
</ul>
</div>
</div>
Und die dazugehörigen CSS Definitionen:

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;

}
Mit Zitat antworten
  #4 (permalink)  
Alt 05.02.2009, 11:52
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

a bräuchte display: block.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.02.2009, 11:52
Wissensbegierig
neuer user
 
Registriert seit: 17.05.2006
Beiträge: 89
Synoxis befindet sich auf einem aufstrebenden Ast
Standard

Warum so kompliziert? Probiers mal mit:

HTML-Code:
<div id="categories">
	<ul>
		<li id="cat1"><a href="#" >&nbsp;</a></li>
		<li id="cat2"><a href="#" >&nbsp;</a></li>
		<li id="cat3"><a href="#" >&nbsp;</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); }
Mit Zitat antworten
  #6 (permalink)  
Alt 05.02.2009, 11:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.05.2008
Beiträge: 35
netnite befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 05.02.2009, 11:57
Wissensbegierig
neuer user
 
Registriert seit: 17.05.2006
Beiträge: 89
Synoxis befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von netnite Beitrag anzeigen
Stimmt eigentlich. Hab gar nicht dran gedacht, dass ich ja dem li auch eine ID zuweisen kann.
Nur deswegen hast du mehrere Listen genutzt? :P
Mit Zitat antworten
  #8 (permalink)  
Alt 05.02.2009, 12:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.05.2008
Beiträge: 35
netnite befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 05.02.2009, 12:04
Wissensbegierig
neuer user
 
Registriert seit: 17.05.2006
Beiträge: 89
Synoxis befindet sich auf einem aufstrebenden Ast
Standard

Ich hoffe du hast auch gesehen um wieviel kürzer mein Code ist gegenüber deinem weil ich einige Elemente zusammengefasst habe.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.02.2009, 12:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.05.2008
Beiträge: 35
netnite befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:10 Uhr.