[CSS] vs IE: table width 100% + margin left

T.dot · 08.09.2004, 18:03

Ich stell mir immer öfter die Frage, ob Webdesign eigentlich verrückt macht. Folgendes Problem (nur im Internet Explorer):

<div style="margin-left:30px">
<table style="width:100%">
<tr>
<td style="width:50%;text-align:left">A</a></td>
<td style="width:50%;text-align:right">B</a></td>
</tr>
</table>
</div>

bewirkt im Internexplorer, dass die Tabelle trotz Margin die ganze Seitenbreite benutzt und daher über die eigentliche Seitenbreite (in diesem Fall um 30 Pixel) hinausgeht. Das verursacht natürlich den tollen Effekt eines Scrollbars um alles lesen zu können und macht sich besonders gut bei Margin von mehreren 100px zb für Seitenteilung...

gibts hierfür nen Workaround? (google fand keinen wirklich brauchbaren)

herzlichen Dank, Thomas

keyser.soze · 08.09.2004, 19:27

Schau mal bei Dean Edwards nach

http://dean.edwards.name

Er entwickelt IE7, das behebt einige CSS Bugs des IE

snowman · 08.09.2004, 19:51

Zitat:

Original geschrieben von T.dot
gibts hierfür nen Workaround? (google fand keinen wirklich brauchbaren)

Ja, zB eine ordentliche Angabe des Doctypes.

gruss,
snowman

ps.: Nicht alles auf den Browser schieben.

T.dot · 08.09.2004, 20:35

doctype hab ich angegeben (nur post ich nun mal nicht meine ganzen files):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

seite ist auch w3c valid...

hab aber inzwischen die http://dean.edwards.name site angesurft und dort ein paar ideen geklaut...

wenn man nämlich position:absolute verwendet, funktioniert das ganze auch so - hätt ich selbst draufkommen müssen...

mfg Thomas

Dane · 09.09.2004, 00:08

Zitat:

Original geschrieben von keyser.soze
Schau mal bei Dean Edwards nach

http://dean.edwards.name

Er entwickelt IE7, das behebt einige CSS Bugs des IE

Ist das ein Mod für den Internet Explorer, oder ist das der Internet Explorer 7 ???

snowman · 10.09.2004, 10:39

Der IE6 macht ohne Doctype-Angabe, also im Quirk-Modus, das so, wie du es beschrieben hast, mit doctype schauts fein aus.

gruss,
snowman

RaistlinMajere · 10.09.2004, 14:39

Zitat:

Original geschrieben von T.dot
<div style="margin-left:30px">
<table style="width:100%">
<tr>
<td style="width:50%;text-align:left">A</a></td>
<td style="width:50%;text-align:right">B</a></td>
</tr>
</table>
</div>

bewirkt im Internexplorer, dass die Tabelle trotz Margin die ganze Seitenbreite benutzt und daher über die eigentliche Seitenbreite (in diesem Fall um 30 Pixel) hinausgeht. Das verursacht natürlich den tollen Effekt eines Scrollbars um alles lesen zu können und macht sich besonders gut bei Margin von mehreren 100px zb für Seitenteilung...

gibts hierfür nen Workaround? (google fand keinen wirklich brauchbaren)

herzlichen Dank, Thomas

1.) wie wärs, wenn du die margin-angabe im <body>-tag machst? dann sollts glaube ich funzen.
2.) die width-angaben in der table sind definierte attribute der tags, daher brauchst keine style-angaben machen.
außerdem reicht es, wenn du bei der table 100% und bei einem feld 50% angibst, der rest wird dann einfach der anderen spalte zugewiesen.
3.) align="left" ist bei tabellenfeldern default, daher brauchst du das nicht explizit angeben.
4.) du hast abschließende ankertags angegeben, obwohl es keine aufgehenden gibt, das ist definitiv ein fehler und könnte auch eine ursache sein, warums nicht funzt.

ich würds so machen:

Code:

<body leftmargin="30">
...
<table width="100%">
<tr>
  <td width="50%">A</td>
  <td align="right">B</td>
</tr>
</table>
...
</body>

T.dot · 11.09.2004, 00:43

@snowman:
Wie krieg ich raus ob mein IE mit Doctype Angabe oder ohne arbeitet? arbeite sonst eigentlich nie damit, kenn mich also ned sonderlich aus...

@RaistlinMajere:
ad 1.) könnt ich natürlich machen, nur hab ich auf der Seite einige Kopf (und Fuß)zeilen, die über die ganze Breite gehen sollen.

ad 2.) keine Angst, ich kenne viele HTML Attribute für diverse Tags und würde auch ohne CSS auskommen - nur nachdem es immer öfter heißt man sollte kein HTML Design mehr verwenden und nur mehr CSS (steht sogar auf selfhtml) versuche ich jetzt auf CSS umzustellen

ad 3.) ich hatte bereits bei einer anderen Seite das Problem das in einem Browser alles zentriert wurde, wenn nicht explizit die Angabe text-align:left vorhanden war. Deswegen schreib ichs lieber dazu, bevors irgendwo falsch interpretiert wird.
Das die Browser sich ausrechnen wie breit die letzte Spalte sein soll ist eh klar, hab mir nur angewöhnt das doch hinzuschreiben damit ich bei größeren Tabellen gleich sehe wie breit welche Spalte ist.

ad 4.) das mit dem </a> ist ein Fehler (stammt noch aus der ursprünglichen Seitenschreibweise), hab ich aber bei meiner Testversion schon entfernt (ich kürze meine Testversionen immer solang bis ich nurmehr eine Fehlerquelle habe).

ad meine Problemlösung:
Ich stelle diese Seite jetzt wieder soweit wie nötig auf Blindtabellenformatierung um, da bei mir IE (aber auch im Opera) noch weitere "interessante" Effekte auftreten, welche ich nicht durch doppelten Aufwand/IE Hacks/... beheben will.
Ich finde momentan einfach nicht die Geduld mehr Zeit für Design zu verbrauchen, das mit einfacheren Methoden genau so aussieht, als wenn ich es mit den neuen, besseren, kompatibleren (*g*) Methoden arbeite... - aber ich versuche halt immer wieder doch Möglichkeiten zu finden meine Seitenschreibung auf ein einheitliches Niveau zu bringen...

auf jeden Fall einen herzlichen Dank für eure bisherigen Mühen!

mfg Thomas

08.09.2004, 18:03	#1
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	[CSS] vs IE: table width 100% + margin left Ich stell mir immer öfter die Frage, ob Webdesign eigentlich verrückt macht. Folgendes Problem (nur im Internet Explorer): <div style="margin-left:30px"> <table style="width:100%"> <tr> <td style="width:50%;text-align:left">A</a></td> <td style="width:50%;text-align:right">B</a></td> </tr> </table> </div> bewirkt im Internexplorer, dass die Tabelle trotz Margin die ganze Seitenbreite benutzt und daher über die eigentliche Seitenbreite (in diesem Fall um 30 Pixel) hinausgeht. Das verursacht natürlich den tollen Effekt eines Scrollbars um alles lesen zu können und macht sich besonders gut bei Margin von mehreren 100px zb für Seitenteilung... gibts hierfür nen Workaround? (google fand keinen wirklich brauchbaren) herzlichen Dank, Thomas

10.09.2004, 10:39	#6
snowman Inventar Registriert seit: 26.09.1999 Beiträge: 2.569	Der IE6 macht ohne Doctype-Angabe, also im Quirk-Modus, das so, wie du es beschrieben hast, mit doctype schauts fein aus. gruss, snowman ____________________________________ MediaMarkt? Ich bin doch nicht blöd, Mann! Vorsprung durch Technik Lesen Sie keine Anleitungen, FAQs, Readme - Files. Reine Zeitverschwendung. In den Newsgroups und Foren gibt es genug kompetente Leute, die mit großer Geduld immer wieder dieselben einfachen Fragen beantworten. Völlig kostenlos noch dazu!

08.09.2004, 19:27	#2
keyser.soze Newbie Registriert seit: 08.09.2004 Beiträge: 1	Schau mal bei Dean Edwards nach http://dean.edwards.name Er entwickelt IE7, das behebt einige CSS Bugs des IE

08.09.2004, 20:35	#4
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	doctype hab ich angegeben (nur post ich nun mal nicht meine ganzen files): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> seite ist auch w3c valid... hab aber inzwischen die http://dean.edwards.name site angesurft und dort ein paar ideen geklaut... wenn man nämlich position:absolute verwendet, funktioniert das ganze auch so - hätt ich selbst draufkommen müssen... mfg Thomas

11.09.2004, 00:43	#8
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	@snowman: Wie krieg ich raus ob mein IE mit Doctype Angabe oder ohne arbeitet? arbeite sonst eigentlich nie damit, kenn mich also ned sonderlich aus... @RaistlinMajere: ad 1.) könnt ich natürlich machen, nur hab ich auf der Seite einige Kopf (und Fuß)zeilen, die über die ganze Breite gehen sollen. ad 2.) keine Angst, ich kenne viele HTML Attribute für diverse Tags und würde auch ohne CSS auskommen - nur nachdem es immer öfter heißt man sollte kein HTML Design mehr verwenden und nur mehr CSS (steht sogar auf selfhtml) versuche ich jetzt auf CSS umzustellen ad 3.) ich hatte bereits bei einer anderen Seite das Problem das in einem Browser alles zentriert wurde, wenn nicht explizit die Angabe text-align:left vorhanden war. Deswegen schreib ichs lieber dazu, bevors irgendwo falsch interpretiert wird. Das die Browser sich ausrechnen wie breit die letzte Spalte sein soll ist eh klar, hab mir nur angewöhnt das doch hinzuschreiben damit ich bei größeren Tabellen gleich sehe wie breit welche Spalte ist. ad 4.) das mit dem </a> ist ein Fehler (stammt noch aus der ursprünglichen Seitenschreibweise), hab ich aber bei meiner Testversion schon entfernt (ich kürze meine Testversionen immer solang bis ich nurmehr eine Fehlerquelle habe). ad meine Problemlösung: Ich stelle diese Seite jetzt wieder soweit wie nötig auf Blindtabellenformatierung um, da bei mir IE (aber auch im Opera) noch weitere "interessante" Effekte auftreten, welche ich nicht durch doppelten Aufwand/IE Hacks/... beheben will. Ich finde momentan einfach nicht die Geduld mehr Zeit für Design zu verbrauchen, das mit einfacheren Methoden genau so aussieht, als wenn ich es mit den neuen, besseren, kompatibleren (g) Methoden arbeite... - aber ich versuche halt immer wieder doch Möglichkeiten zu finden meine Seitenschreibung auf ein einheitliches Niveau zu bringen... auf jeden Fall einen herzlichen Dank für eure bisherigen Mühen! mfg Thomas

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)