IE zerreißt Tabelle - Firefox machts "richtig" von Harlequin, 29.01.2009 12:17

IE zerreißt Tabelle - Firefox machts "richtig"

Josefk 28.01.2009 21:40

html

Hallo zusammen,

hab wieder mal ein Problem mit dem IE und einer Tabelle. Warum nur zerbricht er mir die Tabelle immer. Der Firefox machts da schon richtiger, auch wenn ich nicht behaupten will, dass er genau das amcht, was ich probrammiert habe, sondern eher, dass er meinen Fehler super ausbessert. Der IE ist da schon zickiger.
Woran kanns liegen? http://validator.w3.org/check hilft da auch nicht viel weiter. Ich poste mal meinen Code...
PS: ich weiß ich nutze viele deprecated Sachen und schreibe auch nie einen alternativen Text zu einem Bild, aber daran kanns doch nicht liegen, oder?

Das gibt mein PHP File aus:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >  
<title>sprout</title>  
</head>  
<body bgcolor="#B8AC73" link="#803131" vlink="#803131" alink="#803131">  
<table align="center" width="902" border="0" cellspacing="0" cellpadding="0">  
  <tr>  
    <td width="183" height="105"><img src="pics/11_sprout.gif" alt="sprout" border="0" usemap="#sprout_map" ></td>  
    <td width="719" height="105" colspan="3"><img src="pics/12_top.gif" ></td>  
  </tr>  
  
  <tr>  
    <td width="902" height="45" colspan="4"><img src="pics/21_row_blank.gif" ></td>  
  </tr>  
  <tr>  
    <td width="183" height="102" rowspan="2">  
<img src="pics/31_menue1.gif" border="0" usemap="#du_map">  
 </td>  
    <td width="719" height="14" colspan="3"><img src="pics/311_rowtop.gif" ></td>  
  </tr>  
  <tr>  
  
    <td height="88" width="18"><img src="pics/312_left.gif" ></td>  
    <td height="505" width="504" rowspan="4"  
  background="pics/mainback.gif">  
  
  
 </td>  
    <td height="505" width="197" rowspan="4"><img src="pics/right.gif" ></td>  
  </tr>  
  <tr>  
    <td width ="183" height="112">  
<img src="pics/41_menue2.gif" border="0" usemap="#wir_map">  
 </td>  
  
    <td width="18" heigt="112" ><img src="pics/42_left.gif" width="18" height="112" ></td>  
  </tr>  
  <tr>  
    <td width="183" heigt="103">  
<img src="pics/51_menue3.gif" border="0" usemap="#sie_map">  
 </td>  
    <td width="18" height="103"><img src="pics/52_left.gif" width="18" height="103" ></td>  
  </tr>  
  <tr>  
    <td width="183" height="225" rowspan="2">&nbsp;</td>  
  
    <td width="18" height="225" rowspan="2"><img src="pics/62_left.gif" ></td>  
  </tr>  
  <tr>  
    <td width="504" height="23"><img src="pics/71_bottom.gif" border="0" usemap="#bottom_map" ></td>  
    <td width="197" height="23"><img src="pics/72_bottom.gif" ></td>  
  </tr>  
</table>  
  
<map name="du_map" id="du_map">  
<area shape="circle" coords="50,50,45" href="secure.php?section=du" >  
</map>  
  
<map name="wir_map" id="wir_map">  
<area shape="circle" coords="48,57,46" href="secure.php?section=wir" >  
</map>  
<map name="sie_map" id="sie_map">  
<area shape="circle" coords="49,54,45" href="secure.php?section=sie" >  
</map>  
<map name="du_ext_map" id="du_ext_map">  
<area shape="rect" coords="99,8,180,32" href="secure.php?section=du&amp;subsection=1" >  
<area shape="rect" coords="99,66,179,88" href="secure.php?section=du&amp;subsection=3" >  
<area shape="rect" coords="99,36,180,61" href="secure.php?section=du&amp;subsection=2" >  
</map>  
<map name="wir_ext_map" id="wir_ext_map">  
<area shape="rect" coords="99,16,178,41" href="secure.php?section=wir&amp;subsection=1" >  
<area shape="rect" coords="99,46,176,70" href="secure.php?section=wir&amp;subsection=2" >  
<area shape="rect" coords="99,74,178,95" href="secure.php?section=wir&amp;subsection=3" >  
</map>  
<map name="sie_ext_map" id="sie_ext_map">  
  
<area shape="rect" coords="97,12,175,36" href="secure.php?section=sie&amp;subsection=1" >  
<area shape="rect" coords="97,42,174,66" href="secure.php?section=sie&amp;subsection=2" >  
<area shape="rect" coords="96,69,174,92" href="secure.php?section=sie&amp;subsection=3" >  
</map>  
<map name="sprout_map" id="sprout_map"><area shape="rect" coords="5,40,178,98" href="secure.php?section=main" >  
</map>  
<map name="bottom_map" id="bottom_map">  
<area shape="rect" coords="201,1,245,17" href="secure.php?section=kontakt" >  
<area shape="rect" coords="250,2,304,17" href="secure.php?section=impressum" >  
</map>  
</body>  
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

IE zerreißt Tabelle - Firefox machts "richtig"

Harlequin 29.01.2009 12:17

html

– Informationen zu den Bewertungsregeln

Yerf!

Woran kanns liegen?

Vermutlich irgendwo ein Fehler in den row- und colspan Angaben.

http://validator.w3.org/check hilft da auch nicht viel weiter.

Der kann Tabellen leider nicht auf vollständigkeit (was Zellen angeht) prüfen.

PS: ich weiß ich nutze viele deprecated Sachen und schreibe auch nie einen alternativen Text zu einem Bild, aber daran kanns doch nicht liegen, oder?

Irgendwie doch. Verabschiede dich von Tabellenlayouts und benutze http://de.selfhtml.org/css/layouts/index.htm@title=CSS. Das ist auf dauer übersichtlicher, flexibler und lässt sich mit Tools wie FireBug auch wesentlich besser debuggen.

Gruß,

Harlequin

--

Beitrag melden

– Informationen zu den Bewertungsregeln

IE zerreißt Tabelle - Firefox machts "richtig"

josefk 29.01.2009 13:05

html

– Informationen zu den Bewertungsregeln

arrg, naja dann muss ich mir doch mal css-Tutorials durchlesen. Damn.
Hab eingelich keine Zeit für sowas, aber das Problem mit den Tabellen hatte ich jetzt schon 2 mal. Ab einer bestimmten Komplexität funzt das nicht mehr mit dem IE. Habs einmal per Hand und einmal mit Dreamweaver gemacht, und beidemale das gleiche Problem :)
Naja. Hat jemand gute Tutorialvorschläge parat?

Beitrag melden

– Informationen zu den Bewertungsregeln

IE zerreißt Tabelle - Firefox machts "richtig"

josefk 29.01.2009 17:21

html

– Informationen zu den Bewertungsregeln

Sodala, hab das ganze jetzt mal mit CSS gemacht. Leider haben mich die relativen angaben und das "umfliesen" von Elementen fast Verrückt gemacht, daher alles absolut. Leider zeigt mit der Firefox nun den roten Klecks rechts an und der IE links. Ich will das Dingens aber in der Mitte. :)

  
<!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=iso-8859-1" />  
<title>sprout</title>  
<style type="text/css" media="screen">  
 body  
 {  
  margin: 1em auto;  
  padding: 0;  
  font: 85% arial, hevetica, sans-serif;  
  text-align: center;  
  color: #505367;  
  background-color: #B8AC73;  
 }  
 #container  
 {  
     margin: 1em auto;  
  position: absolute;  
  width: 902px;  
  height: 692px;  
  text-align: left;  
  background-color: red;  
  border: 0px;  
 }  
 #11_sprout  
 {  
  position: absolute;  
  left: 0px;  
  top: 0px;  
  width: 183px;  
  height: 105px;  
 }  
 #12_top  
 {  
  position: absolute;  
  top: 0px;  
  right: 0px;  
  width: 719px;  
  height: 105px;  
 }  
 #21_row_blank  
 {  
  position: absolute;  
  top: 105px;  
  left: 0px;  
  height: 45px;  
  width: 902px;  
 }  
 #31_menue1  
 {  
  position: absolute;  
  top: 150px;  
  left: 0px;  
  height: 102px;  
  width: 183px;  
 }  
 #311_rowtop  
 {  
  position: absolute;  
  top: 150px;  
  right: 0px;  
  width: 719px;  
  height: 14px;  
 }  
 #312_left  
 {  
  position: absolute;  
  top: 164px;  
  left: 183px;  
  width: 18px;  
  height: 88px;  
 }  
 #41_menue2  
 {  
  position: absolute;  
  top: 252px;  
  left: 0px;  
  width: 183px;  
  height: 112px;  
 }  
 #42_left  
 {  
  position: absolute;  
  top: 252px;  
  left: 183px;  
  width: 18px;  
  height: 112px;  
 }  
 #51_menue3  
 {  
  position: absolute;  
  top: 364px;  
  left: 0px;  
  width: 183px;  
  height: 103px;  
 }  
 #52_left  
 {  
  position: absolute;  
  top: 364px;  
  left: 183px;  
  width: 18px;  
  height: 103px;  
 }  
 #blank  
 {  
  position: absolute;  
  top: 467px;  
  left: 0px;  
  height: 225px;  
  width: 183px;  
 }  
 #62_left  
 {  
  position: absolute;  
  top: 467px;  
  left: 183px;  
  height: 225px;  
  width: 18px;  
 }  
 #content  
 {  
  position: absolute;  
  top: 164px;  
  left: 201px;  
  height: 505px;  
  width: 504px;  
 }  
 #71_bottom  
 {  
  position: absolute;  
  top: 669px;  
  left: 201px;  
  height: 23px;  
  width: 504px;  
 }  
 #72_bottom  
 {  
  position: absolute;  
  top: 669px;  
  right: 0px;  
  height: 23px;  
  width: 197px;  
 }  
 #right  
 {  
  position: absolute;  
  top: 164px;  
  right: 0px;  
  height: 505px;  
  width: 197px;  
 }  
</style>  
  
</head>  
  
<body>  
<div id="container">  
 <div id="11_sprout"></div>  
 <div id="12_top"></div>  
 <div id="21_row_blank"></div>  
 <div id="31_menue1"></div>  
 <div id="41_menue2"></div>  
 <div id="51_menue3"></div>  
 <div id="311_rowtop"></div>  
 <div id="312_left"></div>  
 <div id="42_left"></div>  
 <div id="52_left"></div>  
 <div id="right"></div>  
 <div id="blank"></div>  
 <div id="62_left"></div>  
 <div id="71_bottom"></div>  
 <div id="72_bottom"></div>  
 <div id="content"></div>  
</div>  
  
</body>  
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Josefk: IE zerreißt Tabelle - Firefox machts "richtig"

IE zerreißt Tabelle - Firefox machts "richtig"

IE zerreißt Tabelle - Firefox machts "richtig"

IE zerreißt Tabelle - Firefox machts "richtig"

IE zerreißt Tabelle - Firefox machts "richtig"

IE zerreißt Tabelle - Firefox machts "richtig"