Problem with picture rescaling, gap under photo when resized

[amilardovic]

I’m at my wits end… I can’t seem to figure this one out. I’m trying to design a page and implementing some responsive design with picture resizing. When I have the page open to the maximum width, all is well. As I shrink the page, the picture resizes properly, but it then adds a gap between the photo and the menu. I’ve changed the div background colour to red so it’s more visible.

The page is at http://www.crolinks.com/oecta/ – right under the banner, you’ll see a red bar if you shrink the page. Any idea what I’m wrong?

I would be eternally grateful to anyone who may be able to provide me with the solution!

Thanks!

[ronpat]

The gap is caused by the margin that accompanies inline objects (the image). It can be negated by adding {vertical-align:top;} to the banner image.

[ralphm]

Yep, or display: block.

[amilardovic]

Wow. Thank you gentlemen! Both solutions worked! I didn’t see either of those anywhere in anything else I googled.

Very much appreciated!

Anton