space showing up below images

[phrozt]

I'm working on a site in which a space is showing up below images. It only shows up in IE. In firefox it is fine.

You can view the mockup here:

http://phroztnet.org/mockup/site.htm

The top left and top right pictures are both images, while the two on the side are background images.

The top left and right both have a little space under them.. and I can't seem to figure out why. I've set margins to 0 and all sorts of things, and it still doesn't pan out. It does look fine in firefox tho..

 

[phrozt]

I fixed it.. if anyone wants to know what I did, I set images as follows:

img {
border: 0px;
margin-bottom: -3px;
}


border is so that a border doesn't show up if the image is a link, but the margin fix is for the space between the bottom of the image and the bottom of the element. It still looks fine in FF, so I guess everything's ok.

 

[Vragabond]

That's not the best way to fix it. You were probably seeing the space because of the whitespace -- basically, since <img> is an inline element, IE thinks that the spaces you put around the tag (which are there because your code is nicely indented) should also be rendered. By changing your code so that no space exists between opening a container, img and closing container, everything should be ok.

<div class="headerImgCont"><img src="img/homepage_top_logo.jpg" alt="" height="97" width="525" /></div>

 

[BabyJeffy]

Let me add something more.

If you put a DOCTYPE into the beginning of your page, the problem will disappear. You will also be able to remove the style you added, and include the extra whitespace (that Vragabond suggested you leave out).

Do some googling on DOCTYPEs and what they do for you... once you understand the difference between "quirks" and "non-quirks" mode then you will find full cross browser compatibility for your code is a little bit more straightforward.

Jeff

 

[Vragabond]

I have continualy had problems with whitespace in IE/Win and a correct doctype. I don't remember M$ guys really fixing that for their 'standards-compliance' mode.

 

[phrozt]

interesting replies..

Vrag - I've run into that problem before on another site that I did.. I just completely forgot till you mentioned something lol. Yeah.. white spaces can either work for you or against you.. tricky little things. on the site I was working on I had to toss everything into one giant block because white spaces would screw things up. Looked ugly, but the page looked very nice in both browsers.

Jeffy - I'll go look that stuff up now and see what I can find. Thanks for the tip

 

[phrozt]

well.. hate to say it, but getting rid of those white spaces did nothing.. and I tried all of the doctypes that I found listed at ala, and none of the completely worked. One worked for firefox (xhtml transitional) but not for IE.. thanks for the info tho.