Footer im IE7

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Footer im IE7

    Hallo,
    ich habe ein für mich merkwürdiges Verhalten beim IE7.
    Vorweg gesagt, das ist meine erste Seite, die ich hauptsächlich in CSS erstellt habe und bin daher noch nicht ganz fit darin.

    Also, folgendes Problem:
    Im IE7 erschien bei mir der Footer immer zu weit unten oder zu weit rechts. Im Firefox funktioniert alles super.
    Meine Homepage ist * * * mc-spike.de * * *

    Nachdem ich etwas rumprobiert habe, habe ich es geschafft, auch mit dem IE den Footer korrekt anzeigen zu lassen.
    Aber das komische ist, dass ich im HTML-Quelltext unter dem "div id=footer" einen leeren Kommentar schreiben muss. Fehlt der Kommentar, ist der Footer wieder verschoben.
    Das kann aber doch nicht normal sein, dass ich einen leeren Kommentar schreiben muss. Oder?

    Hier mal der HTML-Quellcode:

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>* * * mc-spike.de * * *</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <link href="text.css" rel="stylesheet" type="text/css">
    <link href="layout.css" rel="stylesheet" type="text/css">

    </head>

    <body class="text">

    <div id="rahmen">
    <div id="titelbox"></div>
    <div id="navigationbox">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="auto.html">Auto</a></li>
    <li><a href="motorrad.html">Motorrad</a></li>
    <li><a href="paintball.html">Paintball</a></li>
    <li><a href="diverses.html">Diverses</a></li>
    <li><a href="impressum.html">Impressum</a></li>
    </ul></div>

    <div id="rechtebox">
    <h1 class="rechtskapitel">Auto</h1>
    <h2 class="rechtskapitel">Kapitel:</h2>
    <ul>
    <li><a href="auto.html">Einleitung</a></li>
    <li><a href="auto-chronik-1.html">Chronik</a></li>
    <li><a href="auto-umbauten.html">Umbauten</a></li>
    <li><a href="auto-fakes.html">Fakes</a></li>
    <li><a href="auto-veranstaltungen.html">Veranstaltungen</a></li>
    </ul>
    <br><br>
    <h2 class="rechtskapitel">externe Links:</h2>
    <ul>
    <li><a href="http://www.motor-talk.de" target="_blank">Motor-Talk Forum</a></li>
    </ul>
    </div>

    <div id="mainbox">
    <p>Text</p>

    </div>

    <div id="footer"><p class="footer">&copy; 2009 by Maik Kl&ouml;hn</p></div>
    <!-- -->
    </div>

    </body>
    </html>


    Nur, wenn ich den rot markierten Kommentar einfüge, erscheint der Footer auch im IE7 korrekt.

    Jetzt noch mein layout.css:


    body {
    margin: 0px;
    padding: 0px;
    background-color:#000000;
    text-align:center;
    }

    #rahmen {
    width:960px;
    height:785px;
    margin:0 auto;
    margin-top: 20px;
    text-align:left;
    }

    #titelbox {
    width:960px;
    height:125px;
    background-color:#cccccc;
    background-image:url(bilder/layout/titel.jpg);
    vertical-align:bottom;
    background-repeat:no-repeat;
    background-position: center bottom;
    }

    #navigationbox {
    width:960px;
    height:20px;
    background-color:#cccccc;
    background-image:url(bilder/layout/navileiste.gif);
    border:none;
    vertical-align:bottom;
    background-repeat:no-repeat;
    background-position:center;
    }

    #navigationbox ul {
    margin:0px;
    padding-left:15px;
    list-style-position: inside;
    }

    #navigationbox li {
    padding-right:15px;
    display:inline;
    }

    #navigationbox a {
    color: #cccccc;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
    font-size:11px;
    font-weight: bold;
    }

    #navigationbox a:active {
    color:#933000;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
    font-size:11px;
    font-weight: bold;
    }

    #navigationbox a:hover {
    color:#933000;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
    font-size:11px;
    font-weight: bold;
    }


    #rechtebox {
    width:210px;
    height:620px;
    padding:10px;
    background-color:#cccccc;
    float:right;
    }

    #mainbox {
    position:absolute;
    width:710px;
    height:620px;
    padding:10px;
    background-color:#cccccc;
    float:left;
    }

    #footer {
    clear:both;
    width:960px;
    height:40px;
    background-color:#cccccc;
    background-image:url(bilder/layout/fussleiste.gif);
    position:absolute;
    margin-top:595px;
    border:none;
    /*vertical-align:bottom;*/
    background-repeat:no-repeat;
    background-position:center;
    }


    Ich hoffe da steigt jemand durch und kann mir helfen.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Harribi () aus folgendem Grund: Falsches Forum

  • magicsepp schrieb:

    PHP-Quellcode

    1. <div id="footer"><p class="footer">&copy; 2009 by Maik Kl&ouml;hn</p></div>
    2. <!-- -->
    3. </div>


    denke da ist ein /div zuviel


    Ich habe es gerade noch ein paar mal durchgeschaut, aber leider stimmt die Anzahl der /div's.

    Das Layout ist verschachtelt.
    Und das Letzte /div gehört zum Rahmen (wrapper)
    Darüber wird der footer abgeschlossen.
    Die anderen Blöcke: titelbox, navigationsbox, rechtebox und mainbox werde auch jeweils abgeschlossen.

    Ich habe jetzt hier noch einmal den HTML-Teil mit den einzelnen Containern farbig markiert.


    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>* * * mc-spike.de * * *</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <link href="text.css" rel="stylesheet" type="text/css">
    <link href="layout.css" rel="stylesheet" type="text/css">

    </head>

    <body class="text">

    <div id="rahmen">
    <div id="titelbox"></div>
    <div id="navigationbox">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="auto.html">Auto</a></li>
    <li><a href="motorrad.html">Motorrad</a></li>
    <li><a href="paintball.html">Paintball</a></li>
    <li><a href="diverses.html">Diverses</a></li>
    <li><a href="impressum.html">Impressum</a></li>
    </ul></div>

    <div id="rechtebox">
    <h1 class="rechtskapitel">Auto</h1>
    <h2 class="rechtskapitel">Kapitel:</h2>
    <ul>
    <li><a href="auto.html">Einleitung</a></li>
    <li><a href="auto-chronik-1.html">Chronik</a></li>
    <li><a href="auto-umbauten.html">Umbauten</a></li>
    <li><a href="auto-fakes.html">Fakes</a></li>
    <li><a href="auto-veranstaltungen.html">Veranstaltungen</a></li>
    </ul>
    <br><br>
    <h2 class="rechtskapitel">externe Links:</h2>
    <ul>
    <li><a href="http://www.motor-talk.de" target="_blank">Motor-Talk Forum</a></li>
    </ul>
    </div>


    <div id="mainbox"><p>Text</p></div>

    <div id="footer"><p class="footer">&copy; 2009 by Maik Kl&ouml;hn</p></div>
    <!-- -->
    </div>

    </body>
    </html>


    Jetzt habe ich es soweit hinbekommen.
    Lösung:


    body {
    margin: 0px;
    padding: 0px;
    background-color:#000000;
    text-align:center;
    }

    #rahmen {
    width:960px;
    height:785px;
    margin:0 auto;
    margin-top: 20px;
    text-align:left;
    }

    #titelbox {
    width:960px;
    height:125px;
    background-color:#cccccc;
    background-image:url(bilder/layout/titel.jpg);
    vertical-align:bottom;
    background-repeat:no-repeat;
    background-position: center bottom;
    }

    #navigationbox {
    width:960px;
    height:20px;
    background-color:#cccccc;
    background-image:url(bilder/layout/navileiste.gif);
    border:none;
    vertical-align:bottom;
    background-repeat:no-repeat;
    background-position:center;
    }

    #rechtebox {
    width:210px;
    height:620px;
    padding:10px;
    background-color:#cccccc;
    float:right;
    }

    #mainbox {
    width:710px;
    height:620px;
    padding:10px;
    background-color:#cccccc;
    float:left;
    }

    #footer {
    clear:both;
    position:relative;
    bottom:45px;

    width:960px;
    height:40px;
    background-color:#cccccc;
    background-image:url(bilder/layout/fussleiste.gif);
    border:none;
    background-repeat:no-repeat;
    background-position:center;
    }


    Ich habe bei #mainbox

    HTML-Quellcode

    1. position:absolute
    entfernt
    und bei #footer habe ich

    HTML-Quellcode

    1. position:asolute
    gegen

    HTML-Quellcode

    1. position:relative
    getauscht und die Ausrichtung des Footers nicht von der Oberseite, sondern von unten gerechnet.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword () aus folgendem Grund: Doppelpost