Footer Ha*k InternetExplorer

[11Nixname]

Hallo,

bei meiner Website möchte ich, dass der Footer
immer unten ist,
da dieser aus einer Verlaufsgrafik besteht.

Dazu gebe ich dem div footer folgende Werte:

#footer {
       
         background-image: url(../b-g-2.gif);
        background-repeat: repeat-x;
        height: 200px;
        float: left;
        width: 100%;
        [B]bottom: 0;
        position: absolute;[/B]}

Bei Firefox, Internet Explorer 8, Chrome wird alles richtig angezeigt (Grafik in der Mitte, Seite erstreckt sich bis nach unten).
Wenn ich allerdings den IE 8 in die Kompatibilitätsansicht schalte (da ich keinen IE6 habe) fängt die Grafik erst in der Mitte an,
und Links bleibt alles frei.
(bild im Anhang).

Benutzt jemand den gleichen Code und weiß,
dass es beim IE6 funktioniert?

Oder sind ältere Internet Explorer Versionen eher zu vernachlässigen?

 

[fexx]

AW: Footer Ha*k InternetExplorer

Schick mal bitte einen link zu deiner Seite oder den kompletten Code.

Oder sind ältere Internet Explorer Versionen eher zu vernachlässigen?

Das kommt auf die Zielgruppe an...

// Edit:
entferne mal das "float: left;"

 

[maxderboss]

AW: Footer Ha*k InternetExplorer

Versuchs mal mit margin-left: -50%

Irgendwie sowas habe ich auch mal gehabt. Ein Versuch wär es wert..

LG,
Max

 

[11Nixname]

AW: Footer Ha*k InternetExplorer

Hi,

kompletter Code:

(einiges ist noch nicht so passend, aber ist ja auch ein entwurf...
valide ist es aber)
CSS

/* RESET STYLESHEET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0} /*Reset Ende*/


body {
background: #EEE;
text-align: center;
background-image: url(../b-g.gif);
background-repeat:repeat-x;




/*color:#222222;
margin: 20px 30px;
background: #eaeaeafff;
border: 1px solid #ccc;
Damit auch ohne Inhalt etwas zum testen sichtbar ist:
min-height: 640px;*/}



/*Navigation*/

#navi {width: 980px;

height: 150px;}

ul#nav { height: 50px;
float: right;
margin-top: 90px;
}

ul#nav li {
float: left;
list-style: none;
display: block;
margin-left: 15px;
margin-top: 25px;
}
ul#nav li a {
text-decoration: none;
font-family: Cambria;
font-size: 16px;
color: #EEE;}
ul#nav li a:hover {
color: #fff;
text-decoration: underline;
}

ul#nav li.span a {color: #fff;
text-decoration: underline;}

/*Text auf der linken Seite*/
#inhalt {float:left;
text-align: left;
width: 980px;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 15px;
color: #2b2b2b;
font-family: cambria;
font-size: medium;

min-height: 300px;




/* border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:0;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright:10px;*/
}

#fenster {float: right;

min-width: 600px;
min-height: 450px;
max-width: 500px;
margin-right:0;
margin-left: 5px;
padding-left: 20px;
padding-bottom: 5px;
}

#footer {

background-image: url(../b-g-2.gif);
background-repeat: repeat-x;
height: 200px;

width: 100%;
bottom: 0;
position: absolute;
margin-left: -50%;


/* text-align: left;
font-family: Verdana, Geneva, sans-serif;
font-size: medium*/}

#zusatz.mittig {font-family: veranda;
text-align: center;
font-size: small;
width: 980px;
clear:both;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
#zusatz.mittig a {color: black}



/*Galerie Teil*/

#galerie {
width: 150px;
float: left;
padding-left: 20px;
}
#galerie ul {line-height: 1.5em;
font-family: cambria;
font-size: medium;
list-style: circle;
list-style-position: inside;
}
#galerie ul a {text-decoration:none;
color: #222;}
#galerie ul a:hover {color: #303030;
text-decoration: underline; }
#vorschau {
float: right;
width: 730px;
padding-left: 30px;
padding-right: 10px;
border-left: 1px dashed #2b2b2b;

min-height: 300px;}
#vorschau ul {margin-left: 20px;
margin-top: 5px;
margin-bottom: 5px;
list-style: disc;
list-style-position: inside;
font-size: medium;
}
#vorschau ul a {color:#004;
}
#vorschau ul a:hover {color:#007}

/*Umschluss*/
#umschluss {

height: auto;
margin:auto;
width: 980px;
}

/*Überschriften
*/
h1 { font-weight: bold;
margin-bottom: 10px;
margin-top: 10px;}
h2 {font-weight: bold;
margin-bottom: 15px;
margin-top: 10px;
color:#2b2b2b;
font-size: large;}

/*p definierung*/

#inhalt p {margin-top: 5px;
margin-bottom: 10px;}

/* strong*/
#inhalt strong {font-weight: bold;}
/*Footer Hochziehteil*/

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
   
    <link href="design/design.css" type="text/css" rel="stylesheet">
    <link href="bilder/favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>

<body>

<div id="umschluss">
<div id="navi">

  <ul id="nav">
            <li><a href="index.php">startseite</a></li>
            <li class="span"><a href="#">bildergalerie</a></li>
            <li><a href="ueber.php">&uuml;ber mich</a></li>
            <li><a href="impressum.php">impressum</a></li>
   </ul>
</div><!--navi ende-->



<div id="inhalt" class="content">
<div id="galerie">
<?php include ("auswahl.php")

?>

</div>
<div  id="vorschau"> 





   
</div><!--vorschau ende-->
</div><!--inhalt ende-->
</div><!--umschluss ende-->

<!--Footer Anfang-->
<?php include ("footer.php")

 ?>
<!--Footer Ende--> 




</body>
</html>

und der Php Footer

<div id="footer" class="footer">
<!--
<a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
        alt="CSS ist valide!" />
</a>-->

<div class="mittig" id="zusatz">
 <a href="impressum.php">Impressum/Disclaimer</a>

</div>

</div>

Bei margin-left -50% ist das Problem bei der Kompatibilitätsansicht
verschwunden,
taucht dann aber bei der Nicht-kompi-ansicht des IE8 wieder auf,
bei Firefox, Chrome ebenfalls ( es hängt dann nach links zur hälfte raus)
Ein Jammer, dass immer noch so viele diesen Bockmist Browser benutzen :hmpf:.