• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundbild wird im IE8 (und kleiner) falsch angezeigt

M

McFrosty

Neues Mitglied
Hallo Zusammen,

ich habe vor kurzem mit dem Erstellen einer Homepage angefangen.
Dabei bin ich auf dieses Forum gestoßen und konnte mir auch einige gute Tipps holen.

Ich hoffe, dass diese Frage im richtigen Forum steht, da es um HTML und CSS geht.

Jedoch hab ich jetzt ein Problem, für das ich einfach keine Lösung finde.
Daher hoffe ich, dass mir jemand bei der Fehlereingrenzung und evtl. Lösung helfen kann.
Ich zeig Euch einfach mal ein Bild von der Seite:
Bild IE9.jpgBild IE7.jpg
Die Seite soll wie in dem ersten Bild dargestellt aussehen.
Im Internet Explorer 9, allen aktuelleren Firefox Versionen, sowie auf allen mir vorliegenden Smartphones wird die Seite auch so angezeigt.

Leider zeigt der IE8, und dessen Vorgänger, die Seite wie auf dem rechten Bild dargestellt, an.
Hier fehlt also die Hintergrundgrafik auf den Flächer der Navigation und des main-Bereichs.

Hier mal der Code dazu:
Code: 
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="Schützenfreunde Emtmannsberg" name="Description" />
<meta content="schützen, schuetzen, freunde, emtmannsberg, schuetzenfreunde, schützenfreunde" name="Keywords" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="Global" name="Distribution" />
<meta content="xxx" name="Author" />
<meta content="index,follow" name="Robots" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>Links</title>
<style type="text/css">
body, td, th {
    color: #FFF;
    background-color: #FFF;
}
a:link {
    color: #F00000;
}
a:visited {
    color: #F00000;
}
a:active {
    color: #F00000;
}
body {
    background-color: #FFF;
    background-image: url(images/verwaltung/back.jpg);
    background-repeat: repeat-x;
}
a:hover {
    color: #F00000;
}
#apDiv1 {
    position: absolute;
    z-index: 1;
    left: 31px;
    top: 25px;
}
#apDiv2 {
    position: absolute;
    width: 193px;
    height: 54px;
    z-index: 1;
    left: 24px;
    top: 33px;
}
</style>
</head>
<body>
<div id="window">
    <div id="head">
        <a href="index.html">Home</a> | <a href="impressum.html">Impressum</a> |
        <a href="kontakt.html">Kontakt&nbsp; </a></div>
    <div id="menu">
        <ul>
            <li>Herzlich willkommen...</li>
        </ul>
    </div>
    <div id="header">
        <br />
        <div style="text-align: right;">
            <img alt="" src="http://www.html.de/images/wappen/wappen.gif" style="border: 0px solid; width: 185px; height: 230px;" />
        </div>
        <h1 id="logo" style="color: rgb(0, 0, 0);">Sch&uuml;tzenfreunde</h1>
        <h2 id="slogan" style="color: rgb(0, 0, 0);">Emtmannsberg...</h2>
    </div>
    <div id="content-window">
        <div id="sidebar">
            <h1>Men&uuml;</h1>
            <ul class="sidemenu">
                <li><a href="index.html">Home</a></li>
                <li><a href="wirueberuns.html">Wir &uuml;ber uns</a></li>
                <li><a href="vorstandschaft.html">Vorstandschaft</a></li>
                <li><a href="schuetzenkoenige.html">Sch&uuml;tzenk&ouml;nige</a></li>
                <li><a href="chronik.html">Chronik</a></li>
                <li><a href="schiessbetrieb.html">Schie&szlig;betrieb</a></li>
                <li><a href="rundenwettkampf.html">Rundenwettkampf</a></li>
                <li><a href="jugendarbeit.html">Jugendarbeit</a></li>
                <li><a href="schuetzenzeitung.html">Sch&uuml;tzenzeitung</a></li>
                <li><a href="bildergalerie.html">Bildergalerie</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
                <li id="besetzt"><a href="links.html">Links</a></li>
                <li><a href="impressum.html">Impressum</a></li>
            </ul>
            <br />
        </div>
        <div id="main">
            <h1>Links</h1>
            <br />
            <span style="color: rgb(0, 0, 0);"><br />
            Hier...<br />
            </span></div>
    </div>
    <div id="fusszeile">
        <p>&copy; <span style="font-weight: bold;">2012 Sch...<br />
        </span></p>
        <p></p>
    </div>
</div>
</body>
</html>[/HTML]

Und der CSS Code, der sich in einer separaten Datei befindet:
Code: 
* {
    margin: 0;
    padding: 0;
    font-size: 12px;
}
body {
    color: #000000;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    background-color: #FFF;
    background-image: none;
}
a {
    background: inherit;
    text-decoration: none;
    color: #000000;
}
a:hover {
    background: inherit;
    color: #2C8195;
}
h1, h2, h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: Bold;
}
h1 {    font-size: 140%; }
h2 { font-size: 110%; text-transform: uppercase; }
h3 { font-size: 110%; color: #007E80; }

h1, h2, h3  {
    margin: 0;
    padding: 10px;
}
p  {
    margin: 0;
    padding: 10px;
    line-height: 2em;
    color: #808080;
}
ul, ol {
    margin: 0px -5px;
    padding: 0 30px;
}
img {

}
img.float-right {
  margin: 5px 0px 5px 10px;  
}
img.float-left {
  margin: 5px 10px 5px 0px;
}
#window {
    width: 1000px;
    text-align: left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-repeat: repeat-x;
    background-position: center top;
}
#content-window {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding: 0;
    background-color: #FFF;
}
#header {
    position: relative;
    width: 1000px;
    height: auto;
    padding: 0;
    font-size: 14px;
    color: #FFF;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
#header h1#logo {
    position: absolute;
    margin: 0;
    padding: 0;
    letter-spacing: normal;
    color: #FFF;
    text-transform: none;
    top: 82px;
    left: 43px;
    width: auto;
    height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 38px;
    font-weight: bold;
}
#head {
    clear: both;
    width: 1000px;
    height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 30px;
    font-weight: bolder;
    background-repeat: no-repeat;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-position: center top;
    background-color: #28353e;
    text-align: right;
}
#menu {
    clear: both;
    width: 1000px;
    height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 30px;
    font-weight: bolder;
    background-repeat: no-repeat;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-position: center top;
    background-color: #005000;
}
/* Punke wie z.B. "#menu ul{}" aus Zeichengründen entfernt */
#main {
    float: right;
    width: 760px;
    padding: 0;
    margin: 0;
}
#main h1 {
    color: #000000;
    padding-top: 3px;
    padding-right: 0;
    padding-bottom: 3px;
    padding-left: 10px;
    margin-top: 15px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#sidebar {
    float: left;
    width: 200px;
    padding: 0;
    margin: 0;
    line-height: 2em;
}    
#sidebar h1 {
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 120%;
    font-weight: bold;
    border: 1px none #EFF0F1;
    margin-top: 15px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    background-color: #005000;
}
#sidebar ul.sidemenu {
    color: red;
    text-align: left;
    margin: 5px -100px 10px 0; padding: 10;
    text-decoration: none;    
}
#sidebar ul.sidemenu li {
    list-style: square;
    padding: 3px 0px 3px 0px; 
    margin: 0px 2px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
}
#sidebar ul.sidemenu  ul li{
    list-style: disc;
    padding: 3px 0px 3px 0px; 
    margin: 0 2px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
}
#sidebar ul.sidemenu a {
    font-weight: bold;
    background: none;
    padding-top: 2px;
    padding-right: 0;
    padding-bottom: 2px;
    padding-left: 0;
}
#sidebar ul li#besetzt a {
    color: #000000;
}
#sidebar ul li#frei a {    
    color: #F00000;
}
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

Leider bin ich bei diesem Problem an meine Grenzen gestoßen.

Daher hoffe ich, dass jemand die Zeit und Lust findet, den Code mal kurz durchzuschauen.

Schonmal im voraus besten Dank.

Viele Grüße
Stefan
 
Hi,

da hab ich wohl ein paar unvorteilhafte Bilder hochgeladen.

Das Hintergrundbild heißt "back.jpg".
Hierbei handelt es sich um einen schmalen Streifen, der waagerecht wiederholt wird, um einen Farbverlauf zu simulieren.
Dies ist der leichte graue Hintergrund, der langsam in weiss übergeht.

Der grüne Strich gehört zum oberen Menü und wird richtig dargestellt.

Da der graue Farbverlauf doch sehr hell ist, hab ich den Hintergrund ("back.jpg") mal kurz
durch einen kräftigen blauen Verlauf ausgetauscht.
Ich denke, damit sticht das Problem direkt ins Auge.

Bild IE9 blau.jpgBild IE7 blau.jpg

MfG
Stefan
 
Das alles ab #content-window weiß hinterlegt ist, hast Du im CSS angegeben:

Code: 
#content-window {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding: 0;
    background-color: #FFF;
}

Der IE9 macht es hier imho falsch, der IE7 sogar richtig. Wenn Du es einheitlich habe willst, lass die Hintergrundfarbe weg.

Außerdem wundert mich noch der zusätzliche Rand im IE7 für den ich bisher aber keinen Grund sehe Oo
 
Oh man,

und ich hab stundenlang nach dem Fehler gesucht.

Vielen Dank.
Jetzt geht es.
Ich habe gedacht, dass das die Standardfarbe ist, falls das JPG nicht geladen werden kann.
Und da alle neueren Browser da kein Problem damit haben, bin ich da nicht drauf gekommen.

Der Rand im IE7 lässt sich damit erklären, dass die Homepage eine Breite von 1000px hat.
Somit bekommt der gesamte Bildschirm die Hintergrundgrafik zugewiesen, der Text wird aber nur auf den 1000px angezeigt.
Und ich hab beim Ausschneiden noch einen Teil außerhalb der 1000px mit genommen.

Nochmals vielen Dank.
Man lernt doch nie aus.

Viele Grüße
Stefan
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben