Hi I'm coding a site for work and want to have a shadow on either side of the main content much like WDF has either side of this post!

For some reason firefox won't show the image and I cant work out why??

 

any help would be great I'm sure I must be missing somthing which all you bright sparks will chortle at the simicity of but I'm stumped!

 

Here is the css I have for the two offending divs:

 

#wrapper{
margin: 0 auto;
width:940px;
height:1500;
background-image:url(images/shadow.png);
background-repeat:repeat-y;
}
#content{
margin:  0 auto;
width:915px;
}

 

Thanks for any help.

can u give adress of this site ? or html file with this .png ?

 

or even screen of the page ...

don't know if this'll work but try adding px after your height (it's just 1500 at the minute).

Here is the basic layout i have with the HTML. The Shadow png is 940px wide so should be poking out the sides??

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper{
margin: 0 auto;
width:940px;
height:100%;
background-image: url(images/shadow.png);
background-repeat:repeat-y;
}
#content{
margin:  0 auto;
width:915px;
background:#FFFFFF;
}
#header{
float:left;
width:100%;
}
#copy{
float:left;
width:100%;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="content">
	<div id="header">Header
	</div>
	<div id="copy">Copy
	</div>
</div>
</div>
</body>
</html>

 

Why wont FF show the shadow???

try to change in

 

#content{

margin: 0 auto;

 

to

margin-left:0px;

 

and tell me is it workin.

don't know if this'll work but try adding px after your height (it's just 1500 at the minute).

 

yeah mean't to take that off it was a desperate attempt to force the div down.

 

Thanks though.

try to change in

 

#content{

margin: 0 auto;

 

to

margin-left:0px;

 

and tell me is it workin.

Nope still nothin.

can u send a screenshot with working background and screenshot in ff ?

I realise these are quite small shots but you can see the shadow showing on the left and righ in IE and nothing in FF??

 

Firefox renders the above code like so:

 

 

IE shows the shadow I'm after:

 

maybe delete this

background-image: url(images/shadow.png);

background-repeat:repeat-y;

from wrapped and add to content css.

it may be because the #header and #copy are floated and there is no way to determine height to stretch the image. add <br class="clearMe" /> to the bottom of your content div and style as so: br.clearMe {clear: both; height: 0}

it may be because the #header and #copy are floated and there is no way to determine height to stretch the image. add <br class="clearMe" /> to the bottom of your content div and style as so: br.clearMe {clear: both; height: 0}

 

That did the trick!!

 

I wonder if you could explain what the tags do and how they work so I can understand it and use it again.

 

Thank you for your help and thanks to n0xx for your help.

no worries. have a read on htmldog.com for info on css and html.

 

using <br /> like this is a trick to display "content" that consists of a break with no height. it basically tells the containing div (in this case #content) where its content ends. because there are two floated divs inside #content, #content has no idea how high it is. the <br /> gives it a reference point.

 

least that's how i understand it.