I am trying to display a banner image that is linked with some simple styling.

<div id="advert">
<a href="#"><img src="banner.gif" /></a>
</div>

I use CSS just to add some nice border styling and some slight margins.


div#advert a {
margin: 7px 0px 7px 10px;
border: 1px solid #000;
}

div#advert a img {

border: 2px solid #FFFFFF;

}


Thing is... it is working perfectly in IE6, but is messing up in Firefox. In Firefox, the border on <a> is not surrounding the banner ad, but rather is hidden behind the bottom third of the banner ad. Just to let you all know, I have plenty of room within my current div block, so no probs there. Any idea why the border for <a> is not surrounding the border for <img> in Firefox??? Thanks guys.

It seems the problem is because you've applied the first border to an inline element, the link, and the second border to another inline element, the image. When you apply a border (or anything) to an inline element, there is no obligation for it to expand the bounds of that style to accommodate what's inside of it. If the <a> element was a block-level element, I think the problem would remedy itself. Try that, along with specifying height and width for the <a>. See what happens.

You are an absolute genious the_pm. Thank you so very very much! It works!

Glad to help :)