Cellspacing Firefox/IE funktioniert nicht

Aspire · 05.05.2011

Hey ich hab eine Hp gemacht die in Chrome wunderbar funktioniert, allerdings bei
IE und Firefox nicht. Sie besteht aus Tabellen mit Bildern.
Bei Chrome sieht es folgendermaßen aus:

Uploaded with
In Firefox so:

Uploaded with

Woran kann das liegen?

Hier noch der Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Valenza</title>
<script
language="JavaScript">
<!--
button1= new Image();
button1.src = "http://www.psd-tutorials.de/forum/images/Startseite.gif"
button2= new Image();
button2.src = "http://www.psd-tutorials.de/forum/images/Startseite_mo.png"
button3= new Image();
button3.src = "http://www.psd-tutorials.de/forum/images/Produkte.gif"
button4= new Image();
button4.src = "http://www.psd-tutorials.de/forum/images/Produkte_mo.png"
button5= new Image();
button5.src = "http://www.psd-tutorials.de/forum/images/Algenmaske.gif"
button6= new Image();
button6.src = "http://www.psd-tutorials.de/forum/images/Algenmaske_mo.png"
button7= new Image();
button7.src = "http://www.psd-tutorials.de/forum/images/Arganoel.gif"
button8= new Image();
button8.src = "http://www.psd-tutorials.de/forum/images/Arganoel_mo.png"
button9= new Image();
button9.src = "http://www.psd-tutorials.de/forum/images/Tonikum.gif"
button10= new Image();
button10.src = "http://www.psd-tutorials.de/forum/images/Tonikum_mo.png"
button13= new Image();
button13.src = "http://www.psd-tutorials.de/forum/images/Bilder.png"
button14= new Image();
button14.src = "http://www.psd-tutorials.de/forum/images/Bilder_mo.png"
button11= new Image();
button11.src = "http://www.psd-tutorials.de/forum/images/Waschbutter.gif"
button12= new Image();
button12.src = "http://www.psd-tutorials.de/forum/images/Waschbutter_mo.png"

button15= new Image();
button15.src = "http://www.psd-tutorials.de/forum/images/Algenmaske-content.png"
button15= new Image();
button15.src = "http://www.psd-tutorials.de/forum/images/Tonikum-content.png"
button15= new Image();
button15.src = "http://www.psd-tutorials.de/forum/images/Waschbutter-content.png"
button15= new Image();
button15.src = "http://www.psd-tutorials.de/forum/images/Arganoel-content.png"
button15= new Image();
button15.src = "http://www.psd-tutorials.de/forum/images/Produkte-content.png"
button15= new Image();
button15.src = "http://www.psd-tutorials.de/forum/images/Kontakt-content.png" -->

</script>

<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}


</style>

</head>
<body bgcolor="#d3c677" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table id="Table_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0" top-margin="0">
	<tr>
		<td valign="top">
			<img src="http://www.psd-tutorials.de/forum/images/Startseite-content.png"  alt=""></td>
		<td valign="top">
			<table border="0" cellspacing="0" cellpadding="0">
					<tr>
			        <td>
                   		 <img src="http://www.psd-tutorials.de/forum/images/Valenza_02.gif" alt=""></td>
                    </tr>
                    <tr>
                   		 <td>
                   			 <a href="index.html"
                   			 onmouseover="startseite.src='images/Startseite_mo.png';"
                   			 onmouseout="startseite.src='images/Startseite.gif';">
                   			 <img src="http://www.psd-tutorials.de/forum/images/Startseite.gif" border="0" alt="startseite" name="startseite">
                   			 </a>
               		     </td>
           			</tr>

           			<tr>
						<td>
							<img src="http://www.psd-tutorials.de/forum/images/Valenza_05.gif" alt="" >
						</td>
					</tr>
	                <tr>
                        <td>
                            <a href="produkte.html"
                            onmouseover="produkte.src='images/Produkte_mo.png';"
                            onmouseout="produkte.src='images/Produkte.gif';">
                            <img src="http://www.psd-tutorials.de/forum/images/Produkte.gif" border="0" alt="produkte" name="produkte">
                            </a>
                        </td>
                    </tr>
                    <tr>
			            <td>
                       		<img src="http://www.psd-tutorials.de/forum/images/Valenza_07.gif"  alt="">
                        </td>
	               </tr>
	               <tr>
                        <td>
                            <a href="algenmaske.html"
                            onmouseover="algenmaske.src='images/Algenmaske_mo.png';"
                            onmouseout="algenmaske.src='images/Algenmaske.gif';">
                            <img src="http://www.psd-tutorials.de/forum/images/Algenmaske.gif"  border="0" name="algenmaske">
                            </a>
                        </td>
                   </tr>
				   <tr>
						<td>
							<img src="http://www.psd-tutorials.de/forum/images/Valenza_09.gif" width="145" height="17" alt="">
						</td>
				   </tr>
					<tr>
						<td>
                            <a href="tonikum.html"
                            onmouseover="tonikum.src='images/Tonikum_mo.png';"
                            onmouseout="tonikum.src='images/Tonikum.gif';">
                            <img src="http://www.psd-tutorials.de/forum/images/Tonikum.gif" border="0" name="tonikum">
                            </a>
						</td>
					</tr>
					<tr>
						<td>
							<img src="http://www.psd-tutorials.de/forum/images/Valenza_11.gif" alt="">
						</td>
					</tr>
	                <tr>
                        <td>
                            <a href="arganoel.html"
                            onmouseover="arganoel.src='images/Arganoel_mo.png';"
                            onmouseout="arganoel.src='images/Arganoel.gif';">
                            <img src="http://www.psd-tutorials.de/forum/images/arganoel.gif" border="0" name="arganoel">
                            </a>
                        </td>
                    </tr>
					<tr>
						<td>
							<img src="http://www.psd-tutorials.de/forum/images/Valenza_13.gif" alt="">
						</td>
					</tr>
	                <tr>
                        <td>
                            <a href="waschbutter.html"
                            onmouseover="waschbutter.src='images/Waschbutter_mo.png';"
                            onmouseout="waschbutter.src='images/Waschbutter.gif';">
                            <img src="http://www.psd-tutorials.de/forum/images/waschbutter.gif" border="0" name="waschbutter">
                            </a>
                        </td>
                    </tr>
					<tr>
						<td>
							<img src="http://www.psd-tutorials.de/forum/images/Valenza_15.gif"  alt="">
						</td>
					</tr>
	                <tr>
                        <td>
                            <a href="kontakt.html"
                            onmouseover="kontakt.src='images/Kontakt_mo.png';"
                            onmouseout="kontakt.src='images/Kontakt.gif';">
                            <img src="http://www.psd-tutorials.de/forum/images/Kontakt.gif" border="0" name="kontakt">
                            </a>
                        </td>
                    </tr>
                    <tr>
						<td>
							<img src="http://www.psd-tutorials.de/forum/images/Valenza_17.gif"  alt="">
						</td>
					</tr>
                    <tr>
                        <td>
                            <a href="bilder.html"
                            onmouseover="bilder.src='images/Bilder_mo.png';"
                            onmouseout="bilder.src='images/Bilder.png';">
                            <img src="http://www.psd-tutorials.de/forum/images/Bilder.png" border="0" name="bilder">
                            </a>
                        </td>
                    </tr>
					<tr>
						<td>
							<img src="http://www.psd-tutorials.de/forum/images/Valenza_19.gif" alt="">
						</td>
					</tr>
			</table>
		</td>
	<td valign="top">
			<img src="http://www.psd-tutorials.de/forum/images/Content_Bilder.gif" alt="">
	</td>

</tr>
</table>
</center>
</body>
</html>

Edit by Doitsu:
Dieses Forum wieder.. Er/Sie greift natuerlich nicht auf Bilder von psd-tutorials zu.

Doitsu · 06.05.2011

AW: Cellspacing Firefox/IE funktioniert nicht

Also.

1. Wozu ist der <script>-Bereich oben? Den benutzt du doch gar nicht?
2. baut man ein Menue nicht mit einer Tabelle, sonder mit einer Liste.

Listamatic: Rollover lists

Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

Aspire · 06.05.2011

AW: Cellspacing Firefox/IE funktioniert nicht

Der Skript Bereich wird noch genutzt, ist noch nicht drin.
Warum sollte man es nicht mit einer Tabelle machen?

Hilft mir leider bei meiner Frage an sich nicht viel.

Doitsu · 06.05.2011

AW: Cellspacing Firefox/IE funktioniert nicht

Weil man eine Tabelle, wie der Name schon sagt, benutzt um Sachen tabellarisch anzuzeigen. Nicht um ein Layout zu entwerfen - die Methode ist nicht mehr aktuell.

Aber naja, wenn du es so haben willst - von mir aus.

Schau mal was passier wenn du die line-height & font-size in der Tabelle auf 1px setzt.

Ansonsten waere ein Link zur Seite super, sofern du sie online hast.. Dann kann man dort besser gucken. Oder lade dir mal das AddOn 'Firebug' fuer den Firefox runter, damit bekommst du schnell raus wieso das so angezeigt wird.

sokie · 06.05.2011

AW: Cellspacing Firefox/IE funktioniert nicht

Aspire schrieb:
Der Skript Bereich wird noch genutzt, ist noch nicht drin.
Warum sollte man es nicht mit einer Tabelle machen?

Hilft mir leider bei meiner Frage an sich nicht viel.

wenn man moderne Browser mit zeitgemässem html und css beschickt, gibt es solche Probleme erst gar nicht.
Leg das einfach als liste an, und dann siehst Du warum Dir die Antwort sehr wohl mit dem Problem witerhilft - es kommt nämlich gar nicht erst auf.

Herr_D · 06.05.2011

AW: Cellspacing Firefox/IE funktioniert nicht

entferne die "leerzeichen"....

stattz.B
<td>
<img>
</td>

<td><img></td>

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

	<head>
		<title>Valenza</title>
		<script language="JavaScript">
<!--
button1= new Image();
button1.src = "/images/Startseite.gif"
button2= new Image();
button2.src = "/images/Startseite_mo.png"
button3= new Image();
button3.src = "/images/Produkte.gif"
button4= new Image();
button4.src = "/images/Produkte_mo.png"
button5= new Image();
button5.src = "/images/Algenmaske.gif"
button6= new Image();
button6.src = "/images/Algenmaske_mo.png"
button7= new Image();
button7.src = "/images/Arganoel.gif"
button8= new Image();
button8.src = "/images/Arganoel_mo.png"
button9= new Image();
button9.src = "/images/Tonikum.gif"
button10= new Image();
button10.src = "/images/Tonikum_mo.png"
button13= new Image();
button13.src = "/images/Bilder.png"
button14= new Image();
button14.src = "/images/Bilder_mo.png"
button11= new Image();
button11.src = "/images/Waschbutter.gif"
button12= new Image();
button12.src = "/images/Waschbutter_mo.png"

button15= new Image();
button15.src = "/images/Algenmaske-content.png"
button15= new Image();
button15.src = "/images/Tonikum-content.png"
button15= new Image();
button15.src = "/images/Waschbutter-content.png"
button15= new Image();
button15.src = "/images/Arganoel-content.png"
button15= new Image();
button15.src = "/images/Produkte-content.png"
button15= new Image();
button15.src = "/images/Kontakt-content.png" -->

</script>
		<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}


</style>
	</head>

	<body bgcolor="#d3c677" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
		<center>
			<table id="Table_01" width="800" border="0" cellspacing="0" cellpadding="0" height="600" top-margin="0">
				<tr>
					<td valign="top"><img src="/images/Startseite-content.png" alt=""></td>
					<td valign="top">
						<table border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td><img src="/images/Valenza_02.gif" alt=""></td>
							</tr>
							<tr>
								<td><a onmouseover="startseite.src='images/Startseite_mo.png';" onmouseout="startseite.src='images/Startseite.gif';" href="index.html"><img src="/images/Startseite.gif" alt="startseite" name="startseite" border="0"> </a></td>
							</tr>
							<tr>
								<td><img src="/images/Valenza_05.gif" alt=""></td>
							</tr>
							<tr>
								<td><a onmouseover="produkte.src='images/Produkte_mo.png';" onmouseout="produkte.src='images/Produkte.gif';" href="produkte.html"><img src="/images/Produkte.gif" alt="produkte" name="produkte" border="0"> </a></td>
							</tr>
							<tr>
								<td><img src="/images/Valenza_07.gif" alt=""></td>
							</tr>
							<tr>
								<td><a onmouseover="algenmaske.src='images/Algenmaske_mo.png';" onmouseout="algenmaske.src='images/Algenmaske.gif';" href="algenmaske.html"><img src="/images/Algenmaske.gif" name="algenmaske" border="0"> </a></td>
							</tr>
							<tr>
								<td><img src="/images/Valenza_09.gif" alt="" height="17" width="145"></td>
							</tr>
							<tr>
								<td><a onmouseover="tonikum.src='images/Tonikum_mo.png';" onmouseout="tonikum.src='images/Tonikum.gif';" href="tonikum.html"><img src="/images/Tonikum.gif" name="tonikum" border="0"> </a></td>
							</tr>
							<tr>
								<td><img src="/images/Valenza_11.gif" alt=""></td>
							</tr>
							<tr>
								<td><a onmouseover="arganoel.src='images/Arganoel_mo.png';" onmouseout="arganoel.src='images/Arganoel.gif';" href="arganoel.html"><img src="/images/arganoel.gif" name="arganoel" border="0"> </a></td>
							</tr>
							<tr>
								<td><img src="/images/Valenza_13.gif" alt=""></td>
							</tr>
							<tr>
								<td><a onmouseover="waschbutter.src='images/Waschbutter_mo.png';" onmouseout="waschbutter.src='images/Waschbutter.gif';" href="waschbutter.html"><img src="/images/waschbutter.gif" name="waschbutter" border="0"> </a></td>
							</tr>
							<tr>
								<td><img src="/images/Valenza_15.gif" alt=""></td>
							</tr>
							<tr>
								<td><a onmouseover="kontakt.src='images/Kontakt_mo.png';" onmouseout="kontakt.src='images/Kontakt.gif';" href="kontakt.html"><img src="/images/Kontakt.gif" name="kontakt" border="0"> </a></td>
							</tr>
							<tr>
								<td><img src="/images/Valenza_17.gif" alt=""></td>
							</tr>
							<tr>
								<td><a onmouseover="bilder.src='images/Bilder_mo.png';" onmouseout="bilder.src='images/Bilder.png';" href="bilder.html"><img src="/images/Bilder.png" name="bilder" border="0"> </a></td>
							</tr>
							<tr>
								<td><img src="/images/Valenza_19.gif" alt=""></td>
							</tr>
						</table>
					</td>
					<td valign="top"><img src="/images/Content_Bilder.gif" alt=""></td>
				</tr>
			</table>
		</center>
	</body>

</html>

Allerdings solltest du wirklich anfangen modernes html zu schreiben