Hey there gang -

I'm trying to do a rounded corners thing - the problem I'm having is that there is a gap between the image used to make the top corners and the body of the rest of the content. I've tried lots of stuff, and just can't eliminate that gap. Any help would be so so appreciated.

http://www.jessweiss.com/sciatica/index2.html

TIA!

Try this:

<a href="/sciatica/index.html">
<img src="http://www.jessweiss.com/sciatica/banner5.gif" border="0"></img></a>

Add that "border="0" part. I saw that you have no border declared in your css, but I think the browser is still adding something there.

You don't even need to do that.

First off, to close an img tag, just put this at the end: />

So <img src="some image" width="width" height="height" alt="alt" />

In your particular case, what you want to do is this:

#rounded_corners_top {
     margin: 0;
     padding:  0;
     background:  URL(rounded_corners_top.gif) top left no-repeat; /* this will make sure the background doesn't tile and sits in the top left */
     width:  806px;
     height:  61px;
     overflow:  hidden;
}

That will create an 806 x 61 div with nothing but the background in it, which is all you want. There's no need to include an image with no alt attribute in HTML code, since it's just decoration.

I have tried both methods (the page currently reflects the use of the style sheet or ADAM's method) and neither is eliminating the gap. Any more thoughts? Any help would be greatly appreciated!!


ETA - I got it! It was the frame attribute! Thanks so much for all of your help - I really appreciate it!