IE6, Mozilla height: 100% :(

[coolbest]

Hi,

I've been frustrated for a while now over a small issue in how the IE6 and Mozilla Firefox render my page.

Basically the difference is: i've got a table inside of another table, and i need the first table to occupy 100% of the space availible. Setting height: 100% works perfectly in mozilla but in IE its a complete mess. I came to conclusion that height: 100% diretive instructs IE6 to occupy 100% of the _SCREEN_ size not the availible space :(

Is there a way to fix that? Possibly using DIVs and SPANs instead of tables??

Any comments will be greatly appreciated!

Kind regards,
Nikolai Goloborodko

[Stephen Philbin]

Yup.
You said the solution yourself.Dump the tables.

[LJK]

Hi -
We'd also be able to help you better if you
gave an indication of what you'd want the
actual layout to look like...or an example
of the current code you're using.

Do some research on using css to style the
content, then come back once you know what
you need / or what's not working well.
[Also read on all of IE's lovely quirks so
you'll be prepared to deal with them!]

El

[coolbest]

I've uploaded the page onto my ISP homepage space.

http://homepages.paradise.net.nz/coolbest/

this page can be viewed as intended at 1024x768 resolution in maximised screen in IE6 and Mozilla Firefox 0.9x. If you try and resize the IE6 window, the bottom of the page should now be not alligned. Resize works perfectly in Mozilla.

Also if i add more text to the main area, the alignment is screwes up as well... :(

Please help :)

[baconbutty]

Some comments (but I have not really inspected your code):-

1. If I have your page maximised, then click on a link at the top, and then click the back button, the refreshed page is lined up at the bottom correctly in IE6. Strange.

2. I have found in IE that with tables only (does not seem to happen with DIVs), that 100% calculates the height of the parentNode including borders.

3. You are probably aware that IE and Mozilla have different default box models I think. Sorry if this is telling you what you already know, or if this is not relevant.

height and width in Mozilla (and in W3 standards I believe) apply to the "content" of a box (not the padding or border). So if I have a box with a 2 pixel border and a 4 pixel padding. Setting height to 100, the offsetHeight will be 112 (i.e. 100+2+2+4+4)

height and width in IE applies to the padding and border as well. So if I have a box with a 2 pixel border and 4 pixel padding. Setting height to 100, the offsetHeight will be 100. However in Mozilla the height would be 88 (i.e. 100-2-2-4-4)

Does that make sense.

[mercury3]

So Coolbest, any solutions to resolve that problem?? any way to make IE not to make tables to 100% height of the screen but 100% of the parent???

Regards!! :)