CODEWITHSUNDEEP
cssinternet-explorer-8
Fer
Fer

Reputation: 4196

IE shows my image only 1 pixel high

Please check out this example, first in FF, Chrome or Safari:

[demo link removed]

You will notice a large image. It will actually scale as you resize your window. It is a fluid image inside a fluid container. Now check it in IE8 or IE7. It is only 1 pixel high :(

I was suspecting that IE requires some sort of width fix to give it some base dimension, so I was playing around with giving the image a min-height of 75%, or a min-width of 75% in case it concerns a portrait image. That indeed gives it the height that is needed, however, it breaks the resize feature. With a min-height of 75%, resize the window to a narrow width to see what I mean, it will lose the aspect ration of the image.

Why oh why can't IE respect these liquid widths and heights?

PS: I was thinking about hasLayout fixes, but that is removed from IE8 and doesn't seem to work in earlier versions for this specific case either.

Upvotes: 0

Views: 868

Answers (1)

thirtydot
thirtydot

Reputation: 228182

Simply removing the entire height attribute on the image fixes it in IE, Firefox, Chrome.

Upvotes: 1

Related Questions