Beiträge von eldariel87

Danke für den Tipp habe da nun ein paar Teile gefunden, die mir gezeigt haben, wie ich ein halbwegs brauchbares workaround baue...(ein layout, dass genau zu dem passt, was ich habe, habe ich leider nicht gefunden) nicht super schön, aber durchaus ausreichend, bis das IE7 update kommt

Hallo allesamt,

der Grund, warum ich hier Frage ist offensichtlich... ich komme alleine nicht mehr weiter Habe leider auch nur wenig Erfahrung mit HTML/CSS Ich hoffe, es findet sich hier wer, der mir nen Denkanstoß geben kann, sodass ich das Problem gelöst kriege.

Ich baue eine Webpage bestehend aus Frames und mehreren JSP Seiten um, sodass statt Frames Divisions mit fixed positioning genutzt werden (Das Java Framework JSF macht mir sonst unnötige Probleme... das ist aber ein anderes Thema).

Meine Seite sieht in Firefox genau so aus und verhält sich genau so, wie ich es gerne hätte. Im Internet Explorer nicht. Version 6 eben dessen ist "glücklicherweise" Firmeninterner Standard...

Um fixed positioning zu bekommen, habe ich http://code.google.com/p/ie7-js/ in die Seite eingebunden und auch versucht mit Hilfe der Lösung auf http://artikel.fabrice-pascal.de/posfixedie6/2/ die fest positionierten frames nachzubilden.

Meine Probleme bestehen aus folgenden Punkten:
- Scrolling des Datenbereichs (division: content (blau)) funktioniert im IE nicht oder es wird in unendliche Weiten gescrollt ohne Auswirkung auf den Content, was auch als nicht funktionieren durchgeht...
- Der Datenbereich ist nicht wirklich da, wo er hingehört im IE. Er sollte links an die Navigation anschließen und zwischen der Division: content_head(rot) und bottom(helleres blau) angesiedelt sein.

Hier ein paar Bilder:
Firefox maximiert: http://i218.photobucket.com/albums/cc106/e…d_maximized.jpg
Firefox maximiert Scrollverhalten: http://i218.photobucket.com/albums/cc106/e…d_scrolling.jpg
IE maximiert: http://i218.photobucket.com/albums/cc106/e…d_maximized.jpg
IE maximiert (nicht)scrollverhalten: http://i218.photobucket.com/albums/cc106/e…noscrolling.jpg

Hier mein CSS File zur Positionierung: (body bekommt in einer anderen CSS File für Styles overflow: hidden zugewießen, die files alle zu posten wäre wohl etwas zu viel des Guten)

#head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 118px;
    width: 100%;
}


#navigation {
    position: fixed;
    top: 118px;
    left: 0;
    bottom: 21px;
    width: 175px;
    height: 100%;
    padding: 0 0.5em;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 11px;
    background-color: #EBEFF6;
    color: #003399


}


#content_head {
    position: fixed;
    top: 118px;
    left: 176px;
    height: 20px;
    right: 0;
    padding: 0 0.5em;
    background-color: #ff0000;
    margin-left: 0;
    margin-top: 0;
    margin-width: 0;
    margin-height: 0;
}


#content {
    position: fixed;
    top: 139px;
    left: 176px;
    bottom: 21px;
    right: 0;
    padding: 0 0.5em;
    overflow: auto;
    background-color: #0000ff;
}


#bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: 20px;
    width: 100%;
    /*border-top: 0.2em solid #ACA250;*/
    background-color:#007DD6;
    margin-left: 0;
    margin-top: 0;
    margin-width: 0;
    margin-height: 0;
}

Die Divisions heißen entsprechend in der html file. Neben eben diesen und ein wenig content und Einbindung von Scripts und CSS Files ist nicht viel in der Seite enthalten.

Die CSS File für IE5/6 (bezüglich des 2. Lösungsansatzes) sieht wie folgt aus:

html, body {
    padding: 0;
    overflow-y: hidden;
    overflow: visible;
}
#container {
    height: 100%;
    width: 100%;
    overflow: scroll;
}


#head {
    z-index: 1;
    position: absolute;
    width: 100%;
}


#navigation {
    z-index: 1;
    position: absolute;
    background-color: #EBEFF6;
}


#content_head {
    z-index: 1;
    position: absolute;
    background-color: #00ff00;
    /
    position: static;
    margin-left: 176px;
    margin-top: 131px;
    margin-right: 0px;
    margin-height: 20px;*
}


#content {
    position: static;
    background-color: #0000ff;
    margin-left: 176px;
    margin-top: 132px;
    margin-right: 0px;
    margin-bottom: 21px;
}


#bottom {
    z-index: 1;
    position: absolute;
    background-color: #ff0000;
    /
    position: static;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-height: 20px;*
}

Für heute habe ich das Ganze ersteinmal aufgegeben und hoffe, dass wer von euch ne Idee hat, was ich falsch mache. Würde mich über jegliche Hilfe freuen

Gruß Eldariel