IE 7 Hintergundbilder werden nicht angezeigt

otto2 · 23.05.2009

Guten Morgen

Der IE 7 macht mal wieder Probleme. Und seltsamerweise tritt dieses Problem nur Im IE 7 auf, 6 und 8 sind ok oder machen andere Fehler.

Fehler: Die Hintergrundbilder übers Stylsheet werden nicht angezeigt. Das selbe Bild über ein img-tag geht.
Siehe Browsershots: 16 Screenshots gezippt

Es dreht sich um folgende Seite:

Bevor irgendwelche Fragen kommen:
- CSS ist valide
- Html ist valide
- Die Anpassung der Abstände im IE mache ich noch, steht auch hier nicht zur Diskussion
- Das ist nicht meine Webseite!
- Google ist mir bekannt und hat mir nicht weitergeholfen

Also was mache ich falsch

stb_87 · 23.05.2009

AW: IE 7 Hintergundbilder werden nicht angezeigt

Zeig lieber den Quelltext.

Kann man eher was mit anfangen als mit Bildern.

otto2 · 23.05.2009

AW: IE 7 Hintergundbilder werden nicht angezeigt

Seite ist doch on...

Naja

HTML:

... <link href="screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
   
<div id="wrapper">   
   <div id="head">
      <img src="images/header.png" alt="Vanessa Hallam" />
   </div> <!-- ende head -->
      
   <div id="navi">
      <img src="images/vhallam.png" alt="Vanessa Hallam" /><br /><br />
      <p>Ihre Selbstst&auml;ndige Mary-Kay<br />Sch&ouml;nheitsconsultant</p>
      
      <a href="index.html">Home</a><br />
      <a href="http://marykay.de/vtilke">Zum Shop</a><br />
      <a href="login.html">Kundenlogin</a><br />
      <a href="team.html">Unser Team</a><br />
      
      <br /><br />
      <h4>
      <a href="sitemap.html">Sitemap</a>&nbsp;&nbsp;<a href="impressum.html">Impressum</a>
      </h4>
            
   </div> <!-- ende navi -->
    
   <div id="content">
   </div> <!-- ende content -->
   
   <div id="footer">   
   </div> <!-- ende content -->
     
</div> <!-- ende wrapper -->...

und CSS

Code:

/* ====================================== 
   1. Kalibrierung und allgemeine Styles 
   ====================================== */
   
*  { padding: 0; margin: 0; }
h2, p, ul, ol { margin-bottom: 1em; }
h3 { margin-bottom: 0.5em; }  
ul ul { margin-bottom: 0.5em; } 
li { margin-left: 1em; } 

body {
   color: #000000;
   font-family: Tahoma, Helvetica, sans-serif;
   font-size: 16px;
   background-color: #FFFFFF;
}

a:link, 
a:visited { 
   color: #333333;
   text-decoration: none; 
   line-height: 2;
}
a:hover, 
a:focus { 
   color: #999999; 
   text-decoration: none; 
}
h4 { font-size: 12px; font-weight: normal }   
   
   /* ==================================== 
   2. Styles für die  Layoutbereiche 
   ==================================== */

#wrapper { 
   position: absolute;
   left: 50%;
   margin-left: -450px;
   background-color: #FFFFFF;
}
#head {
   margin: 0 0 0 0;
}
#navi {
   float: right;
   padding: 10px;
   margin: 100px 30px 0 0;
   height: 380px;
   width: 230px;
   background: url(images/opacity80.png) repeat;
   
}
#content {
   background: url(images/bg-1.jpg) no-repeat;
   height: 600px;
}
#footer {
   background: url(images/bg-verlauf.png) repeat-x;
   height: 80px;
}

leohh · 23.05.2009

AW: IE 7 Hintergundbilder werden nicht angezeigt

Streich die absolute Positionierung deines Wrappers, streich diese veraltete und umstaendlich Art des Zentrierens und weiss deinem Wrapper den Hintergrund, eine Breite und ein margin: 0 auto; zu dann hat sich das Problem geloesst.

Und lass das Holzhacken(IE hacks), bei so einem Layout brauchst du das nicht.

quasibodo · 23.05.2009

AW: IE 7 Hintergundbilder werden nicht angezeigt

Könnte es vielleicht sein, daß es an den Einstellungen des IE7 liegt?
Du kannst ja bei den Internetoptionen angeben, ob Hintergrundbilder angezeigt werden sollen, oder nicht. Auch, ob sie gedruckt werden sollen oder nicht. Ob sich diese Einstellungen auf Bilder auswirkt, die über CSS eingebunden werden, weiß ich nicht.

Ansonsten würde ich es genau so machen wie leohh.

otto2 · 23.05.2009

AW: IE 7 Hintergundbilder werden nicht angezeigt

leohh schrieb:
Streich die absolute Positionierung deines Wrappers, streich diese veraltete und umstaendlich Art des Zentrierens und weiss deinem Wrapper den Hintergrund, eine Breite und ein margin: 0 auto; zu dann hat sich das Problem geloesst.

Danke hat funktioniert. Manchmal doch einfacher als man denkt.

leohh schrieb:
Und lass das Holzhacken(IE hacks), bei so einem Layout brauchst du das nicht.

Normalerweise geb ich dir da recht.

Jetzt muss ich nur noch schauen, warum der IE das Hintergrundbild nicht durchgängig anzeigt.

leohh · 23.05.2009

AW: IE 7 Hintergundbilder werden nicht angezeigt

Struktur, lautet das Zauberwort.

Du hast in deinem Markup eigenlich nicht mehr als einen Wrapper, der alles umschliesst und deinen Hintergrund bekommt.
Ein Logo, dass ein H1 mit Image-Replacement deine Grafik erhaelt.
Eine Sidebar, die deine zweite Ueberschrift einen Paragraphen und eine - wenn man grosszuegig ist zwei - ungeordnete Listen beinhaltet. Einmal die Hauptnavigation und einmal diese untere Navigation. Diese braucht im uebrigen kein Bild sondern einen weissen Hintergrund mit opacity ( das geht Browseruebergreifend ).
Deinen Contentbereich und einen Footer, der eigentlich auch mittels span in den Content rein koennte, da er nichts vom Markup ( text, navigation o.Ae. beinhaltet ) und mittels Image-Replacement die sich wiederholende Grafik bekommt.

Das waere so ziemlich alles, damit das ganze browseruebergreifend, einheitlich angezeigt wird.