 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
infekt-work
Joined: 29 Jun 2005
Posts: 4
|
 Posted: Wed Jun 29, 2005 12:59 pm rowspan height problem ie/firefox |
 |
|
|
ok, there has got to be a way to make these td's have a fixed height in IE.. the overall height is determined by the varying content in the right cell.
here is the code and image of the different results created by three different browsers. Firefox is the only one giving me the correct result I am looking for. I have tried many different things but cannot get the result I am looking for. If anyone could help out it'd be SO greatly appreciated.
Thanks.
Infekt
Last edited by infekt-work on Thu Jun 30, 2005 7:43 am; edited 1 time in total |
|
gary.newelluk
Joined: 12 May 2005
Posts: 548
Location: Peterhead, Scotland
|
| Posted: Thu Jun 30, 2005 12:46 am |
|
|
|
| Code: |
| <td style="height: 160px">b</td> |
In the middle row set the height of the column to 160px.
Basically you have set the 2nd column to be 200px spanning 3 rows. IE seems to split the 200px equally, not quite sure why.
By specifying the B column as 160px it means A and C have to be 20 each.
I have only tested this in IE, I hope it doesn't affect Firefox |
|
infekt-work
Joined: 29 Jun 2005
Posts: 4
|
| Posted: Thu Jun 30, 2005 7:18 am |
|
|
|
thanks for the reply gary...
unfortunately, the problem lies in the fact that the height is variable. It just happens to be 200px in height for this example, but the actual content intended in the right cell will vary. |
|
gary.newelluk
Joined: 12 May 2005
Posts: 548
Location: Peterhead, Scotland
|
| Posted: Thu Jun 30, 2005 8:51 am |
|
|
|
Sorry I should have spotted the big bold letters that said variable in your example......
Is this for a page template? Maybe you should consider using <div> tags and stylesheets.
To be honest I can't find a solution either using the <td> tags. |
|
infekt-work
Joined: 29 Jun 2005
Posts: 4
|
| Posted: Thu Jun 30, 2005 9:26 am |
|
|
|
I am using tables because I need the "b" cell to react to the size of the right hand cell. If I use <div>'s the div on the right will adjust to the contents in itself while not affecting the size of cell "b".
I need cell "b" to grow or shrink in height, following the varying dynamic content that is entered into the right hand side cell.
The reason being is graphical. I have background images in cells "a","b",and "c". Cell "b" has a vertically tiling background-image, while "a" and "b" are 20x20 corner graphics.
Thanks for reply.
Infekt |
|
lauxa
Joined: 10 Jul 2005
Posts: 2
|
| Posted: Thu Jul 14, 2005 5:41 pm |
|
|
|
This is such an interesting problem, I've been working on it for 2 days and still can't find a good answer.
In IE, you can do it with nested tables like this:
| Code: |
<table border=1 height=200>
<tr>
<td>
<table border=1 height=100%>
<tr><td height=20>a</td></tr>
<tr><td>b</td></tr>
<tr><td height=20>c</td></tr>
</tr>
</table>
</td>
<td>d</td>
</tr>
</table> |
This also works in Opera and Firefox, but not Netscape because for some reason Netscape ignores "height=100%".
Here's my best effort at this in CSS:
| Code: |
<head>
<style type=text/css>
div#container{
position: absolute;
top: 20;
left: 20;
width: 60;
padding-left: 40;
border: 1px solid #000;
background: #fcf;
}
div#topleft{
position: absolute;
top: 0;
left: 0;
width: 20;
height: 20;
background: #ffc;
border: 1px solid #000;
padding: 5;
}
div#midleft{
position: absolute;
top: 30;
left: 0;
width: 20;
border: 1px solid #000;
background: #cff;
padding: 5;
}
div#botleft{
position: absolute;
left: 0;
bottom: 0;
width: 20;
height: 20;
background: #ffc;
border: 1px solid #000;
padding: 5;
}
</style>
</head>
<body>
<div id=container>
<div id=topleft>a</div>
<div id=midleft>b</div>
<div id=botleft>c</div>
d d d d d d d d
d d d d d d d d
d d d d d d d d
d d d d d d d d
</div>
</body> |
The problem here is that "b" isn't really the same height as "d - (a+c)", so it won't work if you wanted the "b" content centered. Also, if you wanted a border around "b" then you can't rely on CSS to make the border... but you could make a .gif background for the "d" box that would give you the color/border effect you want.
Another option might be able to hack CSS to make the "b" element dependent on the height of "d" using javascript, see http://www.sitepoint.com/article/exploring-limits-css-layout/ for details. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
