November 5th, 2012, 08:43 PM
Gap below div; image height squeezed
Since I am a new user I can't include a link to my page which shows what the problem is, so I will do my best to explain the issue. (Also I can't include a screen cap image).
I have a content wrapper/border with a single pixel border all around. I want the top to have rounder corners which would contain a gradient background upon which the actual content would reside. So to do this I created an image (with a gradient) which would span the entire wrapper/border horizontally. I got it to work except there is an 18-pixel gap/white space under the image, which makes it appear that the "content-border" is disconnected from the rounded corner image. Plus, the image itself is squeezed in height. And I can't get the content to sit on top of the image even though I adjusted the z-index. Here's the CSS and code:
border: 1px solid #8cc3de;
margin: 10px 1px 0 0;
padding: 0 0 0 0;
<div id="content-border"><img src="images/contentBgRoundedTop.jpg" width="685" height="87" id="content-border-roundedCornersImg" /><div id="content"><br />
Any ideas or suggestions? Thanks much.