Page 1 of 1

height:100%; ie workaround needed

Posted: Fri Nov 12, 2004 4:58 pm
by newmember
i have a div inside table cell.
i want that div to take all cell's height so i set
height:100% for that div.
the problem is that ie ignores this and it streches div only according to its content
(firefox doing it ok)

Is it posssible to overcome this IE quirk?

Posted: Fri Nov 12, 2004 5:15 pm
by Weirdan
for IE (v6) you need to add 'height: 100%' to td's style

Posted: Fri Nov 12, 2004 5:27 pm
by newmember
i tried it and it doesn't work
the <td> i'm talking about spans threee rows <td rowspan="3"></td>
maybe because of this it doesn't work
and applying height="100%" to row also doesn't help

Posted: Fri Nov 12, 2004 6:19 pm
by Weirdan
That does work for me even with colspan (both in quirks and standards mode). What version of IE you're talking about?

Posted: Sat Nov 13, 2004 4:15 am
by newmember
i use winxp with the most recent version of ie there is
my table looks something like:
<table>
<tr><td rowspan="3"></td> <td></td> <td></td> </tr>
<tr><td></td> <td></td> </tr>
<tr><td></td> <td></td> </tr>
</table>

Posted: Fri Nov 19, 2004 12:47 pm
by Htmljoe
:wink: Try this:

Code: Select all

&lt;body style="margin:0px; padding:0px;"&gt;&lt;!-- style may be omitted in this tag if you want margins --&gt;
&lt;table style="height:100%;" border="2"&gt; 
&lt;tr&gt;&lt;td rowspan="3"&gt;&amp;nbsp;1&lt;/td&gt; &lt;td&gt;&amp;nbsp;2txt&lt;/td&gt; &lt;td style="width:100%;"&gt;&amp;nbsp;3&lt;/td&gt; &lt;/tr&gt; 
&lt;tr&gt;&lt;td&gt;&amp;nbsp;1&lt;/td&gt; &lt;td&gt;&amp;nbsp;2 txt txt&lt;/td&gt; &lt;/tr&gt; 
&lt;tr&gt;&lt;td&gt;&amp;nbsp;1&lt;/td&gt; &lt;td&gt;&amp;nbsp;2&lt;/td&gt; &lt;/tr&gt; 
&lt;/table&gt;
&lt;/body&gt;
Weirdan | Help us, help you. Please use

Code: Select all

and

Code: Select all

tags where approriate when posting code. Read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url][/color]

Posted: Mon Nov 22, 2004 9:31 am
by newmember
hi
i still didn't solved the problem with height but finally i found the cause of this.
below is ready to use code that demonsrates what happens in IE when DOCTYPE declaration is changed...

the first DOCTYPE in his code is what i use and why all above suggestions for fix don't work.(this DOCTYPE taken from
http://www.w3.org/QA/2002/04/valid-dtd-list.html)
The second DOCTYPE is something my editor generates automaticly and it is commented out in below code...

Now try the following:
ran the code below first time with first DOCTYPE and second time with second DOCTYPE and see how height:100% is affected...

So if i want height:100% to work i need to use second DOCTYPE

Can i make it to work with first DOCTYPE ?

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">-->
<html>
<head>
<title>test</title>
<style>
#divr&#123;height:100%;background-color:#0f0;&#125;
#divl&#123;height:100%;background-color:#00f;&#125;
</style>
</head>

<body>

<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr>
<td width="50%">
<div id="divl">line 1<br />line 2<br />line 3<br /></div>
</td>
<td height="100%">
<div id="divr">line 1<br /></div>
</td>
</tr></table>
</body>
</html>
thanks

what i found out afer submitting of this post is that if i use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
then IE works in non-standarts mode and i don't want that
(it is equavalent to not specifying DOCTYPE at all)
quirks mode in IE is triggered by not having a doctype or using a partial html doctype without uri.
taken from http://www.sitepoint.com