PDA

View Full Version : CSS won't display background image


Hellie
02 Dec 2010, 09:20 AM
hello,
how yall doing?

I'm facing a sticky problem

I'm trying to recreate apple's navigate menu

this is the html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> this is apple menu bar! </title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="navicontainer">
<ul id="navi">
<li id="Apple"><a href="#"><span>Apple</span></a></li>
<li id="Store"><a href="#"><span>Store</span></a></li>
<li id="Mac"><a href="#"><span>Mac</span></a></li>
<li id="Ipod+Itunes"><a href="#"><span>Ipod+Itunes</span></a></li>
<li id="iPhone"><a href="#"><span>iPhone</span></a></li>
<li id="Downloads"><a href="#"><span>Downloads</span></a></li>
<li id="support"><a href="#"><span>Support</span></a></li>
</ul>
</div>
</body>
</html>


and this is the CSS code
body {
padding:0px;
margin:0px;
}

#navicontainer {
width:876px;
height:39px;
margin:0 auto;
}
#navi {
width:876px;
height:39px;
margin:0 auto;
list-style:none;
}
#navi li {
display:inline;
}
#navi li a {
float:left;
height:39px;
text-indent:-9999px;
}
#Apple {
width:111px;
background: url('../images/navii.jpg') no-repeat 0px 0px;
}





but the first button won't show in firefox neither IE!!

any ideas?
Blindguard
04 Dec 2010, 10:00 AM
Change the
#Apple {
width:111px;
background: url('../images/navii.jpg') no-repeat 0px 0px;
}
To background: url('../images/navii.jpg') no-repeat 0px 0px; in the Body, that is:
body {
background: url('../images/navii.jpg') no-repeat 0px 0px;
}
That should work.