Ok, I am trying to create a float based layout with an image in the background of the wrapper for my content. I have set the wrapper to 789px wide (no problem there), got auto margins working to set the wrapper in the middle of the page, but the image I am using to repeat in the background of the wrapper does not have a drop shadow at the top and bottom of it. There is a drop shadow on the left and right side, however. So I am trying to use two other images for get that drop shadow on the to and bottom. And I am trying to stay away from CSS 3 styles so that it works in all modern browsers. So here is basically what I have for code.

<div id="outerWrapper">
<div id="wrapper">
<div id="innerWrapper">
(content here)
</div
</div>
</div>

Now I have styled this so that The top and bottom of the wrapper has an image in it to create the drop shadow. But I cannot seem to get the image to move to the top/bottom so that they show properly. I have included a screen shot to illustrate what I have so far. The images show up, but they are not moving up high enough nore down low enough respectively. Here are the styles I have applied so far for all wrapper content.

#outerWrapper {
	background: url(../images/top_cap_789x33.png) 0 top no-repeat;
	width: 789px;
	margin: 0 auto;
}


#wrapper {
	width: 789px;
	margin: 0 auto;
	background: url(../images/bottom_cap_789x33.png) 0 bottom no-repeat;
}


#innerWrapper {
	background: url(../images/faux_columns_789x27.png);
	width: 789px;
	margin: 0 auto;	
}

hints, tips, and suggestions are more than welcome. Thanks in advance. =)

Recommended Answers

All 2 Replies

I would suggest you take the file that you want to have the shadowing on into photoshop and add it there its so much easier and requires less code. If you dont have photoshop then you can email the file to me at [snipped] and i will add drop shadow to it for you, if you put all the files in a zip folder and send to me then i will have a look at them and see if there's something in the code thats stopping it also, Once i have done so i will email them back to you.

Hope this helps
Regards
Joe

Thank you for responding so quickly. Two days after I posted this, however, I was able to come up with a solution using the images on hand. I just had my CSS backwards for some of my elements. It's working fine now. =)
Thanks again, Joebhoy.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.