IE space below image?

Question

How can I fix this page for Internet Explorer? It seems to add a space below the background images for some reason..

http://orangeguy.biz/profile/

The design is like this:

                 ------------------
                 |   TOP IMAGE    |<- base_top.png
                 ------------------
                 |  |          |  |
base_sides.png ->|  | CONTENT  |  |<- base_sides.png
                 |  |          |  |
                 |-----------------
                 |  BOTTOM IMAGE  |<- base_bottom.png
                 ------------------

Answer 1

You need to explicitly give a img {margin-bottom:0;} in your css. IE automatically puts a buffer around images, but it should listen to the rules in the stylesheet.

Answer 2

It's because IE has the strange idea that every element should be at least one character high.

If you add overflow:hidden; to the #top and #bottom styles, that will keep IE from making the element larger than you have specified.

General tip:
Adding a proper doctype to the page so that it renders in standards compliant mode helps a lot with how IE renders the page.

W3C: Recommended list of DTDs

Answer 3

I would suggest putting margin:0; and padding:0; in the style sheet declaration of * (all) elements at the top. So the problem will not occur again. If I may suggest something else? To align elements in the center I would prefer margin-left:auto; and margin-right:auto; as suggested by W3.org: http://www.w3.org/Style/Examples/007/center