Fix a bug and ten more arrives

L

liunx

Guest
Yet again, I seem to want a thing that can't be done. :crying: <br />
<br />
<br />
<html><br />
<head><br />
<title>Table</title><br />
<style><br />
.vaTop {<br />
vertical-align: top;<br />
}<br />
</style><br />
</head><br />
<br />
<body><br />
<table border="1" width="760"><br />
<tr><br />
<td colspan="3">Cell 1</td><br />
</tr><br />
</table><br />
<table border="1" width="760"><br />
<tr><br />
<td width="201" class="vaTop"><br />
<div><br />
<h1>Cell 2</h1><br />
<p><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam<br />
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
</p><br />
<p><br />
Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper<br />
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure.<br />
</p><br />
<p>Bob</p><br />
</div><br />
</td><br />
<td colspan="2" class="vaTop"><br />
<table width="100%" border="1"><br />
<tr><br />
<td colspan="2" height="74">Cell 3a</td><br />
</tr><br />
<tr><br />
<td width="200" height="100%"><br />
<p><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam<br />
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
</p><br />
</td><br />
<td>Cell 3c</td><br />
</tr><br />
</table><br />
</td><br />
</tr><br />
<tr><br />
<td>Cell 4</td><br />
<td>Cell 5</td><br />
<td>Cell 6</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
<br />
<br />
See it live : <!-- m --><a class="postlink" href="http://www.wolfmahheaven.net/zzz4b.htm">http://www.wolfmahheaven.net/zzz4b.htm</a><!-- m --><br />
<br />
Here, I want to make Cell 3b and Cell 3c to always fit the bottom of Cell 2. Cell 3a would be always fix at 74px in height and Cell 3 b/c would start right after it and go down until they reach the same bottom height as Cell 2 which would be mostly variable. Is there a way to get the result?<!--content-->yes, on the table tag of cells 3 a/b/c, add hieght="100%"<br />
<br />
that should correct the issue for you, because cell 3 a/b/c would then streach to encompass the entire available height of the td tags that encompass the cell 3 a/b/c table<!--content-->Okay, so I'm not the brightest bulb in the box, but why do you have a colspan in Cell 1? It's the only cell in that table. <br />
<br />
Peg<!--content-->yes, on the table tag of cells 3 a/b/c, add hieght="100%" --- ucm<br />
<br />
I tried, but it doesn't work either in IE6 or NS7<br />
<br />
[...]I'm not the brightest bulb in the box, but why do you have a colspan in Cell 1? --- Pegasus<br />
<br />
You're right, I only forgot to take it back while making my tests ;).<!--content-->Some browsers don't like the height commands. And if you typed it as "hieght", it wouldn't work, either.<br />
<br />
However, what happens if you write the 3 block of cells as:<br />
<br />
<table width="100%" height="100%" border="1"> <br />
<tr> <br />
<td colspan="2" height="74">Cell 3a</td> <br />
</tr> <br />
<tr> <br />
<td width="200" height="100%"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></td> <br />
<td height="100%">Cell 3c</td> <br />
</tr><br />
</table> <br />
<br />
I don't know if that would help, but it might. The only other option I can see is to make the top and bottom rows, cells 1, 4-6, as separate tables, and have cells 2 and the 3-block of cells in another table. That's about the only other way you're going get everything to line up the way you want.<br />
<br />
Peg<!--content-->Peg has it right. if the table doesn't have enough text in it to stretch to 100% it will not get renderd as such. IE doesn't do this correctly as it does expand it to 100%. in order for you to get it to go 100% you will have to use div tags and/or enough text to make it go that high.<!--content-->After countless test in the past week, I may have found something that could be working, but unfortunatly it only works for IE for now (only test in IE6).<br />
<br />
Heres the code (red part are addition or remodeling of the previous code) : <br />
<br />
<html><br />
<head><br />
<title>Table</title><br />
<style><br />
.vaTop {<br />
vertical-align: top;<br />
}<br />
<br />
.div1 {<br />
height: 100%;<br />
border: 1px solid #000000;<br />
}<br />
<br />
.div2 {<br />
height: 100%;<br />
border: 1px solid #000000;<br />
}<br />
</style><br />
</head><br />
<br />
<body><br />
<table border="1" width="760"><br />
<tr><br />
<td>Cell 1</td><br />
</tr><br />
</table><br />
<table border="1" width="760"><br />
<tr><br />
<td width="201" height="300" class="vaTop"><br />
<div class="div1"><br />
<h1>Cell 2</h1><br />
<p> <br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam <br />
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br />
</p> <br />
<p> <br />
Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper <br />
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure. <br />
</p> <br />
<p>Bob</p><br />
</div><br />
</td><br />
<td colspan="2" height="300" class="vaTop"><br />
<div class="div2"><br />
<table width="100%" border="1" height="100%"><br />
<tr><br />
<td colspan="2" height="74">Cell 3a</td><br />
</tr><br />
<tr><br />
<td><br />
<p><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam<br />
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
</p><br />
</td><br />
<td width="144">Cell 3c</td><br />
</tr><br />
</table><br />
</div><br />
</td><br />
</tr><br />
<tr><br />
<td>Cell 4</td><br />
<td>Cell 5</td><br />
<td>Cell 6</td><br />
</tr><br />
</table><br />
</body><br />
</html><!--content-->
 
You must log in or register to reply here.
Back
Top