✔ Grafiken verschieben sich im Firefox

Status
Nicht offen für weitere Antworten.
S

sunflower84

Erfahrenes Mitglied
Hi Leute

Ich habe ein Problem mit meinen Grafiken auf der Webseite. Da sich die Grafiken im Header und die Buttons im Firefox alle nach oben verschieben. Aber im IE sieht es alles so aus wie es ein soll.
Hat jemand eine Ahnung woran das liegt? Ich habe schon gegoogelt und auch ein paar Sachen ausprobiert aber geholfen hat überhaupt nichts.
Hier der Link:http://www.edl.de/edl/versuch/

HTML: 
<!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>
<title>edl</title>
<style type="text/css">

               p{ font-size:80%;
        		line-height:40%;
        		font-family:Helvetica,Arial,sans-serif;margin-top:10px; margin-bottom:10px;;
                 }
</style>

<meta name="author" content="nschlapp" />
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />
</head>
<body text="#000000" bgcolor="#BDBDBD" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table cellSpacing="0" cellPadding="0" width="700" align="center" border="0" bgcolor="#FFFFFF" summary="Layout Tabelle">
  <tr>
    <td valign="top" align="left" colspan="2" width="700">
      <img src="header3.jpg" width="700" height="100" border="0" alt="header" /></a><br />
      <img src="Streifen2.jpg" width="700" height="20" border="0" alt="header" /></a>
      <br>
    </td>
  </tr>
  <tr>
    <td width="150">
      <a href="webdesign.htm"><img src="Button_test2.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test3.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test4.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test5.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test7.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="Impressum.html"><img src="Button_test8.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <br><br><br>   <br><br><br>      <br><br><br>      <br><br><br>      <br><br><br>      <br><br><br>
    </td>
    <td width="550" valign="top"><br>
      <p></p>
    </td>
  </tr>
</table>

 </body>
</html>

Ich hoffe es kann mir jemand weiter helfen
Lg
Sunflower
 
Versuch es mal mit dem HTML-Attribut valign="top":

HTML: 
<td width="150" valign="top">
      <a href="webdesign.htm"><img src="Button_test2.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test3.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test4.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test5.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test7.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="Impressum.html"><img src="Button_test8.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
</td>
 
Dann entferne mal das rotmarkierte <br> im Quelltext:

Code: 
<td valign="top" align="left" colspan="2" width="700">
      <img src="header3.jpg" width="700" height="100" border="0" alt="header" /></a><br />
      <img src="Streifen2.jpg" width="700" height="20" border="0" alt="header" /></a>
      <br>
    </td>
 
Letzterer Tipp erzielt bei mir im Firefox und IE einen einheitlichen Abstand.

Hier der Quelltext der Testseite:
HTML: 
<!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>
<title>edl</title>
<style type="text/css">

               p{ font-size:80%;
                        line-height:40%;
                        font-family:Helvetica,Arial,sans-serif;margin-top:10px; margin-bottom:10px;;
                 }
</style>

<meta name="author" content="nschlapp" />
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />
</head>
<body text="#000000" bgcolor="#BDBDBD" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<table cellSpacing="0" cellPadding="0" width="700" align="center" border="1" bgcolor="#FFFFFF" summary="Layout Tabelle">
  <tr>
    <td valign="top" align="left" colspan="2" width="700">
      <img src="header3.jpg" width="700" height="100" border="0" alt="header" /></a><br />
      <img src="Streifen2.jpg" width="700" height="20" border="0" alt="header" /></a></td>
  </tr>
  <tr>
    <td width="150">
      <a href="webdesign.htm"><img src="Button_test2.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test3.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test4.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test5.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="webdesign.htm"><img src="Button_test7.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <a href="Impressum.html"><img src="Button_test8.jpg" width="150" height="40" border="0" alt="WEBDESIGN" /></a><br />
      <br><br><br>   <br><br><br>      <br><br><br>      <br><br><br>      <br><br><br>      <br><br><br>
    </td>
    <td width="550" valign="top"><br>
      <p></p>
    </td>
  </tr>
</table>

 </body>
</html>
 
Vielen Dank. Die Grafiken bleiben jetzt wo sie sind.
Aber leider verschiebt sich jetzt der Text. Aber es sieht so aus das sich im Firefox jetzt das komplette Layout nach oben verschiebt.
Wenn ihr auf die URL geht die ich oben angegeben habe dann seht ihr was ich meine. Ich habe da mal zum testen ein Wort eingefügt
 
Entferne mal das rotmarkierte <br> im Quelltext:

Code: 
<td width="550" valign="top"><br>
      <p>Test</p>
    </td>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück