IE-kompatibles Webdesign ohne Tabellen

[FrankF]

So sieht die Seite mit bösem Tabellenlayout aus:
http://afrika.net/temp/weinbautest78/startseite_ie7dirty.htm

Und so als w3c-valides XHTML/Strict:
http://afrika.net/temp/weinbautest78/div_pure.html

(Achtung, ich arbeite aktuell an der Seite, wenn temporär andere Fehler auftreten, habe ich mich vertippt, ich schreibe im Texteditor)

Das Problem?

In allen Browsern wird die Seite korrekt dargestellt außer im Internet Explorer, wo der Header mit Navigation unten rechts neben dem Seitenfuß erscheint.

Ich habe den JS-Hack für IE7 von der Seite http://thestyleworks.de ausprobiert, aber der hilft in dem Fall nicht.

Beim Tabellenlayout habe ich die Darstellungsprobleme im IE durch explizites Setzen von cellpadding=0 und cellspacing=0 hinbekommen, auch wenn es sich dabei um Mehrfachdeklarationen handelte.

Wer weiß Rat?

Danke

Frank

Klicken zum Weiterlesen...

 

[AndyE]

Wo ist das Problem? - schaut irgendwie normal aus.
Das ist das Display des ersten Links im IE7.
LG, Andy

 

[FrankF]

Wie gesagt: Der erste Link zeigt, wie es aussehen soll, ist aber mit dem Vorschlaghammer Tabellenlayout und ohne Beachtung der Webstandards (transitional, d.h. Browser im Quirk-Modus) gezimmert.

Mit der DTD XHTML/Strict will ich die Browser in den W3C-Standard-Modus zwingen, damit die SEite in allen Browsern jetzt und in Zukunft korrekt angezeigt wird.

Wo ist das Problem? - schaut irgendwie normal aus.
Das ist das Display des ersten Links im IE7.
LG, Andy

 

[CALYPTRA]

Hallo Frank.
Ich habe vor kurzem mal ähnliche Darstellungsprobleme gehabt. Im Firefox gings, im IE7 nicht. Bis ich irgendwann dann darauf gekommen bin, dass der neue IE7 rumzickt, wenn irgendwas mit der HTML Variante nicht stimmt. Konkret hatte ich das falsche .dtd File von der W3C Seite eingebunden. Allerdings arbeite ich momentan noch mit der loose Variante, geholfen hat es aber.

 

[merler]

Hallo,

vielleicht hilft Dir dieses Tutorial - ist zwar eher für Anfänger, zeigt aber ein oder zwei IE-Hacks.

Vielleicht gibt's hier auch noch was...

 

[ThomasV]

Mal so ins Blaue vermutet: Das sieht nach Problemen mit float aus.

Muss bei #header unbedingt float:left stehen?

 

[lemonstre]

wenn du den header rauswirfst und die id navigation wie folgt änderst klappt es auch im IE:

#navigation {
position: relative;
top: 0px;
background: url('http://afrika.net/temp/weinbautest78/bk-nav.jpg') no-repeat top;
height: 150px;
width: 800px;
margin: 0;
padding: 0;
}

jetzt fehlt nur noch der navigations hover style für ie...

 

[FrankF]

wenn du den header rauswirfst und die id navigation wie folgt änderst klappt es auch im IE:

#navigation {
position: relative;
top: 0px;
background: url('http://afrika.net/temp/weinbautest78/bk-nav.jpg') no-repeat top;
height: 150px;
width: 800px;
margin: 0;
padding: 0;
}

jetzt fehlt nur noch der navigations hover style für ie...

Ich probiere das direkt mal aus.

Der erste eigene Versuch mit Header raus führte dazu, dass der Content unter der Navigation verschwand.

Den IE-Hoover-Style habe ich von dem alten Design noch auf dem Server rumliegen: http://wh-schmitt.de

Herzlichen Dank

Frank

 

[FrankF]

Super!!!!!

http://afrika.net/temp/weinbautest78/div_pure2.html

Ich habe den Entwurf erst mal wieder heruntergenommen, denn ich bastele weiter daran und werde das Ergebnis ins Netz stellen, wenn alle Plugins laufen und die ca. 40 Seiten Content vom alten ins neue Layout übertragen sind.

Danke noch einmal für die schnelle Hilfe

Frank