CSS Layout nur IE kompatibel?!

Status
Nicht offen für weitere Antworten.
D

der_Praktikant

Grünschnabel
Hallo,

ich habe ein Problem mit meinem Layout. Seit Tagen nun versuche ich ein Layout komplett in DIVs zu realisieren, weil es einen footer-bug im IE gibt.

So soll das Layout in etwa aussehen:
bsp-Bild

3 Spalten welche mit je einem background-Bild auf einem grauem bg-bild ZENTRIERT sind. Die mittlere Spalte soll eine Fußzeile haben.

Ich hätte es schon längst bewerkstelligt, könnte man Hintergrundbilder auf 2.Ebene komplett anzeigen.

Allgemein macht mir die unterschiedliche Interpretationsweise der einzelnen Browser zu schaffen.

Auf dem Internet Explorer 6 sieht alles perfekt aus. Nur auf anderen Browsern wird die Fußleiste um 77 Pixel (die Größe des footers) nach unten verschoben und man muss scrollen.

Ich bin mit meinem Latain am Ende und bitte nun um eure Kompetenz...

Code: 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
background: url(pics/bg.png);
}

div#center {
width: 954px;
margin: 0 auto;
min-height: 100%;
height: 100%;
border: 0;
}

div#shadow_l {
float:left;
min-height: 100%;
height: 100%;
width: 86px;
background: url(pics/shadow_l.png) repeat-y;
}

div#content {
float:left;
min-height: 100%;
height: 100%;
width: 782px;
background: url(pics/main_bg.gif) repeat-y;
}

div#shadow_r {
float:right;
min-height: 100%;
height: 100%;
width: 86px;
background: url(pics/shadow_r.png) repeat-y;
}

div.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}

div.footer {

width:954px;
margin: -77px auto 0 auto;
padding: 0;
height: 20px;
border-top: 0;
}
</style>
</head>
<body>

<div id="center">
     <div id="shadow_l">
	nlinks
     </div>

     <div id="content">
		<img id="banner"  src="pics/banner.png" border="0" alt="" style="float:left"/><br/>	
	contentDiv<br/><br/><br/><br/><br/><br/><br/>TEST<br/><br/><br/><br/><br/>
     </div>

     <div id="shadow_r">
	rechts
     </div>

     <div class="clear">&nbsp;</div>
</div>
<div class="footer">
<div style="float:left">
	<img src="spacer.gif" border=0 alt="" style="float:left"/>
	<img src="pics/bottom.png" border=0 alt="" style="float:left"/>
</div>
</div>

</body>
</html>
 
Hi,

vielleicht hilft dir dieser überarbeitete Quellcode weiter?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
html, body {
height: 100%;
margin: 0px;
padding: 0px;
background: url(pics/bg.png);
}

div#center {
width: 954px;
margin: 0 auto;
min-height: 100%;
height:auto !important;
height: 100%;
border: 0;
position:relative;
}

div#shadow_l {
float:left;
min-height: 100%;
height:auto !important;
height: 100%;
width: 86px;
background: url(pics/shadow_l.png) repeat-y;
}

div#content {
float:left;
min-height: 100%;
height:auto !important;
height: 100%;
width: 782px;
background: url(pics/main_bg.gif) repeat-y;
}

div#shadow_r {
float:right;
min-height: 100%;
height:auto !important;
height: 100%;
width: 86px;
background: url(pics/shadow_r.png) repeat-y;
}

div.footer {
position:absolute;
clear:both;
bottom:0;
width:954px;
height: 20px;
border-top: 0;
}
</style>
</head>
<body>

<div id="center">
     <div id="shadow_l">
        nlinks
     </div>

     <div id="content">
                <img id="banner"  src="pics/banner.png" border="0" alt="" style="float:left"/><br/>
        contentDiv<br/><br/><br/><br/><br/><br/><br/>TEST<br/><br/><br/><br/><br/>
     </div>

     <div id="shadow_r">
        rechts
     </div>

     <div class="footer">
          <div style="float:left">
             <img src="spacer.gif" border=0 alt="" style="float:left"/>
             <img src="pics/bottom.png" border=0 alt="" style="float:left"/>
          </div>
     </div>
</div>

</body>
</html>
Was die beiden äußeren Spalten #shadow_l und #shadow_r betrifft, empfehle ich dir, hier die Faux-Columns-Technik anzuwenden, die sicherstellt, dass der Schatten bei zunehmenden Inhalt auch mitwächst.
 
Hallo, danke für deine Mühe!

Leider hat es nichts gebracht.
Das Problem ist immernoch nicht behoben;

man muss immernoch scrollen um an die Fußleiste zu kommen. Dazu erstrecken sich nun die Hintergrundbilder nicht mehr auf die komplette Seite bis unten, sondern minimieren sich auf den Inhalt des Containers ;(

Und die width der DIVS sollen sich auch nicht mit dem wachsendem Inhalt vergrößern. Nur die height.
 
Zuletzt bearbeitet:
Wenn man noch scrollen muss, dann wird es wohl an der zu geringen Höhenangabe für den Footer entgegen seiner tatsächlichen Inhaltshöhe liegen.

Was die beiden äußeren Hintergrundbilder betrifft, habe ich dir eben einen Vorschlag unterbreitet, der auch dieses Problem löst.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück