✔ Problem beim Footer und Nachladen von Inhalten

Status
Nicht offen für weitere Antworten.
F

FipsTheThief

Erfahrenes Mitglied
Naja Problem ist gut in allen Browsern klappt es bereits gut ausser im IE.

Ich habe dafür das Tutorial von Tutorials hier genommen (3 spalten Layout) um den Footer immer am unteren Ende der Seite zu positionieren klappt prima in allen Browsern.
Solange kein JS ins Spiel kommt.

Also um es so zu sagen , die Seite wird vorbereitet , es kommt ein Profil für einen Charakter ein Profil für 1 Mitglied. So ein Mitglied kann aber mehere Charaktere haben so das diese wieder in Unterboxen festgehalten werden wo nun noch kein Inhalt hinterlegt ist.

Diese Inhalte werden dann später dynamisch über Ajax eingeladen und ziehen den Inhaltsbereich weiter auseinander.

Das klappt bis jetzt sehr gut , mehr oder weniger im IE. Der streckt den Inhalt zwar ebenfalls aber der Footer bleibt nun bei seiner Position.

So ca kann man sich das vorstellen
HTML: 
<div class="ground">
    <div class="header"></div>
     <div class="content">
         <div class="subContent">weitere Inhalte die geladen werden sollen</div>
     </div>
     <div class="footer"></div>
</div>

.ground selber bekommt die Höhe 100% (IE) oder min-height:100% height:auto !important; (alle anderen Browser)

Der Footer hat eine absolute Positionierung von bottom = 0 px somit ist der wirklich immer unten.

Auch wenn ich die Seite neu lade nur bei dem dynmaischen Inhalten im IE nicht.

Ich hab nun selber 2 Lösungs Ansätze , der erste wäre man positioniert den Footer relativ aber dann ist er nicht immer ganz unten, aber auf jeden Fall immer unter dem Subcontent.
Oder b) man zwingt das Äffchen dazu bei jeden Ajax Reload die Document Höhe neu zu holen und den Footer immer neu zu positionieren.

Das ganze kann man sich hier auch noch einmal ansehen , ich weiß sieht nen bissel merkwürdig aus aber ist ja im Aufbau.

http://www.bitraum.com/warhammer/index.php?action=Mitglieder&s=1

Ein wenig scrollen , und unten stehen dann 2 dicke Namen auf die mal klicken. da sieht man das IE problem ganz gut , bis auf die Tatsache das der Footer eh 2 mal kommt irgendwie. Hab wohl das background-repeat da noch nicht ausgestellt :/.

Wäre super wenn da jemand Rat wüsste , mit freundlichen grüßen.
 
Hi,

vielleicht lässt sich der IE (6 +7) von der alternativen Technik footerStickAlt: A more robust method of positioning a footer überzeugen, den Footer beim Nachladen der dynamischen Inhalte ordnungsgemäß nach unten zu verschieben?

Was zudem auffällt, ist die Tatsache, dass der Footer im IE6 höher dargestellt wird, was an den Polsterungseigenschaften des eingebundenen Listenelements liegt, die nicht auf null zurückgesetzt sind, und so das Hintergrundbild in der Vertikalen wiederholt wird.
 
Mhm ich hab das Problem inzwischen gefunden , war nen ziemlicher Krampf aber so ist nun mal der IE 6.0.

Der punkt ist , das der Content Bereich ein Padding nach unten brauch damit die Inhalte nicht im Footer verschwinden. Und genau damit kommt der IE nicht mehr klar wenn man Inhalte nachläd. Lässt man dieses Padding weg klappt es aber dann rutschen die Inhalte wieder in den Footer rein.

Aber der IE ist aber auch der einzigste der es fertig bringt onresize auf allen möglichen Elementen zu besitzen. Wie ein DIV zum Beispiel , ob es der FF oder Opera machen kA kann aber in dem Moment eingentlich völlig egal sein.

Also onresize Event auf den Wrapper , wenn der sich ändert in der Höhe dann wird halt der Footer von oben an aus positioniert - höhe vom Footer dann stimmt es wieder.
Das ist aber wieder eine JS Lösung nur für den IE , aber da das Problem eh nur dann auftritt wenn man mit Ajax was nachläd ist es auch Wurst.

Meine Lösung dazu sieht nun so aus.

HTML: 
<!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">
    <head>
        <style type="text/css">
            body , html {
                height:100%;
                margin:0;
                padding:0;
            }

            .wrapper {
                position:relative;
                min-height:100%;
                height:auto !important;
                height:100%;
                background:#00ccdd;
            }

            .content {
                background:#cdcdcd;
                padding:0 0 40px 0; /* das padding ist im IE daran schuld */
            }

            .foot {
                position:absolute;
                bottom:0px;
                background:#000;
                height:40px;
                width:100%;
                color:#FFF;
                width:100%;
            }
        </style>
        <script type="text/javascript">
            function bauContent () {
                var s = '<p>';
                for(var i = 0 ;i < 1000;i++) {
                    s += " ein paar worte hier";
                }
                return s+"</p>";
            }

            function stopfe () {
                var e = document.getElementById('vollstopfen');
                e.innerHTML = bauContent();
                return false;
            }

            function leere() {
                var e = document.getElementById('vollstopfen');
                e.innerHTML = '';
                return false;
            }

        window.onload = function () {
           /*
            *den Event legen wir für den IE drauf falls sich der Wrapper 
            *dynamisch ändern sollte
            */
            if(document.attachEvent) {
                var w = document.getElementById('wrapper'); 
                w.attachEvent("onresize",function (e) {
                            var e = window.event;
                            var t = e.srcElement;
                            var f = document.getElementById('foot');
                            f.style.top = (t.offsetHeight-f.offsetHeight)+"px";});
            }
        }
        </script>
    </head>
    <body>
        <div class="wrapper" id="wrapper">
            <div class="content">
                <a href="#" onclick="stopfe()">stopfe voll</a>
                <a href="#" onclick="leere()">leer</a>
                <div id="vollstopfen"></div>
            </div>
            <div class="foot" id="foot">wtf</div>
        </div>
    </body>
</html>

Das hatter nun erstmal geschluckt also der 6.0 IE wie es im 7.0 aussieht kA leider aber für den IE muss man wohl wirklich bei jeden Mist ne extra Wurst braten.

Maik hat gesagt.:
...
Was zudem auffällt, ist die Tatsache, dass der Footer im IE6 höher dargestellt wird, was an den Polsterungseigenschaften des eingebundenen Listenelements liegt, die nicht auf null zurückgesetzt sind, und so das Hintergrundbild in der Vertikalen wiederholt wird.
Zum Vergrößern anklicken....

Ich bin jetzt nicht so der CSS Crack bin froh wenn es überall einigermasen gleich ausschaut und was ich brauch hole ich mir mal aus Tutorials ;).

Was hat das mit den Polsterungseigenschaften denn auf sich ? Ich mein inzwischen hab ich das Login Feldchen auch in den header verschoben in die Linke obere Ecke da es nur für den Admin Bereich sein solll.

Danke auf jeden Fall für die Antwort und den Link werd mir das auch nochmal ansehen.
 
Zuletzt bearbeitet:
Mhm bei mir ging es ohne JavaScript im IE 6.0 überhaupt nicht der blieb immer einfach stehen :/.

Das Problem ist das ich auch Linux habe und da kein IE habe im Moment leider. Nutzt du den IE 7.0 oder 6.0 ? wäre ja klasse wenn es im 7.0 IE ohne JS gehen würde.

Bzw irgendwie kann ich Dir eben nicht folgen :)

Ahso du meinst den HTML code , da schau ich gleich nochmal rein ne reine CSS Lösung wäre mir lieber da ich nicht weiß wie der IE 7.0 reagiert.
 
Den nachfolgenden Quellcode hab ich lokal im IE6 erfolgreich getestet.

Den IE7 nutze ich zum Testen von Websites über den Browserpool, blos wenn ich die Seite auf den Webserver lade, denn mit dem IE7 hab ich ja keinen Zugriff auf meinen Rechner, funktioniert der Script-Code nicht mehr, die Fehlermeldung lautet dann "Access is denied" ;-)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Home</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type='text/javascript' src='http://www.bitraum.com/warhammer/js/Element.class.js'></script>
        <script type='text/javascript' src='http://www.bitraum.com/warhammer/js/OpenClose.class.js'></script>
        <script type='text/javascript' src='http://www.bitraum.com/warhammer/js/Load.class.js'></script>

        <script type='text/javascript'>var openCloseConfig = {openMemberTwinkBox_1:{
                            open:false,
                            ignoreOpenClose:false,
                            container:'displayMemberTwinkBox_1',
                            trigger:'onclick',
                            preload:{
                                initOn:'open',
                                reload:false,
                                config:{
                                    position:'center',
                                    addTo:'displayMemberTwinkBox_1',
                                    attrib:{
                                        style:{
                                            height:'20px',
                                            width:'100px',
                                            background:'#000'
                                        }
                                    }
                                },
                                ajax:{
                                    path:'http://www.bitraum.com/warhammer/index.php',
                                    method:'GET',
                                    params:{
                                        action:'Mitglieder',
                                        ajax:true,
                                        s:'1',
                                        display:'1'}
                                    }
                                },
                                action:{
                                    onActivateOpen:null,
                                    onActivateClose:null,
                                    onDeactivateOpen:null,
                                    onDeactivateClose:null
                                }
                            },openMemberTwinkBox_2:{
                            open:false,
                            ignoreOpenClose:false,
                            container:'displayMemberTwinkBox_2',
                            trigger:'onclick',
                            preload:{
                                initOn:'open',
                                reload:false,
                                config:{
                                    position:'center',
                                    addTo:'displayMemberTwinkBox_2',
                                    attrib:{
                                        style:{
                                            height:'20px',
                                            width:'100px',
                                            background:'#000'
                                        }
                                    }
                                },
                                ajax:{
                                    path:'http://www.bitraum.com/warhammer/index.php',
                                    method:'GET',
                                    params:{
                                        action:'Mitglieder',
                                        ajax:true,
                                        s:'1',
                                        display:'2'}
                                    }
                                },
                                action:{
                                    onActivateOpen:null,
                                    onActivateClose:null,
                                    onDeactivateOpen:null,
                                    onDeactivateClose:null
                                }
                            }};window.onload = function () {var oc = new OpenClose();oc.run();}</script>

<style type="text/css" media="all">
        @import "http://www.themaninblue.com/experiment/footerStickAlt/css/main.css";
        @import "http://www.themaninblue.com/experiment/footerStickAlt/css/product_features.css";




        /* The CSS that's required to position the footer */

        html
        {
                height: 100%;
        }

        body
        {
                height: 100%;
        }

        #nonFooter
        {
                position: relative;
                min-height: 100%;
        }

        * html #nonFooter
        {
                height: 100%;
        }

        #footer
        {
                position: relative;
                margin: -7.5em auto 0 auto;
        }

        /* A CSS hack that only applies to IE -- specifies a different offset for the footer */

        * html #footer
        {
                margin-top: -7.4em;
        }




</style>

</head>




<body>
        <p class="hidden">
                <a href="#content">Skip to content</a>
        </p>
        <div id="page">
                <div id="nonFooter">
                        <div id="header">
                                <p id="logo">
                                        <span class="replacement"></span><a href="#"><span class="replacement"></span><span class="linkText">XXXX</span></a>

                                </p>
                                <ul id="menu">
                                        <li id="menuSupport" >
                                                <span class="replacement"></span><a href="#" title="Support and documentation"><span class="replacement"></span><span class="linkText">Support</span></a>
                                        </li>
                                        <li id="menuAbout" >
                                                <span class="replacement"></span><a href="#" title="About"><span class="replacement"></span><span class="linkText">About</span></a>
                                        </li>
                                </ul>
                        </div>
<!-- END header -->
                        <div id="content">
                                <div id="contentMain">
                                        <h1 id="headingFeaturesPages">
                                                <span class="featureIcon"></span>Product X <span class="hidden">&ndash;</span> <span class="subTitle">Features: Pages</span>
                                        </h1>
                                        <p>
                                                <strong>Pages are the primary way of storing and sharing information in Product X. Written with a simple "email like" notation, attractive documents are easily and quickly built.</strong>
                                        </p>
                                        <h2>
                                                Intuitive editing
                                        </h2>
                                        <p>
                                                <img class="featureImageRight" src="http://www.tutorials.de/forum/images/features_pages_screenshot.jpg" alt="Screenshot" />Most importantly, pages are editable. Instantly. Online. There are no complex procedures, uploading or approvals required to provide your updates to content. Click "Edit" and write. It's that easy. You can preview your changes at any time. The editing interface provides a full notation guide, so you'll never be lost for words.
                                        </p>
                                        <h2>
                                                Simple notation
                                        </h2>
                                        <p>
                                                Product X pages are written using a simple notation. If you can write an email, you can edit a page. Product X's notation is easy to learn and allows for italic, bold, underline and all the other styles you'd expect.
                                        </p>
                                        <ul>
                                                <li>
                                                        Multiple levels of headings to organise your document,
                                                </li>
                                                <li>
                                                        Lists, bullet points, tables, quotations and other page structures,
                                                </li>
                                                <li>
                                                        Images, screenshots, emoticons and even photo galleries,
                                                </li>
                                                <li>
                                                        Powerful dynamic interaction via macros.
                                                </li>
                                        </ul>
                                        <h4>weitere Charactere</h4>
            <div class="memberTwinkDetailBox  ">
            <div class="detailHeader">
                <a href="#" id="openMemberTwinkBox_1">
                    <span>Arombolosh</span>
                </a>
            </div>
            <div id="displayMemberTwinkBox_1">
            </div>
            <div class="clear">&nbsp;</div>
        </div>
                <div class="memberTwinkDetailBox  lastTwinkDetailBox ">
            <div class="detailHeader">
                <a href="#" id="openMemberTwinkBox_2">
                    <span>Krell</span>
                </a>
            </div>
            <div id="displayMemberTwinkBox_2">
            </div>

        </div>
<!-- END featureNavigation -->
                                </div>
<!-- END contentMain -->
                                <div id="contentSub">
                                        <ul id="quickLinks">
                                                <li class="first on">
                                                        <a href="#"><span>Feature</span> tour</a>
                                                </li>
                                                <li>
                                                        <a href="#"><span>Try</span> a demo</a>
                                                </li>
                                                <li>
                                                        <a href="#"><span>Buy</span> online</a>
                                                </li>
                                        </ul>
                                        <div class="clearer">
                                        </div>

<!-- END .subItem -->
                                </div>
<!-- END contentSub -->
                                <div class="clearer">
                                </div>

                        </div>
<!-- END content -->
                </div>
<!-- END nonFooter -->
        </div>
<!-- END page -->
        <div id="footer">

                <p>
                        &copy; 2005 XXXX. All rights reserved.
                </p>
        </div>
<!-- END footer -->
</body>
</html>
 
Ich danke Dir vielmals , hab nun mal sein Beispiel eingebaut und es funktioniert einfach mal. Keine Probleme mehr und ich hock da stunden vor dem IE am Rechner meines Mitbewohners und ärger mich.

Wobei diese CSS Lösung eigentlich auch die beste ist wie ich finde , der footer wird unten rangehängt und dann einfach nach oben gedrückt fertig. Da hätte man auch selber drauf kommen können :D.

Dann vergessen wir den JS Code wieder , der klappte zwar auch aber so ist besser :)
 
FipsTheThief hat gesagt.:
Was hat das mit den Polsterungseigenschaften denn auf sich ? Ich mein inzwischen hab ich das Login Feldchen auch in den header verschoben in die Linke obere Ecke da es nur für den Admin Bereich sein solll.
Zum Vergrößern anklicken....
Die Blockelemente besitzen eine sog. "Polsterungseigenschaft", die sich aus der margin- und padding-Eigenschaft ergibt, und die in den einzelnen Browsertypen unterschiedliche Initialwerte besitzen.

Aus diesem Grund sollten diese Werte zunächst auf null gestellt werden, um bei der Seitendarstellung in den unterschiedlichen Browsern einheitliche Abstände zwischen den Elementen bzw. Seitenbereichen zu erzielen.

Vergangene Nacht habe ich einen dieser hier im CSS-Forum immer wiederkehrenden Problemfälle aufgegriffen und einen kleinen Artikel für die Webmaster FAQ verfasst: Wie behebe ich unterhalb des Formulars die unerwünschte Lücke im Textfluss?.

Ich persönlich notiere zu Beginn eines Stylesheets immer die folgende Regel mit dem Universal-Selektor *, um zunächst für alle im Dokument enthaltenden Elemente deren Polsterungseigenschaften zurückzusetzen:

Code: 
* {
margin:0;
padding:0;
}
Die Elemente, die einen Außen- und/oder Innenabstand besitzen sollen, bekommen ihn dann explizit zugewiesen. So kann ich mir sicher sein, dass die definierten Abstände in den Browsern dann gleich groß sind.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück