FireFox Problem mit CSS

Status
Nicht offen für weitere Antworten.
G

g-mikee

Grünschnabel
Hey! Seit ich FireFox-User bin, ist mir aufgefallen, dass es tatsächlich schwieriger ist etwas auf dem Fuchs hinzubekommen als z.B. auf IE oder Netscape! :D Da hab ich hier ein kleines Problem: Unter IE funktioniert alles perfekt - unter Firefox garnicht! wo ist der Fehler? Wie bekomm ich einen "Mouse-Over-Bild-Wechsel-Effekt" hin?

Code: 
<HTML>
<HEAD>
<style type="text/css">
body{background-color:#000000; margin:0px; text-align:center}
table{margin-top:-40px;}
img {border:none;}
.home {background-image:url(http://www.g-mikee.de/test/Bilder/site2_06.jpg); padding:0px; margin:0px; width:105px; height:30px;}
div.home a:hover{background-image:url(http://www.g-mikee.de/test/Bilder/site_06.jpg); padding:0px; margin:0px; width:105px; height:30px;}

.gallery {background-image:url(http://www.g-mikee.de/test/Bilder/site2_08.jpg); padding:0px; margin:0px; width:125px; height:30px;}
div.gallery a:hover{background-image:url(http://www.g-mikee.de/test/Bilder/site_08.jpg); padding:0px; margin:0px; width:125px; height:30px;}

.contact {background-image:url(http://www.g-mikee.de/test/Bilder/site2_10.jpg); padding:0px; margin:0px; width:128px; height:30px;}
div.contact a:hover{background-image:url(http://www.g-mikee.de/test/Bilder/site_10.jpg); padding:0px; margin:0px; width:128px; height:30px;}
</style>
<TITLE>Unbenannt-1</TITLE>
<META CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY>

<TABLE WIDTH=914 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">
	<TR>
		<TD ROWSPAN=4>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_01.jpg" WIDTH=26 HEIGHT=169 ALT=""></TD>
		<TD COLSPAN=7>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_02.jpg" WIDTH=859 HEIGHT=55 ALT=""></TD>
		<TD ROWSPAN=4>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_03.jpg" WIDTH=29 HEIGHT=169 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=7>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_04.jpg" WIDTH=859 HEIGHT=44 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=2>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_05.jpg" WIDTH=182 HEIGHT=70 ALT=""></TD>
		<TD><div class="home"><a href="#" class="home">
			</a></div></div>
      </TD>
		<TD ROWSPAN=2>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_07.jpg" WIDTH=78 HEIGHT=70 ALT=""></TD>
		<TD><div class="gallery"><a href="#" class="gallery">
			</a></div></TD>
		<TD ROWSPAN=2>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_09.jpg" WIDTH=90 HEIGHT=70 ALT=""></TD>
		<TD><div class="contact"><a href="#" class="contact">
			</a></div></TD>
		<TD ROWSPAN=2>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_11.jpg" WIDTH=151 HEIGHT=70 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_12.jpg" WIDTH=105 HEIGHT=40 ALT=""></TD>
		<TD>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_13.jpg" WIDTH=125 HEIGHT=40 ALT=""></TD>
		<TD>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_14.jpg" WIDTH=128 HEIGHT=40 ALT=""></TD>
	</TR>
</TABLE>

</BODY>
</HTML>
http://www.g-mikee.de/test/test.htm
Danke im voraus!
 
So sollte der CSS-Bildertausch auch im FF funktionieren:
Code: 
a.home  {background-image:url(http://www.g-mikee.de/test/Bilder/site2_06.jpg); padding:0px; margin:0px; width:105px; height:30px;}
a.home:hover {background-image:url(http://www.g-mikee.de/test/Bilder/site_06.jpg); padding:0px; margin:0px; width:105px; height:30px;}

a.gallery {background-image:url(http://www.g-mikee.de/test/Bilder/site2_08.jpg); padding:0px; margin:0px; width:125px; height:30px;}
a.gallery:hover {background-image:url(http://www.g-mikee.de/test/Bilder/site_08.jpg); padding:0px; margin:0px; width:125px; height:30px;}

a.contact {background-image:url(http://www.g-mikee.de/test/Bilder/site2_10.jpg); padding:0px; margin:0px; width:128px; height:30px;}
a.contact:hover {background-image:url(http://www.g-mikee.de/test/Bilder/site_10.jpg); padding:0px; margin:0px; width:128px; height:30px;}
HTML: 
<td><a href="#" class="home">home</a></td>
      
<td><a href="#" class="gallery">gallery</a></td>

<td><a href="#" class="contact">contact</a></td>

greez, maik.l
 
Stimmt so nicht ganz, ist jedoch ohne der div-Bereiche viel einfacher. Das einzige was gefehlt hat, war der "display:block"! Danke für die Antwort!
Code: 
a.home {background-image:url(http://www.g-mikee.de/test/Bilder/site2_06.jpg); display:block; width:105px; height:30px;}
a.home:hover{background-image:url(http://www.g-mikee.de/test/Bilder/site_06.jpg); display:block; width:105px; height:30px;}

a.gallery {background-image:url(http://www.g-mikee.de/test/Bilder/site2_08.jpg); display:block; width:125px; height:30px;}
a.gallery:hover{background-image:url(http://www.g-mikee.de/test/Bilder/site_08.jpg); display:block; width:125px; height:30px;}

a.contact {background-image:url(http://www.g-mikee.de/test/Bilder/site2_10.jpg); display:block; width:128px; height:30px;}
a.contact:hover{background-image:url(http://www.g-mikee.de/test/Bilder/site_10.jpg); display:block; width:128px; height:30px;}
Code: 
	<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_05.jpg" WIDTH=182 HEIGHT=70 ALT=""></TD>
		<TD><a href="#" class="home" onClick="this.blur()">
			</a>
      </TD>
		<TD ROWSPAN=2>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_07.jpg" WIDTH=78 HEIGHT=70 ALT=""></TD>
		<TD><a href="#" class="gallery" onClick="this.blur()">
			</a></TD>
		<TD ROWSPAN=2>
			<IMG SRC="http://www.g-mikee.de/test/Bilder/site2_09.jpg" WIDTH=90 HEIGHT=70 ALT=""></TD>
		<TD><a href="#" class="contact" onClick="this.blur()">
			</a></TD
 
Seit ich FireFox-User bin, ist mir aufgefallen, dass es tatsächlich schwieriger ist etwas auf dem Fuchs hinzubekommen als z.B. auf IE oder Netscape!
Zum Vergrößern anklicken....
Na dann freu dich, solange das noch so ist. Spätestens, wenn du zum Boxmodel, der völlig falschen Positionierung des Hintergrundbildes sowie den nicht unterstützten Pseudoformaten :before und :after kommst, wirst du merken, dass die CSS-Unterstützung des Firefox um einiges besser ist als die des IE.

SCNR
 
Das einzige was gefehlt hat, war der "display:block"!
Zum Vergrößern anklicken....
Stimmt, ansonsten übernehmen die Gecko-Browsers die Weiten- u. Höhenangabe für Links nicht. Hatte ich gestern abend beim Posting ganz vergessen.

greez, maik.l
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück