Page 1 of 2
forcing cell to be 25px wide
Posted: Thu Oct 28, 2004 12:06 pm
by newmember
i'm setting a background for a table cell
i set a width of cell equal to width of background(=25px)
but after i check the result the cell is wider than 25 pixel...
what can i do to make it use my 25px?
Posted: Thu Oct 28, 2004 12:12 pm
by Draco_03
plz post your code
Posted: Thu Oct 28, 2004 12:19 pm
by newmember
here is the code:
html:
Code: Select all
<table id="main" border="1">
<tr>
<td id="top" colspan="3">row 1</td>
</tr>
<tr>
<td id="left"></td>
<td><img src="images/pic.jpg" /></td>
<td id="right"></td>
</tr>
</table>
css:
Code: Select all
body{width:100%}
#main{width:100%;border-collapse:collapse;}
#top{width:100%;}
#left,#right{
width:25px; background-repeat:repeat-y;
background-image:url(images/b.png)}
Posted: Thu Oct 28, 2004 2:05 pm
by jollyjumper
try to give your middle cell a width of 100% as well, as you've done with your table.
Greetz Jolly
Posted: Thu Oct 28, 2004 2:18 pm
by newmember
doesn't work
if i give to middle cell width=100% then it covers entire row so images not visible at all
Posted: Thu Oct 28, 2004 2:22 pm
by newmember
i removed width:100% from #top cell and it did the trick...right and left cells streched exactly 25px wide...
but i'm very curious where exactly the problem was...
if anyone knows please tell me:)
thank you...
P.S.
Is it true that cells in every column will have eventually same width?
Posted: Thu Oct 28, 2004 2:34 pm
by rehfeld
table cells are very unique elements
they arent really block level or inline, they are table cells lol
setting a width on a cell is not always "final", it could be squished down still
but this will work, because a div IS a block level element, and when you set a width on it, it will be at least that width no matter what
Code: Select all
<head>
<style type="text/css">
body{width:100%}
#main {
width:100%;
border-collapse: collapse;
}
#top { width:100%; }
#left div, #right div {
width:25px;
background-repeat: repeat-y;
background-image: url(images/b.png);
}
#center { width: 100%; }
</style>
</head>
<body>
<table id="main" border="1">
<tr>
<td id="top" colspan="3">row 1</td>
</tr>
<tr>
<td id="left"><div></div></td>
<td id="center"><img src="images/pic.jpg" /></td>
<td id="right"><div></div></td>
</tr>
</table>
Posted: Thu Oct 28, 2004 2:35 pm
by jollyjumper
Hi,
Well this is just my opinion, but I've never been a fan about colspan and rowspan. I always have experienced unexpected things with it.
To take your example, I would have build it this way:
Code: Select all
<table id="main" border="1">
<tr>
<td id="top">row 1</td>
</tr>
<tr>
<td width="100%">
<table border="1" width="100%">
<tr>
<td id="left"></td>
<td><img src="images/pic.jpg" /></td>
<td id="right"></td>
</tr>
</table>
</td>
</table>
The first table has 2 rows with each 1 cell, and the 2nd row is split into 3 columns.
It should create the same result as you would expect with a colspan.
Greetz Jolly.
Posted: Thu Oct 28, 2004 3:12 pm
by newmember
jollyjumper
i'm aware:) of this technique...actually i use it in my table...i just didn't want start from "one cell" and nesting tables inside...
as i wrote above the problem solved by removing width:100% from #top cell...i think it causes some width conflict when UA's try to render it...
Posted: Fri Oct 29, 2004 7:11 pm
by newmember
i'm back with more table problems...
html
------
Code: Select all
<table id="main" border="1" cellpadding="0">
<tr>
<td id="left">
<table border="1" cellpadding="0" id="tbl1">
<tr><td id="cell1"></td></tr>
<tr><td id="cell2"></td></tr>
</table>
</td>
<td id="middle"></td>
<td id="right"></td>
</tr>
</table>
css
-----
Code: Select all
#main{width:100%;} /*main table*/
#left{vertical-align:top;width:35px;}
#tbl1{width:100%;height:100%;} /*nested table streched to occupy #left*/
#cell1{height:100px; background-position:top left;
background-repeat:no-repeat; background-image:url(images/picr.png)} /*height in pixels*/
#cell2{background-repeat:repeat-y; background-position:top left;
background-image:url(images/back.png)}
#middle{height:200px;}
#right{width:35px;}
[
the problem
i'm putting a fixed size picture as background inside #cell1 and i put another tiled background into #cell2.
the thing is that despite i fix height:100% for #tbl1, the table doesn't strech to occupy #left completly.
i checked this with seting #left's background to red and #tbl1's to yellow...
what i see is that #left cell colored completly in red while #tbl1 is not...
the pictures says it all:
any help is appreciated....
i killed many hours on trying to solve this problem,playing with dimensions, but no luck so far...
Try this
Posted: Fri Oct 29, 2004 8:59 pm
by neophyte
My recommendation for what it is worth:
1. don't try using the "height" parameter.
2. In order to fill the height problem you have to have at least two tables. One table the structure table that has the background image/ color that stretches with the rest of the data/content and another inside of that that is controlled.
3. I suggest using align, height, width parameters in your <td> tags as opposed to using CSS for it.
I just spent my day tackling a similar problem....
Posted: Sat Oct 30, 2004 2:05 am
by newmember
3. I suggest using align, height, width parameters in your <td> tags as opposed to using CSS for it.
Can you explain please Why?
Still no solution...
I removed all explicit hiegth from #left and #tbl1 but #tbl1 just refuses to strech all over #left...
Posted: Sat Oct 30, 2004 3:57 am
by newmember
i tried to move all widths and heights attributes to html tags but this doesn't help either...
what i managed to discover so far that if i set height:100% for #left(this is the cell that contains table) then firefox streches
#tbl1 to occupy entire #left but NOT IE...
(the strange thing is that without setting height:100%, i ran ff's dom inspector tool to see the actual height of #left and it is as it should be:the same as #middle's...but #tbl1 isn't streched to full height of #left)
Posted: Sat Oct 30, 2004 4:28 am
by neophyte
Not suprised about IE not using height tags to expand tables. I ended up using an outer table and two inner tables to achieve a similar affect.
I'm suggesting using the table properties in the spirit of KISS (keep it simple stupid)

. Honestly I don't trust the css positioning stuff that well. Besides is this something you'll use more than once? Somewhere else on the page? If not what's the point in using CSS if table tags will do the job?
Keep trying you'll figure out a way!

Posted: Sat Oct 30, 2004 6:16 am
by newmember
i'll start fresh (just forget everything above this post)
i wrote another test code and picture along with it explaining the problem...
Code: Select all
<table id="maintable" border="1" cellpadding="0" cellspacing="2" width="50%">
<tr><td id="parent" width="150">
<table id="nested" border="1" cellpadding="0" cellspacing="2" height="100%">
<tr><td id="topcell" height="80" width="100"></td></tr>
<tr><td id="bottomcell"> </td></tr>
</table>
</td>
<td height="300">right cell</td></tr>
</table>
css
----
Code: Select all
#parent{background-color:#f00;vertical-align:top}
#topcell{background-color:#00f;}
#bottomcell{background-color:#0f0;}
yellow line on picture is what i'm trying to achieve...