Header im IE unsichtbar

Necronomicon

Der Header von der Seite fantasy-carpet wird im FF vollkommen korrekt angezeigt, im IE ist es nahezu gespenstisch er erscheint wann er will mal ist er da mal nicht. Ich denke dass ich bei den float angaben ziemlichen mist gebaut habe und deswegen der header im IE nicht korrekt angezeigt wird.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>fantasy-carpet</title>
<meta name="description" content="test">
<meta name="keywords" content="test">
<meta name="author" content="">
  <meta name="editor" content="">
</head>
<style type="text/css">


*{
    margin:0;
    padding:0;
}
body {
    font-family:Arial;
    background-color:#cccccc;
    font-color:#990000;
    text-align:left;


}
a {
    color:#3333ff;
}


a:hover {
    color:#0000cc;
    text-decoration:underlined;
}


h1, h2, h3, h4, h5, h6 {
    color:#990000;
    font-family:Arial Narrow;


}


h1 {
    font-family:Eurostile;
    font-size:48px;
    font-weight:lighter;
}


h2 {
    font-size:30px;
}


h3 {
    font-size:12pt;
}


h4, h5, h6 {
    font-size:13px;
}




#page {
        background: #ffffff url('') top center repeat-y;
        width:1051px;
        margin-left: 100px;
        float:left;
}






#header {
        float:left;
        height:220px;
        position:absolute;
        width:1051px;
        background-color:#ffffff;
        top:0px;
        left:100px;
        clear:both;








}
#clearheadercenter {
        height:220px;
        overflow:hidden;




}
#header_box {
    float:left;
    margin:0 0 0 20px;
    height:174px;
    width:180px;
    background:url(http://www.fantasy-carpet.de/wp-content/themes/fantasy_carpet/img/Box-css.png);
    background-repeat:no-repeat;


}
#header_box li {
    padding:0px 0px 2px 5px;
    color:#cc3300;
    font-size:12px;
    list-style:none;
}
#header_photo {
    float:left;
    height:174px;
        width:821px;
    background:url(http://www.fantasy-carpet.de/wp-content/themes/fantasy_carpet/img/Headphoto.png);
    background-repeat:no-repeat;
}
#header_photo h1 {
    float:left;
    margin-left:40px;


}
#description h3 {
    color:#cc3300;
    margin:55px 0px 0px 40px;
}




#header_navi ul li {
    float:left;


    text-align:center;
    height:40px;
    width:100px;
    list-style:none;
    display:inline;
    margin:45px 10px 0px 40px;
    font-size:10pt;
    font-familiy:Arial;
    color:#990000;
    background:url(http://www.fantasy-carpet.de/wp-content/themes/fantasy_carpet/img/Button.png);
    background-repeat:no-repeat;
}
#header_navi ul a {
    text-decoration:none;
    color:#990000;




}
#header_navi ul a:hover, #header_navi ul a:active {
    float:left;
        height:40px;
    width:100px;
        text-decoration:underline;
background:url(http://www.fantasy-carpet.de/wp-content/themes/fantasy_carpet/img/Button-rot.png);
    background-repeat:no-repeat;
    color:#ffffff;
}


#header_linie {
    float:left;
        margin:20px 37px 0px 0px;
    height:25px;
    width:746px;
    background:url(http://www.fantasy-carpet.de/wp-content/themes/fantasy_carpet/img/Linie.png);
}
#center {
        margin:0px;
        width:100%;
        float:left;


}
#sidebar {
    float:left;
    color:#990000;
    text-align:center;
    width:224px;
}
#sidebar a{
    color:#990000;
    text-decoration:none;
}
#sidebar a:hover, #sidebar a:active {
    color:#990000;
    display:block;
    height:20px;
    background-color:#ffffff;


}
#sidebar_top {
    height:48px;
    background:url(http://www.fantasy-carpet.de/wp-content/themes/fantasy_carpet/img/sidebar-top.png);
    background-repeat:no-repeat;
}
#sidebar_middle p{
    background:url(http://www.fantasy-carpet.de/wp-content/themes/fantasy_carpet/img/sidebar-middle.png);
    background-repeat:repeat-y;
    display:block;
    height:20px;
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#990000;
}
#sidebar_bottom {
    background:url(http://www.fantasy-carpet.de/wp-content/themes/fantasy_carpet/img/sidebar-buttom.png);
    background-repeat:no-repeat;
    height:11px;
}


#content {
    margin:20px 70px 0 0;
    width:700px;
    float:right;
    line-height: 1.6em;
}
#footer {
        float:left;
        margin-top:20px;
    height:50px;
    width:100%;
    background:url(http://www.fantasy-carpet.de/wp-content/themes/fantasy_carpet/img/Footer.png);
}
#footer_text {
    font-size:10px;
    color:#990000;
    margin:10px 20px 5px 20px;
    text-align:center;
    float:center;
}












</style>
<body>


<div id="page">
    <div id="clearheadercenter"></div>
        <div id="center">
               <div id="content">
<strong>Teppiche</strong> sind nicht nur modische und gemütliche Wohnungsasessoires, sondern auch zugleich Vermächtnis abendländischer Kulturen. Die meisten Teppiche sind handgeknüpft, von langer Lebensdauer und mit aufwendigen Mustern versehen. Die verschiedenen Teppicharten unterscheiden sich nicht nur durch ihren Herkunftsort, wie etwa Perserteppiche, nomadische Teppiche oder Teppiche aus Afghanistan oder Pakistan, sondern auch durch  Fertigung und Produktion. Über den Verwendungszweck von Teppichen lässt sich streiten, ob man den modernen Designerteppich unter dem Tisch im Wohnzimmer ausrollt um das Ambiente zu verbessern oder sich einen antiken Wandteppich in sein Zimmer hängt.
Ein gut ausgewählter Teppich trägt auf jeden Fall zu einem fantastischen Wohnklima bei und passt durch seine zahlreichen Variationen zu jeder Umgebung, ob ein Orient Teppich vor dem Kamin ausgelegt, ein runder Deko Teppich, der passend zu den Möbeln, die richtige Atmosphäre in jedem Raum schafft oder ein flauschiger Kinderteppich mit lustigen Motiven. Dem Internet sei Dank müssen Sie nicht nach Persien fliegen um einen qualitativ-hochwertigen und handgeknüpften Teppich zu kaufen. Sie können schnell und einfach eine Auswahl unter mehreren tausend Teppichen treffen, ihren persönlich Favoriten zum günstigsten Preis bestellen und ihn sich bequem bis vor die Haustür liefern lassen. Service dieser Art finden Sie nicht auf jeder "Teppich Domäne", sondern gerade unser Teppich Shop vereint ein großartiges Sortiment von Teppichen mit Effizienz und Kundenservice.</div>
<div id="sidebar">
        <div id="sidebar_top">Teppiche
        </div>
        <div id="sidebar_middle">
            <p><a href="http://www.test23sa.de">testetest</a></p>
            <p><a href="http://www.test23sas.de">Perser Teppiche</a></p>
            <p><a href="http://www.test23s.de">Kelim Teppiche</a></p>
            <p><a href="http://www.test23f.de">Nomadische Teppiche</a></p>
            <p><a href="http://www.test34g.de">Designer Teppiche</a></p>
            <p><a href="http://www.test45d.de">Moderne Teppiche</a></p>
            <p><a href="http://www.test34c.de">Moderne Teppiche</a></p>
            <p><a href="http://www.test23x.de">Moderne Teppiche</a></p>
            <p><a href="http://www.test23y.de">Moderne Teppiche</a></p>
            <p><a href="http://www.test12y.de">Moderne Teppiche</a></p>
        </div>
        <div id="sidebar_bottom">
        </div>
    </div>
        </div>
<div id="header">
        <div id="header_box">
        <li><u>Erfahren Sie alles über:</u></li>
        <li>Designer Teppiche, Orient </li><li>Teppiche, Perser Teppiche,</li><li> Nomadische
                Teppiche,</li><li> Kelim Teppiche </li>
        </div>
        <div id="header_photo">
            <h1>fantasy-carpet</h1>
            <div id="description">
                <h3>Die Informationsseite rundum den Teppich</h3>
            </div>
            <div id="header_navi">
                <ul><li><a href="http://www.test.de"></br>Geschichte</a></li>
                <li><a href="http://www.test.de"></br>Teppichpflege</a></li>
                <li><a href="http://www.test.de"></br>Herstellung</a></li>
                <li><a href="http://www.test.de"></br>Teppicharten</a></li>
                <li><a href="http://www.test.de"></br>Lexikon</a></li></ul>
            </div>
        </div>
               <div id="header_linie">
               </div>
        </div>
<div id="header_linie"></div>
<div id="footer">
<div id="footer_text">test test test test test test test test test test test test test,test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
</div>
</body>
</html>

Alles anzeigen

gibts ne möglichkeit die page nicht zu floaten? ich denk dass der fehler dadurch ensteht. wenn ich sie aber nicht floate zeigt der ff die seite nicht korrekt an sprich sie verlängert sich nicht in die länge automatisch mit dem inhalt. ich hab als ausweichmöglichkeit dann mal margin:auto versucht das wird aber nicht vom IE richtig angezeigt.

es ist zum heulen!!! ich hoffe dass mir das forum wie immer weiter helfen kann. danke schon mal für eure antworten
cheers Necronomicon 8-)

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

Ammaletu

Also ich habe jetzt nicht im Detail herausgekriegt, woran es liegt. Denke aber eigentlich immer noch, dass das der Peek-a-boo-Bug des IE sein könnte:
Peek-a-boo IE6 Bug
On having layout â€” the concept of hasLayout in IE/Win

So oder so solltest Du aber in der Struktur Deiner Seite etwas aufräumen, denke ich. Es gibt doch keinen wirklich guten Grund, float und position so exzessiv zu mischen, oder? Und den Header würde ich statt beidem einfach dort hinschreiben, wo er auch stehen soll, nämlich vor #content und #sidebar. Dann zeigt ihn auch der IE anstandslos an. Float brauchst Du dann auch nicht an #header, sondern höchstens an dessen Unterelementen, damit #header-box und #header-photo nebeneinander stehen.

Und davon abgesehen validiert die Seite auch nicht, mit einigen eher leicht zu behebenden Fehlern. Es kann sicher auch nicht schaden, das mit als erstes anzugehen. ;-)

Design-Maker

Wenn du deine seite in der Reienfolge aufbaust wird auch alles angezeigt.

....

....

.....

....

Denn du baust doch ein haus nicht vom Dach zum Keller.

Monika

immer allen li ein line-height mitgeben, dann hat der peek-a-boo Effekt keine Chance

lg

Necronomicon

ok danke viele gute vorschläge werd mal paar sachen ausprobieren

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Header im IE unsichtbar

Jetzt mitmachen!