[CSS] Hintergrundbilder: Firefix und IE blickens nicht?

**Juuro** · 15.09.2006, 21:55

Ich hab eine Website gebaut mit Hilfe des CCS-Buchs "Bulletproof WebDesign". Ich habe mit dem buch gearbeitet, weil ich dachte, dass damit vielleicht endlich mal die Kompatibilität mit allen Browsern gewährleistet ist. Tja, Pech gehabt. Meine kleine Site schaut nur in Safari korrekt aus. Alle anderen Browser machen Probleme.

So solls aussehen:

Wenn man über die anderen Menüpunkte mit dem Mauszeiger geht, sehen sie genauso aus wie der eine aktivierte Menüpunkt.

Und so siehts im Firefox aus:

Tja, hier fehlt also der Hintergrund der inaktiven Menüpunkte und der Hintergrund der Seitenleiste. Keine Ahnung woran das liegen könnte. Ich konnte noch keine fehler fidnen. Aber das muss ja auch irgendwie im IE und im Firefox funktionieren!?
Anbei der Quelltext des Stylesheets und der HTML-Datei.

Ich würd mich sehr über ne Idee wie mans anders machen könnte oder eine kleine Hilfe was falsch ist freuen!

Viele Grüße, Juuro

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Moep</title>


<link href="style.css" rel="stylesheet" type="text/css" />

</head>
<body id="kundenwerbung">

<div id="wrap">
	<div id="header">
		Neue Perspektiven
		<ul id="nav">
			<li id="li-intro"><a href="index.html">Einf&uuml;hrung</a></li>
			<li id="li-attraktivitaet"><a href="attraktivitaet.html">Attraktivit&auml;t</a></li>
			<li id="li-kundenwerbung"><a href="kundenwerbung.html">Kundenwerbung</a></li>
			<li id="li-kundenbindung"><a href="kundenbindung.html">Kundenbindung</a></li>
			<li id="li-funktion"><a href="funktion.html">So funktioniert's</a></li>
			<li id="li-partner"><a href="partner.html">Unsere Partner</a></li>
			<li id="li-gutscheine"><a href="gutscheine.html">Gutscheine</a></li>
		</ul>
	</div>
	
	<div id="content">
		<div>Kundenwerbung</div>
	</div>
	
	<div id="sidebar">
		<div>
			... hier steht die Seitenleiste ...
		</div>
	</div>
	
	<div id="footer">
		<br />
		Marketing
	</div>
</div> <!-- end #wrap -->

</body>
</html>

Code:

/*<group=Layout>*/

#wrap {
	max-width: 1200px;
	min-width: 600px;
	background: url(images/bg-sidebar.gif) repeat-y 79% 0;
}
#header {
	color: #FF0000;
	background: #FFFFFF;
}
#content {
	float:  left;
	width:  79%;
	margin-right: 1%;
}
#content div {
	padding: 20px;
}

#content li {
	list-style: circle;
}

#sidebar {
	float:  right;
	width:  20%;
	background: none;
}

#sidebar div {
	padding:  20px;
	background: none;
}

#footer {
	clear: both;
	color: #000000;
	background: #FCCD4D;
	text-align: right;
}
	
/*</group>*/

/*<group=Schrift>*/

body {
	font-family: "Lucia Grande", sans-serif;
}

h3 {
	color: #FF0000;
	background-color: #FFFFFF;
	font-style: italic;
}
	
/*</group>*/

/*<group=Navigation>*/

#nav {
	float:  left;
	width: 96%;
	margin:  0;
	padding:  10px 4px 0 46px;
	color: #333;
	list-style: none;
	background: #FFFFFF url(images/menu-border.gif) repeat-x bottom left;
}

#nav li {
	float:  left;
	margin:  0;
	padding:  0;
	font-family: "Lucia Grande", sans-serif;
	font-size: 75%;
}

#nav a {
	float:  left;
	display:  block;
	margin:  0 1px 0 0;
	padding:  5px 8px;
	color:  #333;
	background-color: #FFFFFF;
	text-decoration: none;
	border: 1px solid #9B8748;
	border-bottom: none;
	background: url(images/menu-off.gif) repeat-x top left;
}

#nav a:hover, 
body#intro #li-intro a, 
body#attraktivitaet #li-attraktivitaet a, 
body#kundenwerbung #li-kundenwerbung a,
body#kundenbindung #li-kundenbindung a,
body#funktion #li-funktion a,
body#partner #li-partner a,
body#gutscheine #li-gutscheine a {
	padding-bottom: 5px;
	color:  #333;
	border-color: #9B8748;
	background: #fff url(images/menu-on.gif) repeat-x top left;
}
	
/*</group>*/

**Hilarious** · 15.09.2006, 22:17

So recht reproduzieren könnte ich das nur, wenn Du auch die Bilder beilegen könntest. Pack doch mal alles zusammen in ein ZIP und häng es an, wenn Du magst.

**Juuro** · 15.09.2006, 22:42

Okay, hat sich inzwischen schonwieder in Luft aufgelöst... einige meiner die beiden Hintergrundgrafiken waren kaputt.
Wieso kann Safari die anzeigen, obwohl sie kaputt sind?

**Cyrics** · 16.09.2006, 00:42

Safari kann so einiges wo andere Browser von träumen *ggg* vielleicht sollte ich es mal an meine kaputten Daten der geschrotteten Festplatte setzen... ich wette es kann die Daten wieder zusammen setzen

**Juuro** · 16.09.2006, 01:14

Die GIFs waren als PSD codiert. Scheints kann Safari mit PDS was anfangen im gegensatz zu den ganzen Anderen Browsern.

**Hilarious** · 16.09.2006, 15:20

Safari kann als Cocoa-Applikation all das anzeigen, was QuickTime importieren kann, also auch zum Beispiel ein CMYK-TIFF oder ein PSD.

**Moriarty** · 18.09.2006, 10:31

Ein ähnliches Problem hatte ich auch zeitweise: Erstelle meine Page am Mac, aber mein Kollege und Mitbetreiber nutzt Win + IE. Einige Grafikdateien konnte er nie angezeigt bekommen, und seltsamerweise wenn ich ihm das Bild per eMail schickte, nichtmal öffnen. Erst als ich einen Screenshot von meien eigenen Bild gemacht hatte und dies neu als Jpg odfer Gif gespeichert hatte, konnt er es öffnen, und auch nach dem Upload anzeigen lassen.

Dies trat bei mir sporadisch auf, also bei ca. jedem 10. Bild. Die Bearbeitung erfolgte in Photoshop Elements auf dem Mac. Offensichtlich steckt kein "System" dahinter, denn die Bearbeitung bei anderen Bilder, wo keine Probleme auftraten, war nicht anders...

Woran es liegt habe ich bis heute nicht herausgefunden.

Gruß
Dennis

Thema: [CSS] Hintergrundbilder: Firefix und IE blickens nicht?

Themen-Optionen

Thema durchsuchen

[CSS] Hintergrundbilder: Firefix und IE blickens nicht?

Ähnliche Themen

iPod Nano lässt sich nicht einschalten/wird nicht erkannt/läd nicht

Ipod-Hintergrundbilder??????

Hintergrundbilder

Berechtigungen