Supportnet / Forum / Webseiten/HTML
FF und IE, richtig Tabellen coden
Frage
Hallo,
ich habe ein Problem und zwar geht es darum, dass Tabellen im FireFox anders angezeigt werden als im Internet Explorer, ich erläutere das mal:
Erst mal die Seite:
http://richie-stringini.us/
Wenn ihr auf z.B. deutsche Version der Seite mit IE kommt, wird es richtig angezeigt: zwischen der oberen Internetleiste und dem Headerbild ist keine "Luft" dazwischen, wenn ihr jedoch mit FireFoy auf die Seite geht ist da zwischen dem headerbild und ganz oben etwas platz... Ich hoffe ihr wisst was ich meine, und meine Frage ist es jetzt, was muss ich im Code ändern, damit das auch im FireFox richtig angezeigt wird. Hier ist der Code:
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Richie-Stringini.us</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<style type="text/css">
Body
{background-image: url(hg.png);}
.image { background: #ffffff; border: #f1e6f6 2px solid}
a: IMG { background: #ffffff; border: #f1e6f6 2px solid}
a:link IMG { background: #ffffff; border: #f1e6f6 2px solid}
a:active IMG { background: #ffffff; border: #f1e6f6 2px solid}
a:visited IMG {background: #ffffff; border: #f1e6f6 2px solid}
a:hover IMG {background: #ffffff; border: #070827 2px solid}
img {
border: none;
border-left-color:#58476f;
border-bottom-color:#58476f;
border-top-color:#58476f;
border-right-color:#58476f;
}
a:link{color:#6a6472; text-decoration:none;}
a:visited {color:#6a6472; text-decoration:none;}
a:active{color:#6a6472; text-decoration:none;}
a:hover{color:#e31151; text-decoration:ne-resize;font-weight:bold;}
BODY { scrollbar-DarkShadow-Color:#6a6472;
scrollbar-Track-Color:#f1e6f6;
scrollbar-Face-Color:#f1e6f6;
scrollbar-Shadow-Color:#6a6472;
scrollbar-Highlight-Color:#6a6472;
scrollbar-3dLight-Color:#2b2533;
scrollbar-Arrow-Color:#f1e6f6;}
-->
</style>
<script>
/*
Gradual-Highlight Image Script II-
By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
Permission granted to Dynamicdrive.com to feature script in archive
For full source to script, visit http://dynamicdrive.com
*/
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
/* object - image to be faded (actual object, not name);
* destop - destination transparency level (ie 80, for mostly solid)
* rate - time in milliseconds between trasparency changes (best under 100)
* delta - amount of change each time (ie 5, for 5% change in transparency)
*/
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too
setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}
clearTimeout(nereidFadeTimers[object.sourceIndex]);
diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body link="#fd3b77" vlink="#fd3b77" alink="#fd3b77" topmargin="0px" bgcolor="#6a6472" style="background-color: #acabad">
<center>
<center>
<table bgcolor="#2a2532" id="table2" style="margin:0000;border-collapse:collapse;">
<tr>
<td style="padding:0px;" width="592" height="270" bottom="0px" topmargin="0px"> <div align="center"><font size="1" face="Tahoma">
<img src="header_new.png" width="592" height="418"> </font></div></td>
</tr>
</table>
<table style="margin:0000;border-collapse:collapse;" >
<tr>
<td style="padding:0px;" width="653" height="10"> <div align="center"><font size="1" face="Tahoma">
<img src="balken_dunkel.jpg" width="653" height="10" alt="" border="0"></font></div></td>
</tr>
</table>
<table id="table2" style="margin:0000;border-collapse:collapse;" >
<tr>
<td width="653" height="10" bgcolor="#2a2431" style="padding:0px;"><div align="center"><img src="menu.png" width="653" height="20" border="0" alt="" usemap="#Welcome"></div></td>
<map name="Welcome" id="Welcome">
<area target="I1" shape="rect" coords="203,2,258,22" href="http://richienews.kilu.de/paranews_v3.4.21/news.php">
<area target="I1" shape="rect" coords="277,1,339,23" href="Richie.htm">
<area target="I1" shape="rect" coords="356,2,420,20" href="media.htm">
<area target="I1" shape="rect" coords="438,3,528,20" href="stuff4u.htm">
<area target="I1" shape="rect" coords="540,2,580,20" href="Online.htm">
<area target="I1" shape="rect" coords="594,3,650,17" href="www.htm">
</map>
</tr>
</table>
<table id="table2" style="margin:0000;border-collapse:collapse;" dwcopytype="CopyTableRow">
<tr>
<td style="padding:0px;" width="653" height="10"> <div align="center"><font size="1" face="Tahoma">
<img src="balken_dunkel.jpg" width="653" height="10" alt="" border="0"></font></div></td>
</tr>
</table>
<font size="1" face="Tahoma"><table width="653" style="margin:0000;border-collapse:collapse;" id="table14" bgcolor="#2b2533">
<tr bgcolor="#2b2533">
<td width="207" align="left" valign="top" bgcolor="#2b2533" style="padding:0px;">
<font size="1" face="Tahoma"><img border="0" src="lay_elite.png" width="201" height="18" alt=""></font>
<p></p>
<p></p>
<p></p>
<div align="center"><a href="http://still-christina.com/" target="_blank"><img border="1" src="elite_christina.jpg" width="54" height="54" alt="Christina Aguilera"></a>
<a href="http://www.cordless.4fans.net"> </a> <a href="http://www.ashlee.de">
</a> <a href="http://www.mandy-web.org"> </a><a href="http://revolutionary.e-fans.net/" target="_blank"><img src="elite_reavol.jpg" width="54" height="54" border="1" alt="Revolitionary"></a>
<a href="http://musicbitch.de/" target="_blank"><img src="elite_rihanna.jpg" width="54" height="54" border="1" alt="Rhianna"></a>
</div>
<p></p>
<p></p>
<font size="1" face="Tahoma">
<img border="0" src="lay_network.png" width="201" height="18" alt=""></font><p></p>
<p></p>
...
</body>
</html>[/code]
Vielen Dank!
Antwort 1 von derpfleger
Füge einfach im Stylesheet folgendes ein:
body {margin:0px; ....und weitere Def. die in den body-Teil sollen...}
body {margin:0px; ....und weitere Def. die in den body-Teil sollen...}
Antwort 2 von derpfleger
UUps, wollte auf Vorschau klicken...
Die Browser haben unterschiedliche Voreinstellungen für diverse Styleangaben. Macht man also zu diesen Angaben keine eigene Angabe, so weicht unter Umständen die Darstellung vom Gewollten ab.
Die margin-Voreinstellung des FF hat halt ein paar Pixel Außenabstand, während der IE dieses nicht hat. Machst du also für den Außenabstand des body keine Angabe, werden die Browser ihre Voreinstellung wählen. Indem du eine Angabe machst, überschreibst du die Voreinstellungen der Browser damit.
Klar soweit?
Das selbe Problem bezüglich Listeneinträgen wird in dieser FAQ dargestellt.
Gruß derpfleger
Die Browser haben unterschiedliche Voreinstellungen für diverse Styleangaben. Macht man also zu diesen Angaben keine eigene Angabe, so weicht unter Umständen die Darstellung vom Gewollten ab.
Die margin-Voreinstellung des FF hat halt ein paar Pixel Außenabstand, während der IE dieses nicht hat. Machst du also für den Außenabstand des body keine Angabe, werden die Browser ihre Voreinstellung wählen. Indem du eine Angabe machst, überschreibst du die Voreinstellungen der Browser damit.
Klar soweit?
Das selbe Problem bezüglich Listeneinträgen wird in dieser FAQ dargestellt.
Gruß derpfleger
Antwort 3 von Hailie
Heey derpfleger,
vielen Dank für Deine schnelle Antwort, ich habe es jetzt beim Coden des neuen Layouts ausprobiert und es hat geklappt, vielen Dank!
Liebe Grüße,
Marina
vielen Dank für Deine schnelle Antwort, ich habe es jetzt beim Coden des neuen Layouts ausprobiert und es hat geklappt, vielen Dank!
Liebe Grüße,
Marina