Neuer Blog online - und 2 IE-Probleme :(

griffon

Hallo liebe Community,

ich habe mir über die Wochen mal ne website zusammengebastelt und bin noch am optimieren. Z.B. bei der Browserkompatibilität ;) So habe ich 2 Probleme im Internet Explorer:

Meine Überschriften werden nicht korrekt angezeigt (In den Unterseiten, z.b. auf der Kontaktseite).Ich bin der Meinung, dass es daran liegen könnte, dass ich in der CSS ne neue h7 eröffnet habe und der IE damit nicht umgehen kann. Ist aber nur eine Vermutung.
Der Footer springt auf die Mitte der Seite und steht nicht da, wo ein Footer zu stehen hat ;) Das ist bestimmt ein einfaches CSS-Problem, welches sich meinen Augen verschließt ;)

Wäre wirklich super, wenn ihr mir helfen könntet!

Vielen Dank schonmal und viele Grüße!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

gericoach

footer ist bei beiden, FF + IE8 unten, bei mir keine Unterschiede. h7 ist quatsch, das kennen beide nicht, es geht nur bis h6, eher Deinen Definitionen für IE6/IE7 solltest Du Dir mal ansehen, da scheint was im Argen zu liegen.

telekommander

Unsauberer Quellcode:
Der [FONT="Courier New"]<div id="page_wrap">[/FONT] liegt ausserhalb des [FONT="Courier New"]<body>[/FONT] -Tags: (Zeile:120)

Code

</head>
<div id="page_wrap">
        <div id="page_logo">

Es existiert ein zweiter [FONT="Courier New"]<body>[/FONT]-Tag: ( Zeile174)

Code

<div class="clear"></div><body class="wide_page">

... was deine Footerprobleme erklären würde.

[FONT="Courier New"]<h7>[/FONT] , siehe Gericoach.
http://validator.w3.org/check?verbose=…om%2Fkontakt%2F

griffon

Hey,

und gleich vielen Dank für Eure Antworten.
Den unsauberen Code habe ich gleich mal berichtigt, vielen Dank für den Hinweis!

Das Überschriften-Problem löste sich nun auch, habe mich mal im Rahmen der h6 bewegt ;)

Aber das Footer-Problem bleibt leider - trotz des fehlerhaften doppelten body-tags, der nun nicht mehr doppelt auftaucht :( Das Problem besteht beim IE 7 und abwärts, sonst geht es. Meine CSS für den Footer sieht so aus:

Code

div#footer{
        color: #666;
        font-size: 12px;
        background: url(images/footer_bg.gif) repeat-x;
        }
        div#footer div.footer_wrapper{
                width: 960px;
                margin: 0 auto;
                padding: 18px 0;
                /* position: relative; */
                }
                div#footer div.footer_left{
                        float: left;
                        width: 600px;
                        }
                div#footer div.footer_left a{
                        color: #ccc;
                        text-decoration: none;
                        }
                div#footer div.footer_left a:hover{
                        color: #fff;
                        }
/* END div#footer */

Alles anzeigen

Ich vermute ja, dass es hier einen fix gibt, den ich nur nicht kenne. Kann mir hier jemand helfen? Oder vielleicht mal Firebug anwerfen? ;)

Vielen Dank schon mal für Eure Hilfe bis hierher!

telekommander

Mangels IE, nur Ideen ...

Der Validator schreit immer noch ... http://validator.w3.org/check?verbose=…an-gerth.com%2F

Wenn ich den Quellcode auseinander nehme fällt mir auf, dass die Kommentare der Container nicht zum entsprechendem Start-Tag passen: z.B.

Code

</div>[COLOR="green"]<!-- end entry -->[/COLOR]

Für diesen ist ...

Code

<div class="post" id="... ">

... der Start-Tag

Sonst wäre da noch ein leerer Endtag:

Code

<div id="main_navi">
  <ul class="left">
    <li><!--end-->[COLOR="Red"]</a>[/COLOR]</li>

griffon

Hmmm, hab die Fehler mal behoben, jetzt ningelt nix mehr - aber der Footer bleibt beharrlich an der falschen Stelle stehen...

Blyawon

Im IE8 wirds korrekt angezeigt, IE7 und niedriger kann man vernachlässigen, die Nutzer sind selber Schuld...

griffon

Najaaa - der IE 6 wird immerhin noch am häufigsten verwendet... Und ich hätte das auch gern so, dass es sich alle Leute "normal" anschauen können. Mir ist auch aufgefallen, dass das Problem nur im IE 7 besteht... Ich mag den IE nicht :D

telekommander

Zitat von Blyawon

( ... ) die Nutzer sind selber Schuld...

... und kamen nie wieder.

Prüfe folgende Definitionen im Stylesheet ( style.css ab Zeile 1459 ).

Code

/*------------------------ Sticky Footer ------------------------*/
/*--------------- Code from www.cssstickyfooter.com -------------*/


html, body, #page_wrap{
        height: 100%;
}
body > #page_wrap{
        height: auto; min-height: 100%;
}
#container{
        padding-bottom: 48px;/* must be same height as the footer */
}
[COLOR=Red]#footer{
        position: relative;
        margin-top: -48px; /* negative value of footer height */
        height: 48px;
        clear:both;[/COLOR]
}

Alles anzeigen

griffon

Hi!

Also schon mal sehr gut gesehen - der Footer ist 80px hoch, da waren also die Werte falsch. Die korrigierte Version sieht nun so aus:

Code

/*------------------------ Sticky Footer ------------------------*/
/*--------------- Code from www.cssstickyfooter.com -------------*/


html, body, #page_wrap{
        height: 100%;
}


body > #page_wrap{
        height: auto; min-height: 100%;
}


#container{
        padding-bottom: 80px;/* must be same height as the footer */
}


#footer{
        position: relative;
        margin-top: -80px; /* negative value of footer height */
        height: 80px;
        clear:both;
}

Alles anzeigen

Aber es ändert sich leider gar nix (falls kein IE vorhanden ist, hilft vielleicht dieser link). naja, fast nix: Der Footer rutscht nun in der kompletten Höhe nach oben, nicht mehr nur die 48 px von vorher. Also er richtet sich jetzt exakt am unteren Fensterrand aus...

Ich habe die Seite auch mal durch den CSS-Validator laufen lassen, aber hier scheint es keine Probleme mit dem Footer zu geben (Ergebnis).

Beste Grüße!

telekommander

Kannst du ausschliessen das es an diesem Teil liegt ?
Mal temporär entfernen vielleicht ?

Tippe mal auf nichtgreifende CSS-Hacks.

griffon

Nochmal ich, mitten in der nacht ;)

Also ich habs nun hinbekommen, es fehlte ein margin: 0 auto;

der footer-code sieht nun so aus:

Code

div#footer{
        color: #666;
        font-size: 12px;
        background: url(images/footer_bg.gif) repeat-x;
        height: 80px;
        [COLOR=Red]margin: 0 auto;[/COLOR]
        clear: both;
        }
        div#footer div.footer_wrapper{
                width: 960px;
                margin: 0 auto;
                padding: 18px 0;
                /* position: relative; */
                }
                div#footer div.footer_left{
                        float: left;
                        width: 710px;
                        }
                div#footer div.footer_left a{
                        color: #ccc;
                        text-decoration: none;
                        }
                div#footer div.footer_left a:hover{
                        color: #fff;
                        }

Alles anzeigen

Nun wird er zwar korrekt im IE 7 angezeigt - aber erstens bleibt da drunter ein kleiner rand (das könnte ich ja noch verkraften), aber viel schlimmer ist, dass dadurch nun der abstand zwischen dem inhaltefenster und dem footer viel größer geworden ist (im Firefox). Jemand ne Ahnung, woran das liegen könnte?

Wünsche eine gute nacht ;)

griffon

gut, ich ziehe zurück - es war leider nur ne ansichtssache... blöd. problem bleibt!

ich habe probehalber also mal den von dir rot markierten bereich entfernt, aber da ändert sich gar nix... (siehe aktuelle css).wie gesagt: der footer fängt jetzt da an, wo die seite aufhört, bevor man mit scrollen anfängt. scrollt man nach unten, steht der footer eben mitten auf der seite...

entfernt man hingegen den kompletten sticky-footer, dann rutscht im IE der komplette footer in die navigation, im Firefox nur die grafik... der text bleibt unten als footer stehen.

zusammengefasst sieht meine footer-css nun so aus:

Code

div#footer{
        color: #666;
        font-size: 12px;
        background: url(images/footer_bg.gif) repeat-x;
        height: 80px;
        margin: 0 auto;
        }
        div#footer div.footer_wrapper{
                width: 960px;
                margin: 0 auto;
                padding: 18px 0;
                /* position: relative; */
                }
                div#footer div.footer_left{
                        float: left;
                        width: 710px;
                        }
                div#footer div.footer_left a{
                        color: #ccc;
                        text-decoration: none;
                        }
                div#footer div.footer_left a:hover{
                        color: #fff;
                        }
                div#footer div.footer_right{
                        float: left;
                        width: 250px;
                        }
                div#footer div.footer_right a{
                        color: #ccc;
                        text-decoration: none;
                        }
                div#footer div.footer_right a:hover{
                        color: #fff;
                        }
/* END div#footer */


/*------------------------ Sticky Footer ------------------------*/
/*--------------- Code from www.cssstickyfooter.com -------------*/


html, body, #page_wrap{
        height: 100%;
}


body > #page_wrap{
        height: auto; min-height: 100%;
}


#container{
        padding-bottom: 80px;/* must be same height as the footer */
}


#footer{
        position: relative;
        margin-top: -80px; /* negative value of footer height */
        height: 80px;
        clear: both;
}


/*---------------------- End Sticky Footer ---------------------*/

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Neuer Blog online - und 2 IE-Probleme :(

Jetzt mitmachen!