ie div 100% height probleme

von **species_8472** » 14.05.2006, 14:22

hallo zusammen!

der internet-explorer macht mich als css-neuling völlich feddich.

unter

findet sich eine seite, die im firefox genau so angezeigt wird, wie gewünscht: der umpunktete contentbereich passt sich der fenstergröße an, enthält scrollbalken und wird von der fussleiste "verfolgt".
im explorer geht der contentbereich rechts und unten aus dem fenster raus. ich verzweifle daran, es beiden browsern recht zu machen.

hoffentlich findet jemand von euch eine lösung für mich.

hier die css:

html, body {
min-height: 100%;
width: 100%;
height: 100%;
}

html>body {
height: auto;
}

* html, body {
overflow:hidden;
}

.hg {
clear: both;
float: right;
width: 100%;
height: 100%;
z-index: 1;
visibility: visible;
}

.nameoben img, .kontaktunten img {
float:right;
}

.obenorange {
background-image: url(../gif/orangeobenhg.gif);
background-repeat: repeat-x;
position: absolute;
float: left;
height: 74px;
width: 200px;
top: 0;
left: 0;
z-index: 22;
visibility: visible;
}

.obengrau {
background-image: url(../gif/grauobenhg.gif);
background-repeat: repeat-x;
position: absolute;
height: 74px;
width: 100%;
top: 0;
right: 0;
z-index: 21;
visibility: visible;
clear: both
}

.nameoben {
position: absolute;
height: 41px;
top: 19px;
left: 0;
bottom: 0;
z-index: 40;
visibility: visible;
padding-right: 40px;
padding-left: 220px;
}

.navi {
background-color: white;
position: absolute;
width: 200px;
left: 0;
top: 74px;
z-index: 50;
overflow: hidden;
clip: rect(auto auto auto auto);
visibility: visible;
}

.untenorange {
clear: both;
background-color: #f93;
height: 26px;
width: 200px;
position: absolute;
bottom: 0;
z-index: 10;
visibility: visible;

}

.untengrau {
background-color: #999;
height: 26px;
width: 100%;
z-index: 5;
position: absolute;
left: 0;
bottom: 0;
visibility: visible;
}

.contenthg {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding-left: 200px;
z-index: 1;
}

.kontaktunten {
height: 17px;
position: absolute;
bottom: 0;
z-index: 20;
visibility: visible;
padding-right: 40px;
padding-left: 220px;
}
.contentmain {

position: absolute;
right: 40px;

left: 240px;
top: 95px;
bottom: 95px;
z-index: 46;
padding-right: 40px;
padding-bottom: 100px;
}
.maintext {

position: inherit;
height: 100%;
width: 100%;
border: dotted 1px #f93;
overflow: auto;
z-index: 46;
}

und hier das html:

<DOCTYPE>
<html>

<head>
<meta>
<link>
<style><obenorange></style>
<csscriptdict>
<script></script>
</csscriptdict>
<csactiondict>
<script><var></script>
</csactiondict>
</head>

<body>

<div>
<a><img></a></div>
<div></div>
<div></div>

<div>
<div>
<div>
<a><img></a></div>
<div>
<a><img></a></div>
<div>
<a><img></a></div>
<div>
<a><img></a></div>
<div>
<a><img></a></div>
</div>
</div>

<div>
<div> <img></div>
</div>

<div>

<div>

<p>d
d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>
<br></br>
d
ddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>

d<br></br>
<br></br>
d
d<br></br>

d<br></br>

d<br></br>
</p>
</div>

</div>
<div></div>

<div>

<img></div>
<div></div>
</body>
</html>

von **species_8472** » 14.05.2006, 16:06

o.k., problem nicht gelöst, aber zumindest gehts so (halbwegs):

anstelle von zwei boxen (.contentmain und .maintext) habe ich eine für den inhalt kreiert:

.content {

width: 70%;
height: 50%;
position: absolute;
top: 95px;
z-index: 46;
visibility: visible;
margin-left: 220px;
margin-right: 40px;
border: dotted 1px #f93;
padding: 12px;
overflow: auto;
}

zwar im firefox nicht mehr so wie geplant, aber funzt immerhin bei beiden browsern...

trotzdem wäre ich noch an einer 100%-lösung für beide browser interessiert.

von **Laus** » 14.05.2006, 18:53

Hallo species_8472
Ich würde dir Raten zuerst deine divsuppe etwas zu ordnen.
Je mehr du divs ineinander verschachtelst je schwieriger wird es alle Browser einigermaßen Zufrieden-stellend zu bedienen wie du ja selbst schon bemerkt hast.
Die Navigation kannst du zum Beispiel ganz ohne JavaScript mit einer einfache Liste realisieren. Dazu brauchst du nicht einmal ein drittel deines jetzigen Codes und es funktioniert auch noch dazu in allen Browsern sogar bei deaktiviertem JavaScript. Beispiele hierzu findest du hier.

In deinem Quellcode taucht so oft die Angabe 100% auf das das zusammen bestimmt schon 1000% sind. :wink:

Beachte bitte das wenn du dem Elternelement 100% gibst für das Kindelement keine 100% mehr zur Verfügung stehen.
Auch brauchst du normalerweise einem div nicht eine id und eine classe geben das ist nur in den seltensten Fällen notwendig.
Das nur mal so als allgemeine Hinweise.

Für dein Layout könntest du dir mal folgende Seiten und deren Quelltext ansehen. Seite1 Seite2

Bitte beschreibe nochmal etwas genauer was im FF nicht mehr so aussieht wie es sein soll

Gruß Xaver

von **species_8472** » 14.05.2006, 19:44

hallo laus!

du hast mit allem recht (code aufräumen, navi als liste).
id und class für ein element benutze ich, um in golive ausblendbare ebenen im html-dokument (id) und externes css (class) zu kombinieren. finde ich auch super umständlich, wüsste aber net, wie anders.

danke auch für die links. aber leider hilft mir das alles nix.

wenn ich ein leeres dokument erstelle mit nur dem text und nur den 2 klassen (.contantmain und .maintext) ist das ergebnis das selbe. klar muss ich den code entschlacken, aber das darstellungproblem liegt wo anders. die 100% height in maintext brauche ich wohl, um den scrollbalken zu erhalten, im explorer gehts aber leider aus´m bild raus. da ich den body nicht scrollen will, sondern nur den textcontent. früher mit inlineframe gemacht, aber frames sind ja böse ;-)

wenn mir irgendwer zumindest sagen könnte, ob es am boxenfehler vom explorer liegt oder wo ich den hebel ansetzten kann, wäre mir schon etwas geholfen. wie gesagt, ich bin "blutiger anfänger".

ach ja - bei meiner geänderten version (mit 70%) überlappt die fussleiste irgendwann den text wenn das fenster zu klein wird. ebenso verschwindet dann der rechte scrollbalken. und das beim ff und ie.

species_8472

von **species_8472** » 15.05.2006, 13:32

für alle interessierten:

dank laus ist das problem jetzt gelöst!

der explorer bekommt auf jeder html-seite zur erzwingung des "quirks-modus" etwas vor den doctype gesetzt und im css eine eigene styledefinition für den contentbereich :

* html .contentmain

durch das sternchen nur für den ie zu erkennen.

dann klappts auch mit dem explorer.

danke nochmal an laus!

von **skittles** » 15.05.2006, 16:54

species_8472 hat geschrieben:
dank laus ist das problem jetzt gelöst!

ja ohne laus wäre hier schon so mancher am IE verzweifelt!

Thanks auch von mir an dieser Stelle!

auch wenns nicht ganz hier her passt

ie div 100% height probleme

ie div 100% height probleme

Ähnliche Beiträge zu "ie div 100% height probleme"

Wer ist online?