✔ Problem mit Footer, besonders im Internet Explorer

  • Themenstarter Themenstarter hot_wax
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
H

hot_wax

Hallo,

ich hock schon seit ein paar Tagen an dem Problem ein Footer zumachen. Hab auch schon gegoogelt zwar was gefunden aber bringt kaum was.

Mein Problem ist das mein Design im Firefox korrekt angezeigt wird, jedoch lässt er zwischen Contentende und Footer eine kleine Spalte, dass soll er aber nicht. Im Internet Explorer macht er mein Content nichtmal 100% hoch, sondern nur so hoch wie der Inhalt ist und er hat auch diese Spalte.

Könnt ihr mir helfen.

Hier der Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
html, body {

    height: 100%;
    margin:0px;
    padding:0px;
    overflow: auto;
}
img {
    border:0px;
    display:block;
}

#page {
    margin:0px;
    padding:0px;                                                        
    height: 100%;
    
}
.header {
    background-image:url(bilder/header.jpg);
    height:258px;
    clear:both;
    background-repeat:no-repeat;
}
#content {
    width:852px;
    min-height:470px;  
    clear:right;
    margin: 0px;
    background-image:url(bilder/contentspacer.jpg);  
}
#footer {
    clear:both;
    bottom:0px;
    margin-top: 1em;
    text-align:center;
    height:20px;
    width:852px;
    background-image:url(bilder/contentfooter.jpg);
}

-->
</style></head>

<body>
<div id="page">
    <div id="head">
        <div class="header"></div>
    </div>
    <div id="content">
        <p>
         </p>
    </div>
    <div id="footer">ss</div>
</div>
</body>
</html>
 

Anhänge

  • problem.jpg
    problem.jpg
    246,3 KB · Aufrufe: 58
Hi,

versuch es mal hiermit:

Code: 
#content {
    width:852px;
    min-height:470px;
    height:auto !important;
    height:470px;
    clear:right;
    margin: 0px;
    background: url(bilder/contentspacer.jpg);
}
#footer {
    clear:both;
    /*bottom:0px;*/
    /*margin-top: 1em;*/
    text-align:center;
    height:20px;
    width:852px;
    background: url(bilder/contentfooter.jpg);
}
 
Maik hat gesagt.:
Hi,

versuch es mal hiermit:

Code: 
#content {
    width:852px;
    min-height:470px;
    height:auto !important;
    height:470px;
    clear:right;
    margin: 0px;
    background: url(bilder/contentspacer.jpg);
}
#footer {
    clear:both;
    /*bottom:0px;*/
    /*margin-top: 1em;*/
    text-align:center;
    height:20px;
    width:852px;
    background: url(bilder/contentfooter.jpg);
}
Zum Vergrößern anklicken....


Danke im Internet Explorer ist jetzt alles Perfekt. Bloß im Firefox, sobald der INhalt größer wird als die angegeben Höhe macht er wieder eine Spalte zwischen Footer und Contentende?

Kann mir da vllt noch jmd helfen ?
 
Notier mal zu Beginn des Stylesheets folgende Regel:

Code: 
* {
margin:0;
padding:0;
}
 
Entschuldigt doch ich ahbe wieder ein neues Problem und dafür wollte ich kein neues Thema eröffnen.

Mein Problem ist ähnlich wie davor, bloß das es diesmal am Firefox liegt.

Das Problem ist, das sobald in den Content-DIV ein neues DIV-Tag eingefügt wird, der Content nicht mehr dem Inhalt mitgeht, jedoch wenn ein anderer Tag beispielweise P-Tag eingefügt wird ist alles OK. Im IE ist auch soweit alles Gut.

Code:
HTML: 
    <div id="content">
    	<div style="float:left; width:300px;">d</div>
        <div style="float:left; width:300px;">balbla der Inhalt</div>
    </div>
    <div id="footer">
    </div>

HTML: 
* {
    margin:0;
    padding:0;
}
html, body {
    height: 100%;
    margin:0px;
    padding:0px;
    overflow: auto;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#333333;
    text-decoration:none; 
}
#content {
    width:852px;
    min-height:475px;
    height:auto !important;
    height:475px;
    clear:right;
    margin: 0px;
    background: url(../../bilder/contentspacer.jpg);
    background-repeat:repeat-y;
    padding-top:20px;
    padding-left:50px;
}
#footer {
    clear:both;
    bottom:0px;
    height:15px;
    text-align:left;
    padding-left:71px;
    width:852px;
    background: url(../../bilder/contentfooter.jpg);
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#818489;
    background-repeat:repeat-y;
}

Könnt ihr mir helfen?
 
Hi,

die Floatumgebung muss noch zum Abschluss "gecleart" werden, damit der Inhalt die umschliessende Box #content am unteren Elementrand nicht überlappt, sondern von ihr in voller Höhe umschlossen wird - siehe auch http://positioniseverything.net/easyclearing.html.

Code: 
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Code: 
<div id="content" class="clearfix"> ... </div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück