ansaurus

Question

Height 100% not working for DIV tag in Internet Explorer 8

Answer 1

A:

You should set all margins and paddings for the parent elements to zero in order to get what you want.

Update: Sorry, didn't understand the problem at once. Ben's hint should be the better one I assume. :)

Update 2: Oops, since Ben has deleted his answer my first update doesn't make any sense. Try setting the body's height to 100%, that should solve the problem.

arno 2009-10-07 18:19:23

Answer 2

A:

My understanding about cross browser CSS is not that big so it might not be the best solution, but it's a solution.

As far as I've seen, you always have to set the height/width of the container that you want to overflow, so you need to set them.

To deal with the resolution I would suggest you to add a jQuery script at the onReady event that dynamically would fix the height and width making the overflow work.

tucaz 2009-10-07 18:19:50

Answer 3

A:

I had the similar problem like you and finally the solution was to modificate a CSS line entry that had an !important modificator for a fixed height declaration. In the HTML code the class (defined in CSS) had the height assigned to 100%, but the CSS applyed the !important during the style loading.

Have a nice day!

Oscar.

ocell 2009-12-16 16:22:12

Answer 4

+2 A:

This metatag enables correct CSS rendering, and in CSS – by design – height:100% basically doesn't work.

You need to give specific height to every single ancestor of the element, including <body>, <table>, <tr> and even <tbody> element that's automatically inserted by the parser.

Anyway, this layout can be achieved in easier way:

.topBanner {
    position:absolute; position:fixed; 
    height:2em; 
    top:0; left:0; width:100%;
}
body {padding-top: 2em}

this will degrade nicely in IE6, and unlike overflow, will work properly in Mobile Safari.

porneL 2009-12-20 23:52:41

Answer 5

A:

Removing the DOCTYPE declaration will make it work. I don't know why, and it may cause other issues, but it will fix it.

I encourage the community to comment why it fixes, and what is a better solution, that doesn't involve removing the DOCTYPE

Ehrann Mehdan 2010-01-03 19:36:40

Removing the doctype can push your page into quirksmode which will most likely cause more problems than it fixes.

Joel Potter 2010-01-03 19:48:07

But it will fix his problem, what is your solution? how do you keep the doctype declaration and allow 100%?

Ehrann Mehdan 2010-01-03 19:57:49

ansaurus

tags:

views:

answers:

Height 100% not working for DIV tag in Internet Explorer 8

related questions