Header issue in CSS, Bugging me now.

Butters · 2 Dec 2007 at 19:15

Hi guys, this is just some test stuff I'm doing with CSS but for the life of me I don't know whats wrong here.

I have an image defined in the CSS to appear as a header,

here is the CSS

Code:

body{
margin:0px;
padding:0px;
}

#wrapper{
width:100%;
}

#header{
height:50px;
width:100%;
background:url(../images/header.jpg)repeat-x;
}


#main{
float:left;
padding-left:0px;
margin-left:25%;
position:absolute;
margin-right:100%;
height:100%;
}

here is the HTML

Code:

<html>
<head>
<title> Online Shop</title>
<link rel="stylesheet" type="text/css" href="css/shopcss.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">

Tomorrow's Toys
</div>


</div>
</body>
</html>

In FF the image appears in the right place just fine. In IE6 and IE7 there is no image, just the text 'tomorrows toys'

Any ideas?

Butters · 2 Dec 2007 at 19:18

Its ok, sorted it

Priapus · 2 Dec 2007 at 20:08

What was wrong, if you don't mind me asking?

Butters · 2 Dec 2007 at 21:42

Ice On Fire said:
What was wrong, if you don't mind me asking?

Sure,

I changed this line in the CSS from this:

background:url(../images/header.jpg)repeat-x;

to this:

background: #fff url(../images/header.jpg) repeat-x top center;

Priapus · 3 Dec 2007 at 06:25

Thanks.

zinc · 5 Dec 2007 at 13:09

I had a problem exactly like this the other day, the background image would not show in IE7 but did in FF and Safari.

I changed my line in my CSS from:

background: url(images/bk.jpg)repeat-x;

to:

background: url(images/bk.jpg) repeat-x;

The problem was there was no space between the ) and repeat. :rolleyes:

It had me stuck for hours and no programming notepad would pick it up as an error.