Question

I have an old layout that uses tables and I need to make a DIV to use the entire space of a TD. The CSS works fine in Firefox but IE interprets the 100% height as the entire window and doesn’t take in account the presence of other elements on the page.

A working example can be seen in this Fiddle: http://jsfiddle.net/micahSan/JeA6m/

Firefox will see the DIV as 100% height of what’s remained but IE will see it as 100% of the entire page.

How can I make IE match Firefox?

Thank you in advance for your advice.

Answer 1

I don’t know wether exists more cleaner solution for this but with IE are still problems 🙁 I don’t still understand why many people using IE so guy must still create separated CSS style for IE … so let’s back here. Problem is that IE don’t respect height of <TD> in <TABLE> i think. So i created this temporary solution, add this to your CSS file

#big_cell {
    height:100%;
    height: 45% !important;

}

so this height: 45% !important is IE hack and it will be work only for IE.

---

Or instead of using the height attribute because of these problems you can use a spacer. For example a transparent small pic which you set the height you want.