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. =)