*hust* Microsoft Internet Explorer *hust* brauche Hilfe bei div-Layout

Hallo,
mir schwebt ein bestimmtes Layout für eine Seite vor:

------------------------------
    |            A            
    |-------------------------
    |
    |
 B  |
    |            C
    |
    |
    |

Jetzt sieht es beim Firefox gerade richtig gut aus. Selbstverständlich ist mein XHTML und CSS auch standardkonform.
Der Internet Explorer stellt die Seite allerdings *etwas* anders dar:

-------------------------
           A
-------------------------
 B |    
-------------------------

            C

Hier mein CSS:

div#A
{
	position: fixed;
	left: 200px;
	top: 0px;
	width: 100%;
	height: 120px;
	background: orange;
}

div#B
{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 200px;
	height: 100%;
	background: blue;
}

div#C
{
	position: fixed;
	left: 200px;
	top: 120px;
	padding-left: 10px;
}

Ich habe ziemliche Probleme, das ordentlich hinzubekommen. Ich wollte absolute-Layout hierfür eigentlich vermeiden. Beim Firefox habe ich dann auch noch ein Scroll-Problem. Wenn das Fenster zu klein wird, soll für C ein Scrollbalken erscheinen, tut es aber nicht. Wenn ich overflow auf scroll setze, sind Scrollbalken immer da, auch wenn ich sie nicht brauche (und sie sind dann natürlich auch nicht am Rand vom Browser-Fenster, sondern mitten in der Seite).

EDIT: Achja, der Grund gegen absolute ist, dass vom width: 100% vom oberen div dann nicht mehr das linke div abgezogen wird, so dass man immer scrollen muss.

Shade Of Mine

fixed kann der IE nicht.

Musst du lesen: http://www.fabrice-pascal.de/artikel/posfixedie6/

Scrollproblem: overflow:auto; muesste passen.

Hast du nen passenden Ersatz-Vorschlag? absolute kann ich aus den genannten Gründen (siehe edit) kaum nehmen.
Das mit dem Scrollen funktioniert leider auch nicht anständig, da scheint der Firefox seine Problemchen zu haben. Wenn ich es auf auto stelle und das Fenster verkleinere, erscheint ein vertikaler Scrollbalken völlig deplaziert (mit abstand vom rechten rand). Wenn ich das Fenster wieder vergrößere, so dass er wieder unnötig wäre, verschwindet er nicht.

Shade Of Mine

Optimizer schrieb:

Hast du nen passenden Ersatz-Vorschlag?

komplizierter wuerde es vermutlich gehen.
Vielleicht ist ja hier http://www.c-plusplus.net/forum/viewtopic.php?t=93591&postdays=0&postorder=asc&start=0 etwas dabei, dass dir etwas bringt.

aber wenn du bei fixed bleiben willst, lies dir den Link durch. Ich habe es zwar noch nicht ausprobiert, aber es sieht recht fein aus.

Das mit dem Scrollen funktioniert leider auch nicht anständig

Scheint ein Bug im FF zu sein. uU hilft es kein fixed zu verwenden oder bringe ihn mal in den QuirkMode, vielleicht kann er es dann...

Danke erstmal. Bis jetzt bin ich nicht nennenswert vorangekommen. Ich habe auch den Trick mit margin ausprobiert, geht aber nicht wirklich. Vielleicht werde ich jetzt bedingte Kommentare für den &§%"§ Internet Explorer einsetzen. Das dumme ist, dass man den IE nicht wirklich ignorieren kann.

Blackhawk

leider, ja.. meine page (look@sig fab-i-an.de) ist mitm IE auch anders. zwar nicht viel aber anders eben und das will ich ja nicht ....
hoffentlich ist das mit IE 7 geregelt!!

Nene. Der Internet Explorer kennt anscheinend Begriffe wie "right" und "bottom" nicht. Sorry, einfacher kann man's einfach nicht mehr machen. Es geht nicht mehr einfacher als absolute und genau die Koordinaten der Eckpunkte anzugeben. Sogar Paint kann das. Das ist einfach witzlos.

Wer was zum Lachen haben will, kann sich ja diese Seite mal mit dem Internet Explorer ansehen.
http://www.myjavaserver.com/~firbach/

Wie braucht's der IE? Braucht er's kompliziert? Braucht er's falsch/kaputt/nicht standardkonform?
Ich weiß es einfach nicht, wie das gehen soll.
Muss ich jetzt wegen dem IE ein table-Layout machen?
Ich kann leider nicht alle right und bottoms mit width und height ersetzen, weil sie einfach client-spezifisch sind. Beim Header würde es gehen, beim Menü links geht es halt nicht.

Sorry, musste nur grad mal meinen Grant loswerden, der sich über die Stunden angesammelt hat.

DEvent

opera stellt es auch richtig dar.

flenders

Afaik versteht der IE schon right und bottom aber eben nicht in Kombination mit left und top. Also entweder right oder left und bottom oder top.

BugJoe

Dann musst du halt in den sauren Apfel beißen und bevor die Seite geladen wird abprüfen welchen Browser der Benutzer hat. Wenn er den IE benutzt (was ja zum Glück langsam aber kontinuirlich weniger wird), zeigst ihm einfach ne billige scheiß Seite an mit dem Hinweis dass er mit Firefox oder Konsorten eine bessere sehen würde, aber nöööööööööö, wenn er ja den beknackten IE benutzen muss...

Shade Of Mine

BugJoe schrieb:

Dann musst du halt in den sauren Apfel beißen und bevor die Seite geladen wird abprüfen welchen Browser der Benutzer hat.

Habe ich noch _nie_ müssen.

Ok, bei Downloads bei den Headers damit der IE eine PDF Datei runterlädt und nicht anzeigt, aber davon abgesehen habe ich noch nie Browserweichen verwendet.

Denkt darüber mal nach...

flenders schrieb:

Afaik versteht der IE schon right und bottom aber eben nicht in Kombination mit left und top. Also entweder right oder left und bottom oder top.

Hihi.
Ich hätte ja eigentlich ganz gern noch drum rumgebastelt. Meine Idee war, für Header width: 100% und für Menü height: 100% also die Teile überlappen und mit padding korrigieren. Das padding wird aber von beiden Browsern dann am ende angehängt.

Shade of Mine schrieb:

Denkt darüber mal nach...

Ach, mach ich schon seit geraumer Zeit.
Wenn ich in den von dir verlinkten Thread reinschaue, finde ich das selbe Problem:

Unix-Tom schrieb:

Aber mein Problem besteht immer noch mit width= 100%

Da Sahde, empfiehlst du was mit margin. Bei mir kann ich damit nichts bewirken und ich verstehe margin auch irgendwie anders, nämlich als erzwungen Mindestabstand. Deinen Code habe ich ausprobiert, doch der funktioniert - genau wie meiner - nur, wenn man Inhalt hat. Wenn kein Text drin steht, hören die divs eben zu früh auf.

Jetzt kann ich nur noch den hässlichen h4x0r-Trick mit JavaScript-CSS ausprobieren, wovor es mir die ganze Zeit schon so graust und dann ist der Thread in der Hinsicht eh schon zu Ende.
Das von Sidewinder funktioniert ja nur bei Prozentangaben, da wäre es leicht.
Ich möchte aber die restliche Breite/Höhe füllen und es geht um's verrecken nicht.Ich find ja nicht mal eine Möglichkeit es nur "etwas unschön" beim IE zu haben, damit könnte ich leben. Aber die unten ausgerichteten Logos verschwinden beim IE fast vollständig.
Naja, ich probier mal weiter... echt schockierend, mit was man so seine Zeit verschwenden kann.

Blackhawk

hmm aber mit firefox 1.0 wird dieses dingens oben auch nicht richtig angezeigt... bzw links+oben sind falsch... und der IE, ja mei prüf ob einer den IE hat und wnen ja dann mal so ein fettes pic hin "GET FIREFOX" den link wirst du wohl kennen nach www.getfirefox.com.. ^^

Blackhawk schrieb:

hmm aber mit firefox 1.0 wird dieses dingens oben auch nicht richtig angezeigt... bzw links+oben sind falsch...

Das will ich jetzt doch anders haben. Der Header soll über die ganze Breite gehen.

Den Firefox-Link gibt's schon (links unten).

mtaesler

http://www.css4you.de/
du musst das mit float machen.
damit der footer stehen bleibt wenn du scrollst gibts auch ein paar gute css-beispiele musst mal googeln "css layout" ->google suche
cu

Die Seite gefällt mir. float wird mir hier IMHO allerdings nichts nützen. Mein Hauptproblem im Moment ist, dass der IE das blaue div nicht runtermacht, wenn kein so großer Inhalt da ist. Auch mit height: 100% oder sowas macht ers einfach nicht.
Aber ich werd mal schauen, danke für den Link.

So, der IE kriegt jetzt ein eigenes Stylesheet-Dokument und wird außerdem in den Quirks-Mode gebracht. Auf diese Weise schaut die Seite dann einigermaßen ordentlich aus. Danke an alle für die Hilfe!