|
|||
Header wird im IE nicht angezeigt
Hallo,
genau angenommen ist es eigentlich kein Header. Es ist eine Ebene, die sich ganz oben auf der Seite befindet und eine Breite von 100% hat. Sie ist absolut positioniert und dient nur dazu einen Hintergrund darzustellen. Das Problem ist, dass diese Ebene im IE, und zwar in allen Versionen vom IE, nicht angezeigt wird. Es ist also nur der Hintergrund vom body zu sehen, und nicht die 234px hohe Ebene, die sich ganz oben auf der Seite befinden soll und eine andere Hintergrundgrafik als der Body hat. Ich hoffe ich konnte das einigermaßen verständlich formulieren. Hier die Styles: Code:
#overlay-top { position: absolute; top: 0; left: 0; width: 100%; height: 234px; background: url(../bilder/header.gif) center center repeat-x; } Danke im Voraus. |
Sponsored Links |
|
|||
Nagut, dann poste ich mal den gesamten Code (ist das nicht zu viel?)
HTML: HTML-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="de-DE" lang="de"> <head> <title></title> <meta name="KEYWORDS" lang="de" content="" /> <meta name="DESCRIPTION" content="" /> <!-- Anfang Stylesheets --> <link rel="stylesheet" type="text/css" media="screen, projection" href="styles/main.css" /> <!-- Ende Stylesheets --> <meta name="AUDIENCE" content="Alle,all" /> <meta name="PAGE-TOPIC" content="page-topic" /> <meta name="COPYRIGHT" content="" /> <meta name="PUPLISHER" content="" /> <meta name="ROBOTS" content="index,follow" /> <meta name="AUTHOR" content="" /> <meta name="LANGUAGE" content="de" /> <meta name="REVISIT-AFTER" content="30 days" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="IMAGETOOLBAR" content="no" /> <!--[if IE]> <style type="text/css"> #teaser-kontakt { width: 265px; height: 365px; padding: 22px 0 0 25px; } </style> <![endif]--> </head> <body> <div id="overlay-top"> </div> <!-- Anfang Container --> <div id="container" style="min-height: 800px;"> <!-- Anfang Header --> <div id="header"> <!-- Anfang Logo --> <a id="logo" href="index.html" title="zur Startseite"> <img src="bilder/logo.png" width="420" height="165" alt="Panflöte und Keyboard - Musik voller Liebe" title="zur Startseite" /> </a> <!-- Ende Logo --> <!-- Anfang Systemnavi --> <ul id="systemnavi"> <li><a href="index.html" title="zur Startseite">Home</a></li> <li><a href="kontakt.html" title="Kontakt aufnehmen">Kontakt</a></li> <li><a href="impressum.html" title="Impressum">Impressum</a></li> </ul> <!-- Ende Systemnavi --> <!-- Anfang Special-Navi --> <ul id="special-navi"> <li><a href="#" id="button-songs" title="Songs"><span>Songs</span></a></li> <li><a href="#" id="button-youtube" title="Meine Videos bei Youtube"><span>Youtube</span></a></li> <li><a href="#" id="button-fotos" title="Foto-Galerie"><span>Fotos</span></a></li> </ul> <!-- Ende Special-Navi --> <!-- Anfang Navigation --> <ul id="navi"> <li><a href="biografie.html" id="button-biografie" title="Biografie von Pankeyheike"><span>Biografie</span></a></li> <li><a href="songs-und-videos.html" id="button-songs-videos" title="Songs / Videos mit Panflöte und Keyboard"><span>Songs/Videos</span></a></li> <li><a href="galerie.html" id="button-galerie" title="Foto-Galerie"><span>Galerie</span></a></li> <li><a href="impressum.html" id="button-impressum" title="Impressum"><span>Impressum</span></a></li> </ul> <!-- Ende Navigation --> </div> <!-- Ende Header --> <div id="left"> <h1>Über mich</h1> <h2>Wie alles begann</h2> <p>Lorem ipsum</p> <h2>Und so ging es weiter:</h2> <p>Lorem ipsum</p> </div> <div id="right"> <p>Lorem ipsum</p> </div> <div id="youtube-facebook"> </div> </div> <!-- Ende Container --> <!-- Anfang Footer --> <div id="footer"> <div id="footer-inner"> <a href="index.html" title="zur Startseite"><img src="bilder/footer-logo.png" width="174" height="48" title="zur Startseite" /></a> </div> </div> <!-- Ende Footer --> </body> </html> Code:
/* ----------------------------------------------------------------------- In diesen Styles sind folgende Elemente definiert: --- BASICS --- NAVI --- SPECIAL NAVI --- FOOTER */ /* --- BASICS ---------------------------------------------------------- */ body { margin: 0; padding: 0; background: url(../bilder/body-background.gif); font-family: Verdana, Arial; } * { margin: 0; } h1 { font-size: 35px; font-weight: normal; color: #c3c3c3; } h2 { font-size: 18px; color: #f7dfa2; margin: 14px 0 6px 0; } p { color: #c3c3c3; font-size: 13px; line-height: 18px; margin: 0 0 10px 0; } a { color: #f7e1a7; text-decoration: none; } a:hover { color: #f8ce64; } img { border: none; } #overlay-top { position: absolute; top: 0; left: 0; width: 100%; height: 234px; background: url(../bilder/header.gif) center center repeat-x; } #container { position: relative; z-index: 10; width: 902px; margin: 0 auto; overflow: hidden; } #header { position: relative; width: 902px; height: 232px; } #logo { float: left; margin: 5px 0 0 0; display: block; } #systemnavi { float: right; width: 244px; height: 26px; background: url(../bilder/systemnavi.png); padding: 4px 0 0 21px; } #systemnavi li { position: relative; list-style-type: none; display: inline; margin: 0 9px 0 9px; } #systemnavi a { color: #fff; font-size: 12px; } #systemnavi a:hover { color: #d9d9d9; } #special-navi { position: absolute; right: -10px; top: 56px; } #navi { width: 902px; height: 33px; clear: both; position: absolute; bottom: 10px; left: 0; padding: 5px 0 0 0; } #left { float: left; width: 552px; padding: 40px 36px 40px 8px; } #right { float: right; width: 292px; padding: 30px 0 0 8px; } #footer { width: 100%; height: 68px; background: url(../bilder/footer.gif) repeat-x; padding: 34px 0 0 0; clear: both; position: relative; } #youtube-facebook { position: absolute; bottom: 0; right: 150px; width: 137px; height: 106px; background: url(../bilder/youtube-facebook.png); } #teaser-kontakt { position: relative; width: 265px; height: 379px; background: url(../bilder/teaser-kontakt.png); padding: 8px 0 0 25px; } #teaser-kontakt h2 { font-size: 14px; color: #b42200; margin-bottom: 44px; } #teaser-kontakt a { margin: 0 0 0 28px; } .Input { float: left; width: 171px; height: 19px; background: #fff; border: 1px solid #eda444; padding: 5px 0 0 3px; margin: 0 10px 0 0; } .submit { width: 52px; height: 26px; border: none; background: url(../bilder/submit.gif); text-indent: -6000px; font-size: 0; display: block; line-height: 0; } form { margin: 15px 0 67px 0; } /* --- NAVI ---------------------------------------------------------- */ #navi li { list-style-type: none; float: left; height: 38px; margin: 0 2px 0 2px; } #navi a { height: 38px; display: block; background: url(../bilder/navi-sprite.png); } #navi span { display: none; } #navi #button-biografie { width: 109px; background-position: 0 0; } #navi #button-biografie:hover { background-position: -151px 0px; } #navi #button-songs-videos { width: 150px; background-position: 0 -39px; } #navi #button-songs-videos:hover { background-position: -151px -39px; } #navi #button-galerie { width: 94px; background-position: 0 -78px; } #navi #button-galerie:hover { background-position: -151px -78px; } #navi #button-impressum { width: 129px; background-position: 0 -116px; } #navi #button-impressum:hover { background-position: -151px -116px; } /* --- SPECIAL NAVI ---------------------------------------------------------- */ #special-navi li { float: left; list-style-type: none; margin: 0 10px 0 10px; } #special-navi li:last-child { margin-left: 20px; } #special-navi span { display: none; } #special-navi a { display: block; width: 71px; height: 99px; } #special-navi #button-songs { background: url(../bilder/special-navi-songs.png) 0 16px no-repeat; } #special-navi #button-youtube { background: url(../bilder/special-navi-youtube.png) no-repeat; } #special-navi #button-fotos { background: url(../bilder/special-navi-fotos.png) 0 14px no-repeat; } /* --- FOOTER NAVI ---------------------------------------------------------- */ #footer-inner { position: relative; width: 902px; height: 60px; margin: 0 auto; } #footer-navi { position: absolute; right: 0; top: 0; width: 360px; font-size: 11px; color: #f7e1a7; } #footer-navi li { list-style-type: none; display: inline; line-height: 18px; } #footer-navi a { color: #f7e1a7; } #footer-navi a:hover { color: #f8cd5d; } #footer-navi .copyright { color: #b82d0d; } #footer-navi .copyright:hover { color: #e93a11; } |
|
||||
Keine Lust zu basteln, poste einen Link.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
||||
Ein auf's Problem reduz. Testcase kann man immer öffentlich posten.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Aha, ich habe das nun mal bei ohost.de hochgeladen und dort funktioniert es, d.h. dort wird die Ebene angezeigt. Bei der nicht-hochgeladenen Version dagegen wird sie nicht angezeigt, muss man das verstehen ?
|
|
|||
Der IE ist so eingestellt, dass lokale (und Intranet)-Dokumente im Quirksmode angezeigt werden; ich vermute, dass dir das noch nicht klar ist.
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Header wir 2 mal im IE8 angezeigt | Zak | CSS | 2 | 17.09.2009 12:23 |
header verrutscht... | weblearner | CSS | 6 | 03.12.2008 20:34 |
Div verrutscht unter Header, Hintergrundgrafik wird nicht angezeigt... | unicorn | CSS | 2 | 18.09.2008 17:50 |
header bleibt nicht fixiert / untere Rahmenlinie wird im IE nicht angezeigt | boerdi | CSS | 2 | 01.09.2008 15:34 |
Header wird nicht angezeigt... | unicorn | CSS | 19 | 03.12.2006 16:11 |