✔ Problem mit float div Layout und IE (6 und 7)

Status
Nicht offen für weitere Antworten.
Biergamasda

Biergamasda

Erfahrenes Mitglied
Hi Leute

Ich hab ein kleines Problem bei einer Homepage. Zu finden unter http://www.jenig.at
Und zwar passt das Layout und die Anzeige im FF, wenn ich mir das ganze jedoch im IE ansehe, dann wird außer dem Menü auf der linken Seite gar nichts angezeigt, und ich habe keine Ahnung wieso. Währ super wenn mir da jemand etwas weiterhelfen könnte

Source der index.php
HTML: 
<body>
        <div id="page">
            <div id="menubar">
                <a href="./contents/home.php" target="content"><div class="menupoint" style="background-image:url(images/menu/home.png);"></div></a>    
                <a href="./contents/jenig.html" target="content"><div class="menupoint" style="background-image:url(images/menu/jenig.png);"></div></a>
                <a href="./contents/unterkuenfte.php" target="content"><div class="menupoint" style="background-image:url(images/menu/unterkuenfte.png);"></div></a>                
                <a href="./contents/sommer.html" target="content"><div class="menupoint" style="background-image:url(images/menu/sommer.png);"></div></a>
                <a href="./contents/winter.html" target="content"><div class="menupoint" style="background-image:url(images/menu/winter.png);"></div></a>                                            
                <a href="./contents/ausflugsziele.html" target="content"><div class="menupoint" style="background-image:url(images/menu/ausflugsziele.png);"></div></a>
                <a href="./contents/veranstaltungen.html" target="content"><div class="menupoint" style="background-image:url(images/menu/veranstaltungen.png);"></div></a> 
                <a href="./contents/lage.html" target="content"><div class="menupoint" style="background-image:url(images/menu/lage.png);"></div></a> 
                <a href="./contents/links.html" target="content"><div class="menupoint" style="background-image:url(images/menu/links.png);"></div></a>        
                <a href="./contents/wirtschaft.html" target="content"><div class="menupoint" style="background-image:url(images/menu/wirtschaft.png);"></div></a>        
                <a href="./contents/guestbook.php" target="content"><div class="menupoint" style="background-image:url(images/menu/guestbook.png);"></div></a> 
                
                <div id="menufoto"></div>
                <div id="newsContainer">         
                    <a href="./contents/news.php" target="content"><div class="menupoint" style="background-image:url(images/menu/news.png);"></div></a>
                    <div id="news">
                        <?php
                            $news = $connection->getNewsNames();
                            foreach ($news as $n) {
                                echo "<a href='./contents/news.php?id=".$n['id']."' target='content'>".$n['name']."</a><br>";
                            }
                        ?>             
                    </div>                           
                </div>
                <div id="ktnLogo"></div>
            </div>
            <div id="head">
                <div id="nassfeldLogo"></div>
            </div>
            <div id="content">  
                <iframe name="content" id="contentFrame" src="./contents/home.php"></iframe>
            </div>            
            <div id="contentbottom"></div>
            <div class="clear"></div>
        </div>
    </body>


und source der layout.css
CSS: 
@charset "utf-8";
/* CSS Document */

body {
    background-image: url(images/bg_body.jpg);
    font-family: Georgia, "Times New Roman", Times, serif;
}
div#page {
    margin: 5 auto;
    width: 777px;
    height: 636px;

}
div#menubar {
    position: relative;
    float: left;
    width: 145px;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(images/bg_menu.jpg);
    padding-top: 20px;
}
div#head {
    position: relative;
    margin-left: 145px;
    width: 642px;
    height: 136px;
    background-image: url(images/bg_header.jpg);
}
div#nassfeldlogo {
    float: right;
    margin-top: 5px;
    height: 60px;
    width: 200px;
    background-image: url(images/logos/Nassfeld.gif);
}
div.menupoint {
    height: 16px;
    background-repeat: no-repeat;
    background-position: right;
    margin-right: 2px;
}
div#menufoto {
    margin: 10 auto;
    background-image: url(images/menu/foto.jpg);
    width: 133px;
    height: 109px;
}
div#content {
    background-image:url(images/bg_content.png);
    text-align: center;
    margin-left: 145px;
    width: 642px;
    height: 528px;
}
div#contentbottom {
    background-image:url(images/bg_kartenrand.jpg);
    margin-left: 145px;
    width: 642px;;
    height: 24px;
}
div#ktnLogo {
    position: absolute;
    bottom: 0;
    background-image:url(images/logos/kaernten1.jpg);
    margin: 10 auto;
    width: 122px;
    height: 51px;
}
div#newsContainer {
    width: 100%;
}
div#news {
    width: 100%;
    height: 270px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
}

div#news a {
    color: #336699;
    text-decoration: none;
}
div#news a:hover {
    text-decoration: underline;
}

.clear {
    margin: 0;
    padding: 0;
    clear: both;
    visibility: hidden;
}
iframe#contentFrame {
    width: 612px;
    height: 100%;
    border: 0;
    margin: 0 20px;
}


Ich bin mir darüber im Klaren, dass Iframes nicht gerade das non plus ultra sind, aber ich habe sie derzeit gewählt, da es am einfachsten und schnellsten war. Vieleicht baue ich das ganze in weiterer Folge noch auf PHP includes um, aber mal sehen.

Vielen Dank schon im Voraus.
MFG me
 
Hi,

mit den folgenden Erweiterungen und Änderungen im Stylesheet:

Code: 
div#page {
        margin: 5px auto;
        width: 777px;
        height: 636px;
}
div#head {
        position: relative;
        margin-left: 145px;
        /*width: 642px;*/ /* auskommentiert = deaktiviert */
        height: 136px;
        background-image: url(images/bg_header.jpg);
}
div#menufoto {
        margin: 10px auto;
        background-image: url(images/menu/foto.jpg);
        width: 133px;
        height: 109px;
}
div#content {
        background-image:url(images/bg_content.png);
        text-align: center;
        margin-left: 145px;
        /*width: 642px;*/ /* auskommentiert = deaktiviert */
        height: 528px;
}
iframe#contentFrame {
        width: 592px;
        height: 100%;
        border: 0;
        margin: 0 20px !important;
        margin:0 10px;
}
und der Übergabe des HTML-Dokuments im Standardsmode (ohne eine Dokumenttyp-Deklaration wird das Dokument im Quirksmode übergeben), wird die Seite in den genannten IE-Versionen vollständig und fehlerfrei angezeigt.

Mögliche Doctypes für den Standardsmode wären beispielsweise:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
Übrigens ist dieses Markup

Code: 
<a href="./contents/home.php" target="content"><div class="menupoint" style="background-image:url(images/menu/home.png);"></div></a>
syntaktisch falsch und erzeugt invaliden HTML-Code, da Inline-Elemente keine Block-Elemente enthalten dürfen.
 
Ok, danke für die Ausführliche Lösung, habe die besagten passagen geändert, und jetzt funktionierts einwandfrei ;)

Hätte nur noch die Frage was an der width angabe denn so falsch war?

lg
 
Das rechnerische Restmaß für diese Breitenangabe beträgt anstelle von "642px" nur "632px" (777px - 145px = 632px).

Ansonsten wären noch folgende Regelerweiterungen erforderlich, damit die beiden Boxen #head und #content mit der width-Deklaration im IE nicht umgebrochen werden - Stichwort: "3px-Gap-Bug":

Code: 
div#menubar {
        position: relative;
        float: left;
        width: 145px;
        height: 100%;
        background-repeat: no-repeat;
        background-image: url(images/bg_menu.jpg);
        padding-top: 20px;
        margin-right:0 !important;
        margin-right:-3px;

}
div#head {
        position: relative;
        margin-left: 145px !important;
        margin-left:142px;
        width: 632px;
        height: 136px;
        background-image: url(images/bg_header.jpg);
}
div#content {
        background-image:url(images/bg_content.png);
        text-align: center;
        margin-left: 145px !important;
        margin-left:142px;
        width: 632px;
        height: 528px;
}
div#contentbottom {
        background-image:url(images/bg_kartenrand.jpg);
        margin-left: 145px;
        width: 632px;
        height: 24px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück