nicht angemeldet
Einfachste Tabellen von IE fehlinterpretiert?
0 
Gernot Back
0 0 
Struppi
Einfachste Tabellen von IE fehlinterpretiert?
Ich bin ein ziemlicher Anfänger, aber da unser Webmaster schon seid längerem keine Zeit findet und wir unsere Page jetzt auf Webspell portieren, wollte habe ich die gelegenheit genutzt mal meine theoretischen Kenntnisse in die Praxis umzusetzen.
Ich wollte von Anfang an extrem sauberen Code schreiben und konnte es auch umsetzen; Beide Quellcodes sind laut w3c-validator Valides HTML 4.01 Transitional und umso mehr wundert es mich, dass der IE (hab mittlerweile v7) solche noch so einfach strukturierten Tabellen, so katastrophal falsch interpretiert.
Ursprünglich schien das Problem beim colspan/row zu liegen (Ich hab mittlerweile 5 verschiedene Versionen), in der letzten Version, hab ich aber ja komplett auf diese beiden Verzichtet.
Mittlerweile glaube ich, dass es an css liegt und das ganze klappen würde wenn ich alle height/width-Angaben mit html-Attributen angeben würde, aber wie gesagt ich wollte gern extrem sauberen Code und da CSS nunmal zum Designen da ist und auch dinge wie table-layout:fixed mehr für meinen Anwendungsbereich gedacht sind als die Html-Höhen und Breitenangaben, würde ich gern eine Lösung MIT css finden sofern das möglich ist.
Die grün gefärbte Tabelle ist das Problem: Im IE scheint die mitte des Banners für diese Tabelle eine unüberwindbare Grenze zu sein. Einmal hatte ich den grünen Teil links dieser Grenze, abgeschnitten war sie trotzdem.
Vielen Dank für eure Hilfe im Voraus
http://fteamplay.ft.funpic.de/Baer-Design/baer-tabelle6.html
--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabellen</title>
<style type="text/css">
table { table-layout:fixed; background-color:#ff0000 }
td { overflow:hidden }
</style>
</head>
<body>
<table border="0px" cellpadding="0px" cellspacing="0px">
<tr>
<td colspan="2" width="1000px" height="211px" style="width:1000px; height:211px; background-image:url(grafiken/banner.jpg)"></td>
</tr>
<tr>
<td align="left" valign="top" width="131px">
<table border="0px" cellpadding="0px" cellspacing="0px" style="">
<tr>
<td style="width:131px; height:1589px; background-image:url(grafiken/linkenavi.jpg)"></td>
</tr>
</table>
</td>
<td valign="top" style="background-color:#00ff00">
<table width="869px" align="left" border="0px" cellpadding="0px" cellspacing="0px">
<tr>
<td style="height:35px; width:372px; background-image:url(grafiken/lauftext.gif)"></td>
<td style="height:35px; width:497px; background-image:url(grafiken/buttons.gif)"></td>
</tr>
<tr>
<td colspan="2" valign="top" style="background-color:#aa0000">TESTTETETSTESTETSET</td>
</tr>
</table>
</td>
</tr>
</table> |
</body>
</html>
==================================================
==================================================
http://fteamplay.ft.funpic.de/Baer-Design/baer-tabelle7.html
------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabellen</title>
<style type="text/css">
table { table-layout:fixed; background-color:#ff0000 }
td { overflow:hidden }
</style>
</head>
<body>
<table border="0px" cellpadding="0px" cellspacing="0px">
<tr>
<td width="1000px" height="211px" style="width:1000px; height:211px; background-image:url(grafiken/banner.jpg)"></td>
</tr>
<tr>
<td>
<table border="0px" cellpadding="0px" cellspacing="0px">
<tr>
<!-- HAUPTFENSTER START-->
<!-- Linke Navi Start -->
<td>
<table border="0px" cellpadding="0px" cellspacing="0px">
<tr>
<td style="width:131px; height:1589px; background-image:url(grafiken/linkenavi.jpg)"></td>
</tr>
</table>
</td>
<!-- Linke Navi Ende -->
<!-- Rechtes Fenster Start -->
<td valign="top" style="background-color:#00ff00">
<table border="0px" cellpadding="0px" cellspacing="0px" >
<tr>
<td style="height:35px; width:372px; background-image:url(grafiken/lauftext.gif)"></td>
<td style="height:35px; width:497px; background-image:url(grafiken/buttons.gif)"></td>
</tr>
<tr>
<td valign="top">TESTTETETSTESTETSET</td>
</tr>
</table>
</td>
<!-- Rechtes Fenster Ende -->
<!-- HAUPTFENSTER ENDE -->
</tr>
</table>
</td>
</tr>
</table> |
</body>
</html>
-
Hallo AbstauBaer,
Mittlerweile glaube ich, dass es an css liegt und das ganze klappen würde wenn ich alle height/width-Angaben mit html-Attributen angeben würde, aber wie gesagt ich wollte gern extrem sauberen Code und da CSS nunmal zum Designen da ist und auch dinge wie table-layout:fixed mehr für meinen Anwendungsbereich gedacht sind als die Html-Höhen und Breitenangaben, würde ich gern eine Lösung MIT css finden sofern das möglich ist.
Schöner Vorsatz, leider verstößt du an allen Ecken und Enden gegen die Trennung von Inhalt und Gestalung.
Es gibt einige wenige HTML-Attribute, die die Gestaltung betreffen und für die es noch nicht in allen Browsern einen befriedigend funktionierenden CSS-Ersatz gibt. Dazu gehört das Cellspacing-Attribut der TABLE-Elemente
<table border="0px" cellpadding="0px" cellspacing="0px" >
<tr>
<td style="height:35px; width:372px; background-image:url(grafiken/lauftext.gif)"></td>Inline-CSS-Styles widersprechen dem Gedanken der Trennung von Inhalt und Gestaltung aber genauso wie durch ein zentrales CSS ersetzbare HTML-Attribute und genauso wie der Einsatz von Tabellen zur Darstellung von inhaltlich in keinem tabellarischen Zusammenhang stehenden Daten überhaupt.
Falls du diesen Mischmaschansatz dennoch weiter verfolgen willst, dann beachte aber, dass es bei Maßangaben in HTML-Attributen die Maßeinheit "px" nicht gibt und dass, wenn man Pixelwerte wünscht, man nur die blanke Zahl hinschreibt, bei CSS-Angaben jedoch immer (außer beim Wert "0") eine Maßeinheit anzugeben ist.
Gruß Gernot
-
Hmm ja das mit der Trennung von Inhalt und Gestaltung ist mit schon klar und ich habe vor mit einer zentralen CSS-Datei zu arbeiten. Wie gesagt bin ich aber noch Anfänger und wollte erstmal die Tabelle aufbauen und dann trennen.
Ich weiß auch, dass Tabellen bei strikten Trennern von Gestaltung und Inhalt nicht zum Gestalten eingesetzt werden; Meiner Meinung nach gehts da dann aber eher um die Definitionen von Gliederung und Gestaltung; Zum Gliedern sind Tabellen eindeutig gedacht und die ganzen Hintergrundgrafiken werden ja in dieser Form niemals auftreten. Innerhalb der Tabellen könnte ich ja immernoch mit div-Boxen arbeiten, wobei ich wohl hier wirklich meinen Vorsatz nicht ganz einhalten werde und soweit wie möglich mit Tabellen arbeiten werde, da diese soweit ich gesehen hab, wohl noch deutlich stabiler sind als Div-Boxen.Das es noch kein Befriedigenden Ersatz für Cellspacing in CSS gibt, hab ich leider schon rausfinden müssen und deswegen die HTML-Tags benutzt.
Mein Problem ist aber nicht gelöst.
-
Das es noch kein Befriedigenden Ersatz für Cellspacing in CSS gibt, hab ich leider schon rausfinden müssen und deswegen die HTML-Tags benutzt.
wieso?
Du suchst border-collapseStruppi.
--
Javascript ist toll (Perl auch!)
-
-