tags:

views:

272

answers:

3

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
                 ------------------
A: 

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.

Jarrett Meyer
They aren't images, but actually background images to certain divs. Should have made that clearer, sorry.
JasonV
+4  A: 

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

Guffa
Thanks, worked!
JasonV
A: 

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

merkuro