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;
}
Alles anzeigen
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;*
}
Alles anzeigen
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