Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table row expanding despite height etc 1

Status
Not open for further replies.
TFfan

TFfan

Programmer
Jan 18, 2002
192
CA
I have a tabular setup with the outside column spanning 4 rows. The four rows consist of two "boxes" each with a thin title row (28 pixels high) and another row for content.

the problem is that when the outside column grows, it forces the spanned rows to expand also--this is fine, but I do not want the title rows to epand proportionally, only the content areas to expand. I would like the title rows to remain 28px high.

To no one's surprise, Mozilla/Firefox does exactly what I want. IE expands all the rows unfortunately, including the title rows.

Is there a way to force/trick IE into compliance?

I've tried everything I can think of in both my SS and html and nothing seems to work. thanks.
 
Sort by date Sort by votes
I'm not sure I fully understand the problem. I certainly don't understand how the "boxes" are created? With another table within each of the 4 cells, maybe?

I've recreated what I understand to be what you have, and I cannot get it to exhibit what I understand your problem to be:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
		.titleRow {
			height: 28px;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<table border="1" cellpadding="0" cellspacing="0">
		<tr>
			<td rowspan="4">
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
				Some content<br />
			</td>
			<td valign="top">
				<table border="1" cellpadding="0" cellspacing="0">
					<tr class="titleRow">
						<td>Title Row 1</td>
					</tr>
					<tr>
						<td>Content Row 1</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td valign="top">
				<table border="1" cellpadding="0" cellspacing="0">
					<tr class="titleRow">
						<td>Title Row 2</td>
					</tr>
					<tr>
						<td>Content Row 2</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td valign="top">
				<table border="1" cellpadding="0" cellspacing="0">
					<tr class="titleRow">
						<td>Title Row 3</td>
					</tr>
					<tr>
						<td>Content Row 3</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td valign="top">
				<table border="1" cellpadding="0" cellspacing="0">
					<tr class="titleRow">
						<td>Title Row 4</td>
					</tr>
					<tr>
						<td>Content Row 4</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

Can you elaborate on how your problem relates to that code? Am I way off here?

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
 
Upvote 0 Downvote
Also, did you think about moving away from a table layout and going with css?
 
Upvote 0 Downvote
Hi, thanks for your replies. Firstly, yes, I'd prefer to use straight CSS too, but I do not think it's possible to do what I want to do. Say I'm using a standard box design in CSS. Two independant boxes have separate content. When one content box grows with text, I'd like the other to grow with it, despite it's lack of sufficient content (ie to be filled with white pace so that each box is the same height).

If there's a way to accomplish this in CSS, I'd be thrilled to hear about it.

I do not want to use nested tables, I'mpretty sure that would fix my problem, but one table is enough (the drawbacks of nested tables are obvious).

This is what I'm trying to explain.
_______________________
td title | td title
_______________________
td content | td content2
| rowspan=3
|
_________|
td title |
_________|
td content3|
|
|
|


Now, when content 2 gets more content than content and content3, the title td grow proportionally with their content boxes. Firefox, displays this correctly, by only growing the content and maintaining my 28px title heights. IE ignores this.
 
Upvote 0 Downvote
So am I to assume there is no known fix?
 
Upvote 0 Downvote

So am I to assume there is no known fix?
Click to expand...

I do not want to use nested tables, I'mpretty sure that would fix my problem
Click to expand...

You've answered your own question. Yes, there is, but you do not want to use it.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 
Upvote 0 Downvote
Upvote 0 Downvote
I didn't mean to ignore your suggestion BRPS, but the use of nested tables is bad practise, and I'd like to avoid it. I appreciate your help just the same.

These are templates that will be used by other people (via a builder)--if it were for me, I could work around it, but there's no telling what the masses will do with it. If there is no solution, maybe a text limiter will be used.

Foamcow, yes I know of the faux column method, but it's not applicable here as some of the designs are more complicated than that.

Thanks anyway. If I find a solution, I'll be sure to post it here.
 
Upvote 0 Downvote
You can do it with CSS and Javascript.
I used it on a couple of sites but have since revamped them so they don't need/use the script.

Basically the script looked at the height of each div/column then reset the heights to all be the same as the longest one.
It worked, but with the disadvantages of Javascript.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time
 
Upvote 0 Downvote
Thanks Foamcow, while I won't use it for this, I'd really like to take a look at that script. Leanring something new is never a bad thing.
 
Upvote 0 Downvote
Simple solution. I put the title in a div instead of a TD, placed it inside the content TD and used absolute positioning, negative margins and explicit widths.

So I get collumns that expand with each other and IE doesn't mess up the height of my title "boxes". It's also cleaner and closer to the ideal.

Not sure why this never occurred to me before.

Thanks for your time, guys.
 
Upvote 0 Downvote
Absolute positioning and negative margins make me cringe. I wouldn't call that solution clean.
 
Upvote 0 Downvote
I didn't call it clean, I called it cleaner--cleaner than nested tables. If there's a more elegant solution, I'd be thrilled to hear it.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
473
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
99
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
98
PeDa
PeDa
Carlvic
  • Locked
  • Question
Web Development Tools, Plugins &amp; Etc Suggestions 1
Replies
4
Views
86
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
100
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top