Höhenangaben werden ignoriert!

Status
Nicht offen für weitere Antworten.

..ooOOipOOoo..

Mitglied
Hoi!

Irgendwie interpretiert keiner der gängigen Browser (von Opera mal abgesehen) meine Style Angaben richtig. Ich habe eine Tabelle in die ich meine Seite lade. Das typische: Überschrift, Links Spalte, Mittlere Hauptspalte, Rechts Spalte, Fusszeile. Der einzige unterschied "zum Typischen" ist, dass ich am Kopf und am Fuss der Linken und Rechten Spalte noch ein Bild habe (bildet den übergang zum Kopf und zum Fuss). Der Quelltext meine Seite sieht so aus:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>
	</title>
	<style type="text/css">
	<!--
		td.Header{
			vertical-align:top;
			width:150px;
			height:150px;
			padding:0px;
		};
		td.Footer{
			vertical-align:bottom;
			width:150px;
			height:150px;
			padding:0px;
		};
		td.Body{
			vertical-align:top;
			width:150px;
		}
		div.finalization{
			width:150px;
			height:150px;
			border:0px;
		}
	-->
	</style>
</head>
<body style="background-image:url(Haupthintergrund.jpg)">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="width:1000px;vertical-align:top;">
	<thead>
  		<tr> 
    		<th colspan="3" style="height:100px;background-image:url(TitelBild.jpg);">
				&amp;nbsp;
			</th>
  		</tr>
  	</thead>
  	<tfoot>
  		<tr> 
    		<td colspan="3" style="background-image:url(FussBild.jpg);height:49px;text-align:center;vertical-align:top;"> 
      			&amp;nbsp;
    		</td>
  		</tr>
  </tfoot>
  <tbody>
  	<tr>
  		<td style="background-image:url(LeistenHintergrund.jpg);" class="Header">
	  		<div style="background-image:url(BildObenLinks.jpg);" class="Finalization">&amp;nbsp;</div>
		</td>
		<td rowspan="3" style="vertical-align:top;width:700px;overflow:hidden;">
			<!-- Der Page Main Teil kommt hier rein -->
		</td>
		<td style="background-image:url(LeistenHintergrund.jpg);" class="Header">
			<div style="background-image:url(BildRechtsOben.jpg);" class="Finalization">&amp;nbsp;</div>
 		</td>
	</tr>
	<tr>
		<td style="background-image:url(LeistenHintergrund.jpg);" class="Body">
			<!-- Die Linke Leiste gehört hier hin -->
		</td>
		<td style="background-image:url(LeistenHintergrund.jpg);" class="Body">
			<!-- Die Rechte Leiste gehört hier hin -->
		</td>
	</tr>
	<tr>
		<td style="background-image:url(LeistenHintergrund.jpg);" class="Footer">
			<div style="background-image:url(BildLinksUnten.jpg);" class="Finalization">&amp;nbsp;</div>
		</td>
		<td style="background-image:url(LeistenHintergrund.jpg);" class="Footer">
			<div style="background-image:url(BildRechtsUnten.jpg);" class="Finalization">&amp;nbsp;</div>
		</td>
	</tr>
	</tbody>
</table>
</center>
</body>
</html>

Nun, wenn die Mittlere Spalte zu groß wird, scheinen IE und Netscape die Stylesheet höhenangaben einfach zu ignorieren (Opera eigentlich auch, da ändert es aber nichts am Aussehen der Seite). Anstelle die mittleren Spalten, der Aussenspalten, auf ein Maximum zu dehnen (um die Höhenangaben des Kopfbildes und des Fussbildes, welche ich hier in Form eines "gebackgroundeten" divs gemacht habe, beizubehalten, werden die Höhenangaben einfach ignoriert und alle 3 Spalten gedehnt. Das hat zur folge, dass der Inhalt der Mittleren Spalte viel weiter unten angezeigt wird. Hier das ganze mal "in Action":
http:\\ip-web.hn.org/nuketest/html/

Border = "1" damit man es besser sehen kann. Unter FAQ/Projekt ist der Inhalt der Hauptspalte so groß, dass es zu diesen Verzerrungen kommt.

Wäre echt super, wenn mir geholfn werden könnte.
Das ist der Lohn, dafür, dass man versuch eine Seite IE, Netsacpe und Opera kompatibel zu machen... stundenlange Arbeit ohne erfolg :(

Gruesse

..ooOOipOOoo..
 
Zuletzt bearbeitet:
Das Problem ist folgendes:
Die gängigen Browser haben in Bezug auf Stylesheets unterschiedliche Eigenschaften. Momentan kann nur Opera Angaben zu Tabellen aus Styles lesen bzw. anwenden.
Daher muss man sich wohl mit Spacern und festen angaben in Pixeln weiterhelfen.
 
Status
Nicht offen für weitere Antworten.
Zurück