4 replies [Last post]
ninja5000
Offline
Regular
Sandnes, Norway
Last seen: 14 years 51 weeks ago
Sandnes, Norway
Timezone: GMT+1
Joined: 2004-11-23
Posts: 14
Points: 0

Hi there!

I've made quite a few sites that's working all nice with 100% height using css, but suddenly now there's a problem?!

I have a wrapper that's supposed to be 100% height, and it contains a background image.

The site works fine in IE, but not in FF. If I add overflow: auto; in the css, it works nicely in FF but not at all in IE.

Anyone see the problem?

CSS: http://www.kvadratfotografen.no/stil.css
Site: http://www.kvadratfotografen.no

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 41 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

100% height...again...

In #wrapper, remove {min-height: ...} and add {display: table;}.[1]

The problem stems from the floats' not being in the flow, so as far as #wrapper is concerned, they don't exist. IE wrongly encloses floats when the ancestor has layout.

cheers,

gary

[1] Because you give IE a height, the overflow property would cause problems. I doubt (not tested) that you need height for IE either.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ninja5000
Offline
Regular
Sandnes, Norway
Last seen: 14 years 51 weeks ago
Sandnes, Norway
Timezone: GMT+1
Joined: 2004-11-23
Posts: 14
Points: 0

100% height...again...

Hi

Thanks a lot!
The display: table fixed the problem, except on the http://kvadratfotografen.no/?id=konfirmant page.

How come?
What can I do to fix it here?

Strange...I've never had to go about it this way before...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 41 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

100% height...again...

1. Did you look at the reference I gave you? It, along with the links, explain why the display property is used.

2. What is different about this page than the other pages where it works?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ninja5000
Offline
Regular
Sandnes, Norway
Last seen: 14 years 51 weeks ago
Sandnes, Norway
Timezone: GMT+1
Joined: 2004-11-23
Posts: 14
Points: 0

100% height...again...

2. It contains less thumbnails than the other ones.