Hallo ihr Lieben!
Ich häng gerade ein bisschen an einer Seite und erhoffe mir Hilfe von euch ;)
Zuerst gleich mal der Quelltext.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Eisdiele Fontanella Metten</title>
<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "img/eisf_k.jpg"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "img/eisf_h.gif"; /* erste Highlight-Grafik */
Normal2 = new Image();
Normal2.src = "img/portionierer_k.jpg"; /* erste Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "img/portionierer_h.gif"; /* erste Highlight-Grafik */
Normal3 = new Image();
Normal3.src = "img/eisbecherf_k.jpg"; /* zweite Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "img/eisbecher_h.gif"; /* zweite Highlight-Grafik */
Normal4 = new Image();
Normal4.src = "img/eistorte_k.jpg"; /* dritte Standard-Grafik */
Highlight4 = new Image();
Highlight4.src = "img/eistorte_h.gif"; /* dritte Highlight-Grafik */
/* usw. fuer alle weiteren zu benutzenden Grafiken */
function Bildwechsel(Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
<style type="text/css">
@import"style.css";
body {
background-color: #bea586;
background-image: url(img/bg.jpg);
}
</style></head>
<body>
<table id="wrapper" width="100%" height="100%" border="0">
<td>
<table width="920" height="428" align="center" cellpadding="0" cellspacing="0" valign="center" border="1" style="border: 1px solid #bea586">
<td style="background-image:url(img/loeffel.jpg)jj 0"hrh"=" valign="bottom">
<table border="0" valign="bottom" height="100%" width="100%" cellpadding="0" cellspacing="0">
<td style="background: transparent;" valign="bottom" width="198px" height="107px">
<a href="eis_main.html" target="_self"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"><img src="img/eisf_k.jpg" width="198px" height="109px"
border="0" alt="Eis Fontanella"><a>
</td>
<td style="background: transparent;" valign="bottom" width="109px" height="109px">
<a href="team_main.html" target="_self"
onMouseOver="Bildwechsel(1,Highlight2)"
onMouseOut="Bildwechsel(1,Normal2)"><img src="img/portionierer_k.jpg" width="109px" height="109px"
border="0" alt="Team"></a>
</td>
<td style="background: transparent;" valign="bottom" width="112px" height="109px">
<a href="eis_main.html" target="_self"
onMouseOver="Bildwechsel(2,Highlight3)"
onMouseOut="Bildwechsel(2,Normal3)"><img src="img/eisbecherf_k.jpg" width="112px" height="109px"
border="0" alt="Eisbecher"></a>
</td>
<td style="background: transparent;" valign="bottom" width="501px" height="109px">
<a href="eis_main.html" target="_self"
onMouseOver="Bildwechsel(3,Highlight4)"
onMouseOut="Bildwechsel(3,Normal4)"><img src="img/eistorte_k.jpg" width="501px" height="109px"
border="0" alt="Specials"></a>
</td>
</table>
</td>
</table>
</td>
</table>
</body>
</html>
Sorry für den ganzen Code, aber da ich keinen blassen Schimmer hab wo der Fehler liegt hab ich mal lieber alles rein getan
Hier die Problemstelle
<td style="background: transparent;" valign="bottom" width="198px" height="107px">
<a href="eis_main.html" target="_self"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"><img src="img/eisf_k.jpg" width="198px" height="109px"
border="0" alt="Eis Fontanella"><a>
</td>
Dieses Bild wird mir im Firefox ca. 2 Pixel höher ausgerichtet. Also nicht am Tabellenrand wie alle anderen Bilder.
Screenshot bei Firefoxdarstellung
Dadurch hab ich dann natürlich einen Knick drin.
Mit Safari und Opera wird mir alles richtig dargestellt.
Bin für jede Hilfe dankbar!