zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Versatz vom Footer im IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.04.2014, 00:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2014
Beiträge: 5
franco.born befindet sich auf einem aufstrebenden Ast
Standard Versatz vom Footer im IE

Hallo und guten Tag Community,

ich stehe vor einem Problem, dessen Lösung mir bis dato verborgen bleibt...

Es geht um eine ganz einfache Seite (bisher ohne Inhalt) und bei der Darstellung in Firefox wird die Fußzeile so angezeigt, wie es erwünscht ist.
Wird die Seite im IE geöffnet, ist die Fußzeile (um die Breite des Contents) nach rechts verschoben (siehe footer_versatz.jpg).

Hier der HTML-Code:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Eine Homepage der xyz GbR</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="Die Seite der xyz GbR - f&uuml;r Sie..." />
    <meta name="author" content="Dipl.-Wirtsch.-Ing. (FH) Frank Boeckmann" />
    <meta name="keywords" content="" />

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

<body>

<div id="page">

        <div id="header">
        </div>

        <div id="navigation">
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>

        <div id="content">
            <p>der content... <br /><br /><br /><br /><br /><br /><br />der content...<br /><br /><br /><br /><br />der content... </p>
        </div>

        <div id="sitecontent">
            <p>der sitecontent<br /><br /><br />der sitecontent...<br /><br /><br />der sitecontent...</p>
        </div>

        <div id="footer">&copy; by xyz GbR  | <a href="#">Impressum </a>
        </div>
</div>

</body>
</html>
Dazu die passende CSS:
Code:
html, body {
    padding: 0;
    margin: 0;
    text-align: center; /* IE-Fix */
}

#page {
    width: 960px;
    margin: 10px auto;
    text-align: left; /* because of IE-Fix */
    min-height: 100%;
}

/* beginn der kopfzeile */
#header {
    width: 960px;
    height: 110px;
    background-color: #F6F6F6;
	background:url(img/logo_hatboe.jpg) 0 0 no-repeat;
}
/* ende der kopfzeile */

/* ================================================================ */
/* beginn der navigation */
#navigation {
    width: auto;
    background-color: #b95600;
    height: 36px;                  }

#navigation ul {
    padding: 0;
    margin: 0;
    list-style: none;              }

#navigation ul li {
    float: left;
    line-height: 36px;
    height: 36px; /* IE-Fix */
    padding: 0 10px;               }

#navigation a {
    display: block;
    color: #FFFFFF;
    font-weight: bold;
    width: auto;
    height: 100%;
    text-decoration: none;         }

#navigation a:hover {
    color: #808080;                }
/* ende der navigation */

/* ================================================================ */
#content {
    float: left;
    height: auto;
    background-color: #00FF00;
    width: 640px;
    padding: 10px;
}

/* anpassung ie6 */
* html #content {
    height: 100%;                  }

#sitecontent {
    width: 280px;
    margin-left: 660px;
    padding: 10px;
    height: auto;
    background-color: #FF00FF;
}

/* ================================================================ */
/*  fusszeile  */
#footer {
    position: absolute;
    bottom: 0;
    margin: 0 10px 0 0;
    padding: 0 20px 0 20px;
    width: 920px;
    background-color: #FFF2BC;
    line-height: 40px;
    height: 40px; /* IE-Fix */
    text-align: right;
}

#footer a {
    text-align: right;
    font-size: 1.2em;
    font-weight: bold;
    color: #b95600;
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}
/*  ende fusszeile  */
Kann mir jemand sagen, warum dem so ist und wie man das abstellt bzw. die passende Anpassung einbringt?

PS: Die grellen Farben dienen der Darstellung und sind gewöhnungsbedürftig...

Vielen Dank für die Mühen im voraus.

Gruß
Frank
Angehängte Grafiken
Dateityp: jpg footer_versatz.jpg (132,8 KB, 4x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.04.2014, 04:47
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Wozu unterstützt du noch den IE6?
Wir sind mittlerweile bei Version 11 angelangt.

Wer floatet muss auch clearen, daher
Code:
#footer {
    clear: both;
...
}
siehe dazu Float: Die Theorie
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.04.2014, 16:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2014
Beiträge: 5
franco.born befindet sich auf einem aufstrebenden Ast
Standard

Hallo Explanator,

erst einmal vielen herzlichen Dank! Kurz, knapp, präzise und richtig - Super!
Was den IE betrifft - so arbeiten noch einige mit den alten Dingern *hab ich gelesen*...
Wenn ich einmal groß bin, werde ich auch ein wenig Erfahrung in Sachen HTML und CSS vorweisen können - hoffe ich...

Nochmals vielen Dank für die schnelle Reaktion!

Gruß
Frank
Mit Zitat antworten
  #4 (permalink)  
Alt 07.04.2014, 16:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von franco.born Beitrag anzeigen
Was den IE betrifft - so arbeiten noch einige mit den alten Dingern *hab ich gelesen*...
Es steht im Internet deshalb kann es gar nicht falsch, bzw. unwichtig sein?
Mit Zitat antworten
  #5 (permalink)  
Alt 07.04.2014, 16:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2014
Beiträge: 5
franco.born befindet sich auf einem aufstrebenden Ast
Standard

Es ist mir schon klar, dass nicht alles Gold ist, was im Netz steht...
Ich kann mir aber nur dann ein bewertendes Urteil erlauben, wenn ich davon genügend Ahnung bzw. eine ausreichende Erfahrung habe...
Und das habe ich nicht - deswegen lese ich ja solche Statements - und werde dazu lernen ...
Danke.
Gruß
Frank
Mit Zitat antworten
  #6 (permalink)  
Alt 07.04.2014, 17:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Siehe auch noch CSS Sticky Footer

Gebe mal Content bei dir reichlich Textinhalt Dan, siehst du es.

__________
MfG Roland
Mit Zitat antworten
  #7 (permalink)  
Alt 07.04.2014, 17:35
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Stand der Entwicklung

Du kannst beruhigt davon ausgehen nur noch mit dem IE 11 oder neuer zu tun zu haben.
Der Support von Windows XP läuft morgen aus. Damit hat es sich auch für den IE 8 erledigt. Der IE 9 und 10 ist dank Autoupdate quasi Null. Es bleiben also nur nur noch moderne Browser übrig.

Siehe für Statistik der Browserververteilung auch StatCounter Global Stats - Browser, OS, Search Engine including Mobile Market Share

Html 4 und XHTML1.0 ist auch bald Geschichte, zumindest im Herbst 2014 ist es wohl vorbei und dann wird vom W3C nur noch HTML5 empfohlen.

Es spricht aber nichts dagegen schon jetzt alle neuen Seiten in HTML5 zu schreiben und CSS3 zu nutzen. Die Unterstützung durch Broswer kann als gut bis sehr gut angesehen werden.

Für einzelne Features empfiehlt es sich dennoch immer mal wieder ein Blick auf die Seite Can I use... Support tables for HTML5, CSS3, etc zu werfen, da einzelne Bereiche noch nicht ausreichend Unterstützung finden(Als Beispiel sei hier mal input type="date" genannt)
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #8 (permalink)  
Alt 08.04.2014, 14:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.04.2014
Beiträge: 5
franco.born befindet sich auf einem aufstrebenden Ast
Standard Footer und Entwicklungsstand

@K.Roland
Du hast es geahnt denke ich ...
Es kommt zu Schwierigkeiten - der Footer scrollt mit nach oben...
Ich habe noch keine Ahnung, wie es umzusetzen ist, dass das nicht mehr passiert - auch wenn dem Grunde nach viel beschrieben wird ...

@explanator
Werde wohl dann davon ausgehen - macht Sinn und ist logisch... Die Umsetzung wird noch etwas andauern; ich muss noch dazu lernen ...

Danke für die Reaktionen!

Ich wünsche noch frohes Schaffen.

Gruß
Frank
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Footer am unteren Seitenrand scar CSS 3 21.04.2013 21:34
Footer will nicht wie ich will! vipfafen CSS 7 11.12.2012 00:07
Footer container werden untereinander dargestellt... Ntracks CSS 10 07.08.2010 19:24
Layout - footer und layer[links] - Probleme - (CSS-Anfänger) Basti_LRT CSS 1 08.10.2007 23:03
Footer Problem blub19 CSS 6 25.01.2005 12:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:29 Uhr.