View Full Version : IE6 Height: 100% issue :/

05-16-2005, 07:43 AM

Having big problems with windows internet explorer 6. I am using tables for layouts *smacks hand*, which i now know is a big mistake...but im too far through the project to start over & get rid of the tables. So im hoping someone here might be able to help me. I am using css to style all my tables btw.

I have a navigation bar which I want to reach down to the bottom of the page. It is embedded within a parent table. I have set the heights of all neccessary parent tags (html, body, table, td.parent table, table 2 e.t.c) to 100%. But win ie6 seems to interpret height: 100% differently to all other browsers, as it sets the navigation collumn to 1 complete height of the browser window instead of to the bottom of the parent table. This is an issue for me as I need the navigation bar to stretch as I put more content onto the page. I hope I made my problem clear.

Searching on google brought back a few fixes for this WHEN using CSS instead of tables, but no clear answer for how to fix this when using tables. Also, I must mention that I am using the Xhtml 1.0 strict doctype.

05-16-2005, 09:11 AM
Okay ... visit this page, is this what you'r aiming for? A side menu that extends to the bottom of the page?


If it is - then the one small work around that can turn a table that fails to extend, into a table that does work, is to replace the opening of the 'table' tag.

(original that doesn't work)
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

(replacement that seems to do the trick)


it seems to make more sence to IE if you open the table tag with " table width=", and end the tag with the 'table' again. I do not know why.

Does this help solve your problem?

05-16-2005, 11:57 AM
Hey creo

thanks for the hints...I am actually aware of the height property, but I appreciate the help!

Unfortunately, to conform to the xhtml strict doctype, height is not valid, and css must be used to affect layout properties. What im needing is a way to correct this issue for the xhtml strict doctype.

If anyone out there is aware of how to fix this problem, I would greatly appreciate it! :) Im on the verge of kicking back to xhtml transitional to save from pulling my hair out :P

05-16-2005, 06:04 PM
Well the fact that you know CSS should be used, I don't see a problem. If you are coding in XHTML Strict then you should at least have a decent understanding of CSS and how it affects your page. Most of the time to get a block level element to be a height in percentages, you must declare the height of the html and body elements of the page.


<table border="0" id="table1" cellpadding="0" cellspacing="0">


html,body {
#table1 {
margin:auto; /*align=center won't cut it in Firefox*/

05-17-2005, 12:05 AM
Yep, I have both html and body tags declared as a percentage of 100% already, but this embedded table still doesnt wanna stretch out 100%

05-17-2005, 12:07 AM
Now is the time when it would be good to show us your code or give us a link. Without either of that info, its like we are giving solutions while being blind.

05-17-2005, 12:26 AM
sure aerospace.eng ...

here's the link to a copy of the page im working on. Please view in both IE6 to see the issue, and another browser (opera, firefox etc) to view it working properly:


linked to this is multiple css files. The only ones that are relavent to this issue are:




styles.css relates to the entire page layout, while navbar.css relates to the navbar specifically. All the code validates, no matter how messy it is :p

p.s. a quick second question relating to margins....while your viewing the page in a non ie browser, check out the lack of bottom margin, even though in IE, the margins/padding show fine. (the css for this is in styles.css)

05-19-2005, 12:21 AM
bump :eek: