Formatierungsprobleme bei Spaltenbreite von Tabelle Firefox/IE von Beat, 30.01.2009 21:05

SELF-Forum

Formatierungsprobleme bei Spaltenbreite von Tabelle Firefox/IE

lakul 30.01.2009 20:38

– Informationen zu den Bewertungsregeln

Hi!

Ich habe eine Tabelle, welche im Firefox korrekt angezeigt wird:

http://141.30.143.244/newnav/campusNavigator?do=karte&do1=dresden

Im IE hingegen wird die Tabelle falsch angezeigt:

http://141.30.143.244/newnav/campusNavigator?do=karte&do1=dresden

Ich weiß man soll nicht soviel Code posten. Aber ich glaube bei der Tabelle ist Vollständigkeit wichtig. Besonderes Augenmerk sei da auf die letzte Zeile gelegt. Ich habe schon etliche Sachen ausprobiert. Die Tabelle z.B ohne CSS gezeichnet, google bemüht, colgroup habe ich auch probiert, aber leider konnte ich den Fehler im IE nicht beheben. Ich weiß das der IE Probleme hat mit der Angabe von Breite und Höhe von Spalten, aber das muss doch irgendwie gehen.

Vielen Vielen Dank schonmal !!!!

Weiter unten poste ich den css Code für die Tabelle.

Die Tabelle hat folgenden Quellcode:

<TABLE class="imgtable" BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="687" HEIGHT="550" >
 <TR>
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="47" HEIGHT="90"><IMG
   NAME="Image10" SRC="Grafiken/CampusKarte/Image1_1x1.gif" WIDTH="47"
   HEIGHT="90" BORDER="0" /></TD>
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="130" HEIGHT="90"><a href="#"
   onMouseOut="MM_swapImgRestore()"
   onMouseOver="MM_swapImage('Image1_1x2','','Grafiken/CampusKarte/Image1_1x2On.gif',1)">
  <img src="Grafiken/CampusKarte/Image1_1x2.gif" alt="Autobahn A4"
   name="Image1_1x2" width="130" height="90" BORDER="0" /></a></TD>
  <TD ROWSPAN="1" COLSPAN="11" WIDTH="510" HEIGHT="90"><IMG
   SRC="Grafiken/CampusKarte/Image1_1x3.gif" NAME="Image12" WIDTH="510"
   HEIGHT="90" BORDER="0" usemap="#Image12Map" /></TD>
 </TR>
 <TR>
  <TD ROWSPAN="1" COLSPAN="13" WIDTH="687" HEIGHT="28"><IMG
   SRC="Grafiken/CampusKarte/Image1_2x1.gif" NAME="Image13" WIDTH="687"
   HEIGHT="28" BORDER="0" usemap="#Image13Map" /></TD>
 </TR>
 <TR>
  <TD ROWSPAN="1" COLSPAN="11" WIDTH="524" HEIGHT="41" ><IMG
   NAME="Image14" SRC="Grafiken/CampusKarte/Image1_3x1.gif" WIDTH="524"
   HEIGHT="41" BORDER="0" /></TD>

  <TD ROWSPAN="1" COLSPAN="1" WIDTH="35" HEIGHT="41"><IMG
   src="Grafiken/CampusKarte/Image1_3x2.gif" NAME="Image1_3x2"
   width="35" height="41" BORDER="0" /></TD>

  <TD ROWSPAN="1" COLSPAN="1" WIDTH="128" HEIGHT="41"><IMG
   NAME="Image16" SRC="Grafiken/CampusKarte/Image1_3x3.gif" WIDTH="128"
   HEIGHT="41" BORDER="0" /></TD>
 </TR>
 <TR style="width:"687">
   <TD ROWSPAN="1" COLSPAN="8" width="450"><IMG
   NAME="Image17" SRC="Grafiken/CampusKarte/Image1_4x1.gif" WIDTH="450"
   HEIGHT="33" BORDER="0" /></TD>

  <TD ROWSPAN="1" COLSPAN="2"><a
   href="campusNavigator?do=karte&do1=Johannstadt"
   onMouseOut="MM_swapImgRestore()"
   onMouseOver="MM_swapImage('Image1_4x2','','Grafiken/CampusKarte/Image1_4x2On.gif',1)">
  <img src="Grafiken/CampusKarte/Image1_4x2.gif" alt="Johannstadt"
   name="Image1_4x2"BORDER="0" /> </a></TD>

  <TD ROWSPAN="1" COLSPAN="3">
  <IMG SRC="Grafiken/CampusKarte/Image1_4x3.gif" NAME="Image19" BORDER="0" usemap="#Image19Map" />
  </TD>
 </TR>
 <TR>
  <TD ROWSPAN="1" COLSPAN="13" WIDTH="687" HEIGHT="102"><IMG
   SRC="Grafiken/CampusKarte/Image1_5x1.gif" NAME="Image110" WIDTH="687"
   HEIGHT="102" BORDER="0" usemap="#Image110Map" /></TD>
 </TR>
 <TR>
  <TD ROWSPAN="1" COLSPAN="4" WIDTH="251" HEIGHT="32"><IMG
   NAME="Image111" SRC="Grafiken/CampusKarte/Image1_6x1.gif" WIDTH="251"
   HEIGHT="32" BORDER="0" /></TD>
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="42" HEIGHT="32"><a
   href="http://www.db.de/site/bahn/de/start.html" target="_blank"
   onMouseOut="MM_swapImgRestore()"
   onMouseOver="MM_swapImage('Image1_6x2','','Grafiken/CampusKarte/Image1_6x2On.gif',1)">
  <img src="Grafiken/CampusKarte/Image1_6x2.gif" alt="Hauptbahnhof"
   name="Image1_6x2" width="42" height="32" BORDER="0" /> </a></TD>
  <TD ROWSPAN="1" COLSPAN="8" WIDTH="394" HEIGHT="32"><IMG
   NAME="Image111" SRC="Grafiken/CampusKarte/Image1_6x3.gif" WIDTH="394"
   HEIGHT="32" BORDER="0" /></TD>
 </TR>
 <TR>
  <TD ROWSPAN="1" COLSPAN="13" WIDTH="687" HEIGHT="46">
  <img src="Grafiken/CampusKarte/Image1_7x1.gif" NAME="Image114" WIDTH="687"
   HEIGHT="46" BORDER="0" usemap="#Image114Map" /></TD>
 </TR>
 <TR>
  <TD ROWSPAN="2" COLSPAN="3" WIDTH="212" HEIGHT="114"><IMG
   NAME="Image115" SRC="Grafiken/CampusKarte/Image1_8x1.gif" WIDTH="212"
   HEIGHT="114" BORDER="0" /></TD>
  <TD ROWSPAN="2" COLSPAN="3" WIDTH="118" HEIGHT="114"><a
   href="campusNavigator?do=karte&do1=Campus"
   onMouseOut="MM_swapImgRestore()"
   onMouseOver="MM_swapImage('Image1_8x2','','Grafiken/CampusKarte/Image1_8x2On.gif',1)">
  <img src="Grafiken/CampusKarte/Image1_8x2.gif"
   alt="Campus Südvorstadt" name="Image1_8x2" width="118" height="114"
   BORDER="0" /> </a></TD>
  <TD ROWSPAN="1" COLSPAN="1" WIDTH="68" HEIGHT="56"><IMG
   NAME="Image117" SRC="Grafiken/CampusKarte/Image1_8x3.gif" WIDTH="68"
   HEIGHT="56" BORDER="0" /></TD>
  <TD ROWSPAN="1" COLSPAN="2" WIDTH="55" HEIGHT="56"><a
   href="campusNavigator?do=karte&do1=Weberplatz"
   onMouseOut="MM_swapImgRestore()"
   onMouseOver="MM_swapImage('Image1_8x4','','Grafiken/CampusKarte/Image1_8x4On.gif',1)">
  <img src="Grafiken/CampusKarte/Image1_8x4.gif" alt="Weberplatz"
   name="Image1_8x4" width="55" height="56" BORDER="0" /> </a></TD>
  <TD ROWSPAN="1" COLSPAN="4" WIDTH="234" HEIGHT="56"><IMG
   NAME="Image119" SRC="Grafiken/CampusKarte/Image1_8x5.gif"
   WIDTH="234" HEIGHT="56" BORDER="0" /></TD>
 </TR>
 <TR>
  <TD ROWSPAN="1" COLSPAN="7" WIDTH="357" HEIGHT="58">
  <IMG SRC="Grafiken/CampusKarte/Image1_9x1.gif" NAME="Image120"
   WIDTH="357" HEIGHT="58" BORDER="0" usemap="#Image120Map" /></TD>
 </TR>
 <TR>
  <TD ROWSPAN="1" COLSPAN="13" WIDTH="687" HEIGHT="64">
  <IMG SRC="Grafiken/CampusKarte/Image1_10x1.gif" NAME="Image121"
   WIDTH="687" HEIGHT="64" BORDER="0" usemap="#Image121Map" /></TD>
  </TR>
 <TR>
  <TD WIDTH="47" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="47" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="130" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="130" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="35" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="35" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="39" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="39" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="42" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="42" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="37" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="37" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="68" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="68" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="52" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="52" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="3" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="3" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="32" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="32" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="39" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="39" HEIGHT="1" BORDER="0" />
  </TD>
  <TD WIDTH="35" HEIGHT="1"><IMG NAME="blank"
   SRC="Grafiken/CampusKarte/blank.gif" WIDTH="35" HEIGHT="1" BORDER="0" />
  </TD>

  <!-- Creation of the button to Pirna-Copitz -->


  <TD ROWSPAN="1" COLSPAN="13" WIDTH="100" HEIGHT="40"><a
   href="campusNavigator?do=karte&do1=PirnaCopitz"
   onMouseOut="MM_swapImgRestore()"
   onMouseOver="MM_swapImage('','','Grafiken/CampusKarte/Teilplan-Pirna.gif',1)">

  <IMG SRC="Grafiken/CampusKarte/Teilplan-Pirna.gif"
   NAME="TeilplanPirna" WIDTH="100" HEIGHT="40" BORDER="0"
   usemap="#TeilplanPirnaMap" /> </a></TD>
 </TR>
</TABLE>

Der CSS Code für die Tabelle:

/* imagetabelle*/
#bodyContent table.imgtable {
 width: auto;
 margin: 0 0 0 0;
/*    margin: 0.5em 1.5625em 1.5625em 0;    origial werte*/
 border:none;
 border-bottom-width:0;
}
#bodyContent table.imgtable tr {border:none; }
#bodyContent table.imgtable td {
 border:none;
 padding: 0em;
 text-align:left;
 color:#FFF;
 background-color:#FFF;
 }

/*floatende imagetabelle*/
#bodyContent table.imgtablefloat, .newsItemImage table.imgtablefloat, .newsView table.imgtablefloat
 {
 float : left;
    margin: 0 0 0 0;
/*    margin: 0.25em 1em 0 0;    origial werte*/
 border:none;
}

#bodyContent table.imgtablefloat td, .newsItemImage table.imgtablefloat td, .newsView table.imgtablefloat td {
 border:none;
 padding:0em;
/* padding:0.375em;    origial werte*/
 text-align:left;
 color:#FFF;
 background-color:#A4AEB8;
 }

Beitrag melden

– Informationen zu den Bewertungsregeln

Formatierungsprobleme bei Spaltenbreite von Tabelle Firefox/IE
Beat Homepage des Autors 30.01.2009 21:05

css
– Informationen zu den Bewertungsregeln
Vielen Vielen Dank schonmal !!!!

Hast du die Seite mal validiert?
Ich weiss nämlich nicht, was eine 'richtige' Darstellung im FF ist.

mfg Beat

--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Formatierungsprobleme bei Spaltenbreite von Tabelle Firefox/IE
  
  lakul 30.01.2009 21:12
  
  css
  – Informationen zu den Bewertungsregeln
  Vielen Vielen Dank schonmal !!!!
  
  Hast du die Seite mal validiert?
  Ich weiss nämlich nicht, was eine 'richtige' Darstellung im FF ist.
  
  mfg Beat
  
  Naja, man kann doch aber sehen, dass im FF in der Karte keine Unterbrechungen sind und sie schon durchgängig dargestellt wird.
  
  Naja, gut, dann werde ich das halt mal versuchen.
  
  Danke.
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

lakul: Formatierungsprobleme bei Spaltenbreite von Tabelle Firefox/IE