Small gap underneath the banner

i have a small gap underneath the flash banner http://tinyurl.com/ybdodnw that i need to remove, so that the banner touches the menu beaneath, how can i do this?

may be try giving negative top margin


#menu {
	background:url(../images/menu.png) repeat-x;
	height:51px; 
	margin-bottom: 15px;
	[COLOR="Red"]margin-top:-2px;[/COLOR]
	/*margin-top: 15px;*/
	}

vineet

works well thanks, i still dont understand however why this is needed, as in why the gap was there in the first place.

It’s happening (probably) because Object elements are treated as inline so FF is correctly making a space under the object for text descenders. IE just ignores that cos it’s crap. If you set the property for the movie to ‘block’ it should get rid of the gap and not be a fudge fix.

well tried it and it worked. so i posted it.

you can try JJMcClure suggestion also.

vineet

You can test how the gap increases/decreases with current font-size, use the menu option to alter the text size in IE. The suggested 2px neg top margin happened to suit the default font-size.

(The gap is then explained by JJMcClure.)

ok do you mean set it to block via css or some other properties?

Yes. {display:block;}

ok fixed cheers

If you have an image with a gap and don’t want to have it get other block properties (sometimes you may want it to stay inline) then, on an inline image, you can
img {
vertical-align: bottom;
}

I do this at the top of my stylesheet esp since I don’t always want/need block features in my images.

http://www.visibilityinherit.com/code/gap-under-image-example.php

The font-size:0 trick doesn’t work in Opera, however setting line-height to 0 fixes it for Opera :slight_smile: