CODEWITHSUNDEEP
htmlcss
JasonV
JasonV

Reputation: 596

IE space below image?

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

Upvotes: 1

Views: 2981

Answers (5)

Eric Sebasta
Eric Sebasta

Reputation: 224

How can I set CSS only for specific IE browsers?

font-size: 0\9;
line-height: 0\9;

works as well.

Upvotes: 0

image72
image72

Reputation: 31

IE has default font-size and line-height because that image height little than IE default font-size and line-height.

set:

font-size:0 
line-height:0 
overflow:hidden

Upvotes: 1

merkuro
merkuro

Reputation: 6177

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

Upvotes: 0

Guffa
Guffa

Reputation: 700362

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

Upvotes: 7

Jarrett Meyer
Jarrett Meyer

Reputation: 19573

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.

Upvotes: 0

Related Questions