height:100%; ie workaround needed

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

height:100%; ie workaround needed

Post 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?
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

for IE (v6) you need to add 'height: 100%' to td's style
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

That does work for me even with colspan (both in quirks and standards mode). What version of IE you're talking about?
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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>
Htmljoe
Forum Newbie
Posts: 1
Joined: Fri Nov 19, 2004 12:41 pm
Location: weatherloose.dk

Post 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]
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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
Post Reply