[CSS/IE] scrollbares Div, umgeben von anderen Divs?

kbot

kbot

warm draußen,oder?
ID: 50740
L
20 April 2006
4.203
143
Moin,

da ich nun endlich von Frames loskommen will, möchte ich jetzt meine Seite komplett in CSS umsetzen, was ja mit CSS kein Problem ist, wenn da nicht der IE <=6 wäre :roll:
Zuerst wollt ich mit fixen Divs arbeiten, aber als ich dann sah, dass es so viel Arbeit ist, das für den IE umzusetzen, wollt ich einfach das komplette Layout feststehend machen und nur die Inhalte scrollen lassen...

Also ich habe nen Header (oben), Navi (links), Main-Content (rechts) und Footer (unten).
Für alle modernen Browser kann ich alles gut platzieren und wenn der Main-Content mal größer als der vorhandene Platz ist, dann wird im #main automatisch ein Scrollbalken gemacht.

Nur der IE bis Version 6 kommt damit nicht klar und macht das Div so lang wie auch der Content ist und will die komplette Seite scrollen lassen...

Ich bastle da schon seit Tagen dran und ich kriegs nicht hin.
Auf einer Seite stand, dass der IE nicht mit height-Angaben klarkommt, also hab ich damit ein wenig rumgespielt, was aber auch nix brachte, nun muss ich doch hier fragen...

Was kann ich tun? :-?

Link

Quelltext (verkürzt):

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
    <style type="text/css">
      body { margin: 0px; height: 100%;}
      #header {
        position: absolute;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #navi {
        position: absolute;
        width: 10em;
        height: 80%;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #main {
        position: absolute;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 12.5em;
        overflow: auto;
      }
      #footer {
        position: absolute;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </style>
 
  <body>
    <div id="header">...HEaDER...</DIV>
    <div id="navi">...NaVI...</DIV>
    <div id="main">
        <span>...MaIN...</span>
    </div>
    <div id="footer">...FOOTER...</div>
  </body>

<links defekt>
Screenshot IE6
Screenshot FF
</links defekt>


MfG kbot
 
Zuletzt bearbeitet:
Und wenn du für den Bereich Main das overflow attribut fest auf scroll setzt? Es ist gut möglich, dass der IE da andere default Werte nutzt als der FF.

Edit: Btw., hässliches Testdesign ;)
 
jo, das Design ist ja nur für Testzwecke, wenn dieses funzt, dann wirds noch geändert ;)

wenn ich overflow:scroll; mache, dann erscheint zwar ein Scrollbalben, aber der ist inaktiv, weil das Div trotzdem so lang bleibt und somit auch nix zum scrollen da ist, d.h. ich habe dann 2 Scrollbalken, einmal für body und einmal fürs Div :-?
 
Zuletzt bearbeitet:
dann muss die Höhe wohl auch von auto weg, also fest definiert werden. Was für eine Seite, die sich dynamisch anpassen soll natürlih nicht so geeignet ist.
 
Hi,

Versuch mal der Box "main" eine bestimmte Breite und Höhe zu geben (anstatt auto) und overflow ebenfalls auf auto lassen. Bei mir klappt es dann :)

//Edit: Zu spät, hatte hier nicht aktualisiert :(
 
ja, mit ner festen Höhe geht das wahrscheinlich, aber die will ich ja eben nicht haben, da jeder nunmal ne andere Auflösung hat und das Design bei jedem gleich aussehen soll...
 
Zuletzt bearbeitet:
*push*

mittlerweile ist ja nun der IE8 draußen und ich dachte mir "hooray, endlich bessere CSS-Kompatibilität" ...

also die Seite hat jetzt nicht nur die alten Fehler, die sie damals schon hatte, sondern is auch noch optisch kaputt gegangen -.-

So sollte es aussehen (Firefox3):


Und so sieht es aus (IE8 ):


gibt es mittlerweile schon eine Lösung für das Problem?

ich hab keinen Bock noch ewig auf meiner Frames-Seite rumzuhängen -.-


MfG kbot

ps. die Farben sind immer noch nur zur Veranschaulichung der Div-Boxen gedacht und nicht das endgültige Design ;)
 
Zuletzt bearbeitet:
Du gibst dem IE mehr CSS, damit der 6er / 7er das richtig darstellt. Das Problem ist nun, dass du dem 8er diese "Fehlerbereinigung" ebenfalls gibts.

<!--[if lt IE 8]><style type="text/css">
Zum Vergrößern anklicken....
Dieser Code sagt, dass das folgende CSS nur für IEs kleiner Version 8 ausgeführt werden soll.
 
kann sein, dass ich extra mehr Angaben für die IE<8 gemacht habe, allerdings gelten sie auch für alle anderen Browser, also dürften sie keine Besonderheiten darstellen und trotzdem richtig zu interpretieren sein ...

zumindest Firefox und Opera und Chrome können damit umgehn ...

Edit:
ups, zu dem oben stehenden Code hab ich ja später noch IE-spezifischen Code gemacht (total vergessen, sorry is schon länger her ^^)
mal schaun, wie es mit dem 'lt IE8' aussieht

Edit2:
goil, es funzt :) der IE8 scheint endlich mal ein guter Browser zu werden
vielen Dank für den Tipp!

jetzt m uss ich nur noch schaun, dass ich es in den IE<8 irgendwie gut hinkriege ...
 
Zuletzt bearbeitet:
kbot schrieb:
ups, zu dem oben stehenden Code hab ich ja später noch IE-spezifischen Code gemacht (total vergessen, sorry is schon länger her ^^)
mal schaun, wie es mit dem 'lt IE8' aussieht
Zum Vergrößern anklicken....
Du gehörst wohl zu den Pessimisten unter den Webdesignern. Solchen wie dir ist es jetzt auch zu verdanken, dass der IE8 jetzt eine "Kompatibilitätsansicht" hat. ;)
Bin gespannt wie es mit dem IE9 weitergehen wird und ob da auch so etwas notwendig sein wird. :think:
 
da muss man eigentlich keine unterscheidung machen. das geht auch so, zumindest für das "Design" was du jetzt hast.

und verwende auch mal nen richtigen doctype.
 
transitional is doch ein richtiger doctype ^^

zumindest für die Seiten, die ich baue, ist es genau der richtige ;)

und für das gewünschte Design geht es eben nicht "auch so" zumindest bei den Browsern IE<8, da sie die aktuellen CSS-Codes falsch oder erst garnicht interpretieren und somit was ganz anderes darstellen ...
 
Zuletzt bearbeitet:
also ich nehm immer xhtml transitional oder strict anstatt html...

was meinst du mit aktuelle css-codes? also so wie das design in deinem link zu sehen ist geht es locker ohne conditions.
 
das würd ich gern sehen, denn ich glaube nicht, dass sich die IE5-7 innerhalb des letzten Jahres geändert hätten ;)
 
du hast meine frage nich beantwortet...was sind bei dir aktuelle css-codes? ich sehe in deinem css nix was neu ist.
 
ok, also erstmal position: fixed; geht nicht bei IE<8
dann können diese Browser auch nicht, das darstellen, was ich möchte, nämlich ein scrollbares Div darstellen, welches von anderen Divs umgeben ist, die aber fest stehen sollen und auch sich dynamisch an die Fenstergröße Anpassen sollen, somit also keinen festen Wert bei height: und width: haben ...

aber was willst du hier eigentlich bezwecken?
wenn du nix Produktives beitragen kannst, bitte unterlasse deine Beiträge in meinen Thread

unter "Produktives" verstehe ich nicht "das was du willst, geht auch so"
sondern "das was du willst, kann man so machen Bsp.X, Bsp.Y"
oder "du benutzt 'blabla:50px;' benutze doch lieber 'blubb:50em;' dann geht das"
 
also position fixed geht sehr wohl im ie7 und wenn du meine fragen nicht beantwortest werd ich doch mal nachfragen dürfen... wozu du position fixed willst erschliesst sich mir auch nicht

ich nen teufel tun und dir nen tip geben. ich hab schon mehr als genug layouts umgesetzt die einige stufen komplexer waren als deins um zu wissen von was ich rede. da musst du mir nich in so nem dummen ton kommen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben