October 7, 2008 09:37am pdt

1. war1 132,225
2. mtz1of4 132,195
3. b0lsc0tt 98,680
4. hielo 56,840
5. Kravimir 43,632
6. Steggs 31,640
7. mplungjan 29,593
8. scrathcyboy 17,124
9. GreenGho... 16,776
10. eoinosullivan 12,850
11. VirusMinus 11,280
12. TName 9,500
13. araim 8,250
14. nexusnation 8,000
15. rindi 7,952
16. LordOfPo... 7,800
17. jcimarron 7,400
17. rpggamer... 7,400
19. strobbe 6,500
20. HackneyCab 6,100
21. Rouchie 6,000
21. IndiGenus 6,000
21. kayahr 6,000
24. aneeshch... 5,750
25. MMDevelo... 5,575

1. mtz1of4 267,536
2. war1 231,368
3. b0lsc0tt 131,009
4. TName 91,555
5. hielo 61,840
6. mplungjan 53,368
7. Steggs 45,665
8. Kravimir 43,632
9. GreenGho... 29,256
10. VirusMinus 23,980
11. Zvonko 17,450
12. scrathcyboy 17,124
13. eoinosullivan 16,850
14. Sheharya... 16,700
15. rindi 12,952
16. basicinsti... 12,100
17. Eternal_S... 11,214
18. mreuring 10,341
19. hernst42 9,500
20. darron_c... 9,250
20. araim 9,250
22. IndiGenus 9,200
23. RedKelvin 8,699
24. nexusnation 8,000
24. jason1178 8,000

07.08.2008 at 09:15AM PDT, ID: 23547214 | Points: 500

	[x] Attachment Details

Why is my 3 row table stretching 100% high, but the middle row stretches oddly in Internet Explorer?

Asked by Ultrus in Cascading Style Sheets (CSS), Internet Explorer Web Browser, Firefox Web Browser

Tags: CSS, HTML, Firefox 2.0, Firefox 3.0, Internet Explorer 6.0, Internet Explorer 7.0, http://ultran.info/test2.html

Hello Gurus,
I'm troubleshooting a table that stretches 100% high,where the top and bottom row have pixel heights, and the middle row is supposed to stretch and fill the gap. This is working great everywhere but Internet Explorer, collapsing the middle row and making the top and bottom rows stretch.

In the example provided, the table fills the whole page. The actual template I'm working on mainly uses this type of table to fill different columns of the page layout to make variable height content in cell A line up with variable height content in cell B. The main template shell also follows this format, which could be changed, but that doesn't resolve what's going on with the content within the page.

I could "resolve" this issue by forcing IE into quirks mode like this:

<![if !IE]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<![endif]>

However, that seems unprofessional and causes some other undesirable side effects. Any thoughts on how to make this work? If I have to, I'll rebuild every page but my boss wouldn't be too happy with that. :P I can also change the doctype if needed "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> " is not valid, so I guess I couldn't use that. I also want to leave the stone ages if I can with doctype.

I've seen some partial solutions in other areas, but have not hit the target yet.

Thanks for the assist! Let me know if I can provide further info.Start Free Trial

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS height: 100%; Test</title>
<style type="text/css">
body, html {
	height: 100%;
	margin: 0px;
	background-color: #000000;
}
 
table {
	padding: 0px;
	border-spacing: 0px; 
	border-width: 0px;
	width: 100%;
	border-collapse: collapse;
	margin: 0px;
}
 
td {
	padding: 0px;
	border-spacing: 0px; 
	border-width: 0px;
	vertical-align: top;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10pt;
	margin: 0px;
}
</style>
</head>
<body>
    
      <table style="height: 100%; width: 100%;">
        <tr>
          <td style="height: 80px; background-color: #FF9900;">
    	      height: 80px;
          </td>
        </tr>
        <tr>
          <td style="background-color: #CC0000;">
          	height: (not specified - looks great in FireFox, causes odd stretching in IE, unless doctype is removed)
            
          </td>
        </tr>
        <tr>
          <td style="height: 30px; background-color: #FF9900;">
    	    height: 30px;
          </td>
        </tr>
      </table>
 
</body>
</html>

           
         

Keywords: Why is my 3 row table stretching 10…

	Title
1	make div stretch?
2	xmlns
3	xmlns interfering with XQuery on XHT…
4	Stretching a DIV to the bottom of the sc…
5	xhtml
6	Why do I include <html xmlns="http…

Loading Advertisement...

20080716-EE-VQP-32 / EE_QW_2_20070628