Problem mit der Darstellung eines Div Layoutes in IE

[Frank]

Hi Leute,

Zu erst einmal, finde ich euer Forum sehr sehr hilfreich, hab hier schon sehr viel gefunden was mir weitergeholfen hat. Dafür danke.

Allerdings hab ich jetzt ein Problem. Hab soeben mein Homepage Design in Photoshop gesliced, und in Div's umgesetzt. Nun mein Problem. In Firefox sieht alles so aus, wie es soll. Öffne ich es jedoch in IE tritt ganz unten ein Problem auf.

Sieht selbst: http://www.graceful-rage.com/tfe/

Es ist zwar minimal es stört mich aber.

Meiner Meinung nach en Bug in IE. Wollte nur mal wissen wie ich dieses Problem lösen kann.
Hier mein CSS:

html, body {
 margin: 0;
 padding: 0;
 height: 100%;
 width: 100%;
 background-color:#000000;
 overflow: auto
 }

#global {
    position: absolute;
    width: 980px;
 height: 600px;
    left: 50%;
    top: 50%;
    margin-left: -490px;
    margin-top: -300px;
 }

#top{
 position: absolute;
 width: 980px;
 height: 210px;
 top: 0px;
 left: 0px;
 background-image: url(bilder/r1_c1.jpg);
 }

#bottm_bar{
 position: absolute;
 width: 980px;
 height: 17px;
 top: 210px;
 left: 0px;
 background-image: url(bilder/r2_c1.jpg)
 }

#left_border{
 position: absolute;
 width: 16px;
 height: 357px;
 top: 227px;
 left: 0px;
 background-image: url(bilder/r3_c1.jpg);
 }

#top_box{
 position: absolute;
 width: 237px;
 height: 41px;
 top: 227px;
 left: 16px;
 background-image: url(bilder/r3_c3.jpg);
 }

#left_box{
 position: absolute;
 width: 22px;
 height: 254px;
 top: 268px;
 left: 16px;
 background-image: url(bilder/r5_c3.jpg);
 }

#content_box{
 position: absolute;
 width: 187px;
 height: 254px;
 top: 268px;
 left: 38px;
 background-image: url(bilder/boxbg.jpg);
 }

#right_box{
 position: absolute;
 width: 28px;
 height: 254px;
 top: 268px;
 left: 225px;
 background-image: url(bilder/r5_c5.jpg);
 }

#bottom_box{
 position: absolute;
 width: 237px;
 height: 38px;
 bottom: 40px;
 left: 16px;
 background-image: url(bilder/r6_c3.jpg);
 }

#top_content{
 position: absolute;
 width: 713px;
 height: 26px;
 top: 227px;
 left: 253px;
 background-image:url(bilder/r3_c6.jpg);
 }

#left_content{
 position: absolute;
 width: 29px;
 height: 307px;
 top: 253px;
 left: 253px;
 background-image: url(bilder/r4_c6.jpg);
 }

#content{
 position: absolute;
 width: 649px;
 height: 307px;
 top: 253px;
 right: 49px;
 background-color:#FFFFFF;
 }

#right_content{
 position: absolute;
 width: 35px;
 height: 307px;
 top: 253px;
 right: 14px;
 background-image: url(bilder/r4_c8.jpg);
 }

#bottom_content{
 position: absolute;
 width: 950px;
 height: 24px;
 bottom: 16px;
 right: 14px;
 background-image:url(bilder/r7_c2.jpg);
 }

#right_border{
 position: absolute;
 width: 14px;
 height: 357px;
 top: 227px;
 right: 0px;
 background-image: url(bilder/r3_c9.jpg);
 }

#bottom_border{
 position:absolute;
 width: 980px;
 height: 16px;
 bottom: 0px;
 background-image:url(bilder/r8_c1.jpg);
 }
</style>

Hoffe jemand kann mir helfen, vielen Dank im Vorraus

grüsse Sauer

[Zeromancer]

Hallo Frank,

der CSS-Validator meckert:

Ergebnisse des W3C CSS-Validator mit Objekt: file://localhost/TextArea

Damit Ihr CSS-Stylesheet wie gewünscht funktioniert, benötigen Sie einen korrekten Parsebaum des Dokuments. Das bedeutet, daß Sie validiertes HTML verwenden sollten.
Fehler
URI : file://localhost/TextArea

* Zeile: 7 Kontext : html, body

Ungültige Nummer : overflow no ist kein overflow-Wert : no

Ein Anfang?

Mit freundlichen Grüßen,
André

[Frank]

Hi André.

Danke auf die Idee bin ich noch nicht gekommen, um es validieren zu lassen. Hab alles jetzt umgeändert, und es ist jetzt xhtml und css valid. Das heisst, der Validator meckert nicht mehr ;). Allerdings bleibt das Problem weiterhin bestehen.

grüsse und vielen dank trotzdem :)
Sauer

[Der Martin]

Hallo Frank,

Hab soeben mein Homepage Design in Photoshop gesliced, und in Div's umgesetzt.

du lieber Himmel, warum das denn? Damit eine riesige div-Wüste draus wird? Und die exzessive Eierei mit absoluter Positionierung muss auch nicht sein. Ein etwas flüssigeres Layout, und ich müsste nicht horizontal scrollen.

Öffne ich es jedoch in IE tritt ganz unten ein Problem auf.

Wenn du jetzt noch sagen könntest, was für ein Problem... Ich kann nämlich keins entdecken (IE5.5/SP2).

So long,
 Martin

[Sauer]

Hallo Martin

du lieber Himmel, warum das denn? Damit eine riesige div-Wüste draus wird? Und die exzessive Eierei mit absoluter Positionierung muss auch nicht sein. Ein etwas flüssigeres Layout, und ich müsste nicht horizontal scrollen.

Mm also hab mich informiert, dun bin zu dem Schluss gekommen das heute viel mit div's gearbeitet wird. Desshalb hab ich div's benutzt. Es fonktioniert ja auch biss auf das kleine Problem :)
Ok um ehrlich zu sein, hab ich die Seite noch nicht im IE 5 angeschaut. Aber bei mir IE 6 un Firefox 1.5.0.1 brauch ich nicht horizontal zu scrollen.

Wenn du jetzt noch sagen könntest, was für ein Problem... Ich kann nämlich keins entdecken (IE5.5/SP2).

Das Problem liegt bei meinem botton border  div, in FF wird es genau da angezeigt wo es soll also bottm:0px bei IE allerdings sieht es aus als wäre bottom: 2 px oder so. Ist nicht einfach zu erklären.

Vielen Dank trotzdem

So long,
Martin

grüsse Sauer

[Ritch]

Hallo ihr 2,

@ Der Martin, arbeitest du noch immer mit Tables um dein Design zu formatieren? (= Not XHTML strict1 conform ->http://validator.w3.org/)
Mit Div's kannst du alles Pixel genau positionieren. DIV's sind der Hammer.

Horizontal scrollen?? Arbeitest du noch in 800x600, Standart Heute ist 1024x768, und ich finde diese Auflösung schon eine Zumutung.
Ideale Aufsölung für mich ist 1280x1024. Da hat der Designer und der Developper Platz sich auszutoben.

IE.5/SP2? Hallo?! Erde an Der Martin!!

IE.6 ist zum Standart geworden, leider tut er sich etwas schwer mit CSS2.0 darum empfehle ich Firefox, Opera(wobei Opera 8 Probleme mit XML hat) oder Safari.

Ich warte gespannt auf IE.7 hoffentlich sind da alle CSS2.0 behoben und vielleicht sogar schon CSS3.0 conform.

Fränk zu deinem Problem habe ich leider keine Lösung, im Moment ist es ein Spagat zwischen FF.1 und IE.6, hoffe dass sich das bald ändern wird.

MfG, Ritch.

---------------------

Hallo Frank,

Hab soeben mein Homepage Design in Photoshop gesliced, und in Div's umgesetzt.

du lieber Himmel, warum das denn? Damit eine riesige div-Wüste draus wird? Und die exzessive Eierei mit absoluter Positionierung muss auch nicht sein. Ein etwas flüssigeres Layout, und ich müsste nicht horizontal scrollen.

Öffne ich es jedoch in IE tritt ganz unten ein Problem auf.

Wenn du jetzt noch sagen könntest, was für ein Problem... Ich kann nämlich keins entdecken (IE5.5/SP2).

So long,
Martin

[Struppi]

@ Der Martin, arbeitest du noch immer mit Tables um dein Design zu formatieren? (= Not XHTML strict1 conform ->http://validator.w3.org/)
Mit Div's kannst du alles Pixel genau positionieren. DIV's sind der Hammer.

Genau das ist die eine sehr ungünstige Sichtweise der Dinge. Ein DIV ist ein sinnloses HTML Element, es hat keinerlei Bedeutung, der einzige Verwendungszweck ist, dass du damit anderen HTML Elemente gruppieren kannst.

Und Pixelgenau positionieren ist für eine Webseite nicht sinnvoll, da sie einerseits unter allen möglichen Kombinationen von Clients darstellbar sein sollte und anderseits HTML/CSS optimal für ein "fliessendes" Layout sind, das sich der Darstellungsfläche anpassen kann. Für pixelgenaues Layout eignen sich andere Formate viel besser.

Horizontal scrollen?? Arbeitest du noch in 800x600, Standart Heute ist 1024x768, und ich finde diese Auflösung schon eine Zumutung.
Ideale Aufsölung für mich ist 1280x1024. Da hat der Designer und der Developper Platz sich auszutoben.

Einen Standard! Viewport gibt es im Netz nicht. Jeder Browser oder was es sonst an HTML Darstellungsmöglichkeiten gibt hat, eine andere Größe der Darstellungsfläche, zuviele Faktoren können Einfluß darauf nehmen, als das man von einem Standard sprechen kann.

IE.5/SP2? Hallo?! Erde an Der Martin!!

IE.6 ist zum Standart geworden, leider tut er sich etwas schwer mit CSS2.0 darum empfehle ich Firefox, Opera(wobei Opera 8 Probleme mit XML hat) oder Safari.

Standard! Naja, auch wenn es in den Logfiles ein deutliches Übergewicht mancher Browser gibt, mußt du genau überlegen ob du die anderen vernachlässigen willst. Selbst 90% IE 6 User wären bei 100.000 Besucher im Monat 10.000 Besucher potentiell aussen vor.

Ich warte gespannt auf IE.7 hoffentlich sind da alle CSS2.0 behoben und vielleicht sogar schon CSS3.0 conform.

Soweit ich hier die Diskussionen darüber mitbekommen habe, kann ich nur sagen Träum weiter. Es sieht anders aus.

Struppi.

[Der Martin]

Hallo,

@ Der Martin, arbeitest du noch immer mit Tables um dein Design zu formatieren? (= Not XHTML strict1 conform ->http://validator.w3.org/)

warum sollte ich so einen Quatsch machen? Tabellen benutze ich, wenn ich Tabellen darstellen möchte.

Mit Div's kannst du alles Pixel genau positionieren. DIV's sind der Hammer.

Pixelgenaue Positionierung im Webdesign ist Asche. Das funktioniert unter genau kontrollierbaren Randbedingungen - und die hast du im Web nicht: Anderer Browser, andere Fenstergröße, andere Schriftgröße - es gibt einfach zu viele Dinge, auf die du keinen Einfluss hast.
Und ein div ist lediglich ein aussagefreies Element zur Gruppierung, das ich nur einsetze, wenn es kein anderes, besser geeignetes Element gibt. Mit sinnvoll eingesetztem HTML wird auch das CSS-Layout einfacher und der Code übersichtlicher.

Horizontal scrollen?? Arbeitest du noch in 800x600, Standart Heute ist 1024x768, und ich finde diese Auflösung schon eine Zumutung.

Ich habe eine viel höhere Bildschirmauflösung, aber das hat ja *nichts* mit der Größe des Browserfensters zu tun, das bei mir selten mehr als etwa 3/4 der Bildschirmbreite einnimmt. Eher weniger.

Ideale Aufsölung für mich ist 1280x1024. Da hat der Designer und der Developper Platz sich auszutoben.

Dann mach das einfach; ich stelle mir gerade deine "Aufsölung" vor.

IE.5/SP2? Hallo?! Erde an Der Martin!!

IE.6 ist zum Standart geworden, ...

Nein, aber leider ist das Miststück zu einer Art "Standard" geworden. Deswegen halte ich an meinem 5.5er fest.

darum empfehle ich Firefox, Opera(wobei Opera 8 Probleme mit XML hat) oder Safari.

Die kannst du gern empfehlen, ich benutze aber trotzdem den Browser, der *mir* im Handling am besten gefällt. Zum Testen natürlich auch Opera und Firefox.

Ich warte gespannt auf IE.7 hoffentlich sind da alle CSS2.0 behoben und vielleicht sogar schon CSS3.0 conform.

Ja. Träum weiter.

Schönen Tag noch,
 Martin

[at]

Hallo.

Tabellen benutze ich, wenn ich Tabellen darstellen möchte.

Schade, da doch die Darstellung nichts mit den einzelnen HTML-Elementen zu tun hat.
MfG, at

[Struppi]

Allerdings hab ich jetzt ein Problem. Hab soeben mein Homepage Design in Photoshop gesliced, und in Div's umgesetzt.

Warum?

Struppi.