1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

[CSS] Hintergrundbilder: Firefix und IE blickens nicht?

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Juuro, 15.09.06.

  1. Juuro

    Juuro Schafnase

    Dabei seit:
    07.11.05
    Beiträge:
    2.255
    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:
    [​IMG]
    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:
    [​IMG]

    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>*/
    
     
  2. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    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.
     
  3. Juuro

    Juuro Schafnase

    Dabei seit:
    07.11.05
    Beiträge:
    2.255
    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?
     
  4. Cyrics

    Cyrics Neuer Berner Rosenapfel

    Dabei seit:
    01.04.05
    Beiträge:
    1.975
    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 :innocent:
     
  5. Juuro

    Juuro Schafnase

    Dabei seit:
    07.11.05
    Beiträge:
    2.255
    Die GIFs waren als PSD codiert. Scheints kann Safari mit PDS was anfangen im gegensatz zu den ganzen Anderen Browsern.
     
  6. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    Safari kann als Cocoa-Applikation all das anzeigen, was QuickTime importieren kann, also auch zum Beispiel ein CMYK-TIFF oder ein PSD.
     
  7. Moriarty

    Moriarty Pommerscher Krummstiel

    Dabei seit:
    17.05.04
    Beiträge:
    3.032
    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
     

Diese Seite empfehlen