forcing cell to be 25px wide

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

forcing cell to be 25px wide

Post 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?
Draco_03
Forum Regular
Posts: 577
Joined: Fri Aug 15, 2003 12:25 pm
Location: Montreal, Canada

Post by Draco_03 »

plz post your code
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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&#123;width:100%&#125;

#main&#123;width:100%;border-collapse:collapse;&#125;
#top&#123;width:100%;&#125;
#left,#right&#123;
width:25px; background-repeat:repeat-y; 
background-image:url(images/b.png)&#125;
jollyjumper
Forum Contributor
Posts: 107
Joined: Sat Jan 25, 2003 11:03 am

Post by jollyjumper »

try to give your middle cell a width of 100% as well, as you've done with your table.

Greetz Jolly
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post by newmember »

doesn't work
if i give to middle cell width=100% then it covers entire row so images not visible at all
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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?
rehfeld
Forum Regular
Posts: 741
Joined: Mon Oct 18, 2004 8:14 pm

Post 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&#123;width:100%&#125;

#main &#123;
    width:100%;
    border-collapse: collapse;
&#125;

#top &#123; width:100%; &#125;

#left div, #right div &#123;
    width:25px;
    background-repeat: repeat-y;
    background-image: url(images/b.png);
&#125;

#center &#123; width: 100%; &#125;

</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>
jollyjumper
Forum Contributor
Posts: 107
Joined: Sat Jan 25, 2003 11:03 am

Post 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.
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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...
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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&#123;width:100%;&#125; /*main table*/

#left&#123;vertical-align:top;width:35px;&#125;

#tbl1&#123;width:100%;height:100%;&#125; /*nested table streched to occupy #left*/

#cell1&#123;height:100px; background-position:top left;
background-repeat:no-repeat; background-image:url(images/picr.png)&#125; /*height in pixels*/

#cell2&#123;background-repeat:repeat-y; background-position:top left;
background-image:url(images/back.png)&#125;

#middle&#123;height:200px;&#125;

#right&#123;width:35px;&#125;
[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:

Image

any help is appreciated....
i killed many hours on trying to solve this problem,playing with dimensions, but no luck so far...
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Try this

Post 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....
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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...
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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)
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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) :wink: . 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!

:D
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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...

Image

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">&nbsp;</td></tr>
</table>
</td>
<td height="300">right cell</td></tr>
</table>
css
----

Code: Select all

#parent&#123;background-color:#f00;vertical-align:top&#125;
#topcell&#123;background-color:#00f;&#125;

#bottomcell&#123;background-color:#0f0;&#125;
yellow line on picture is what i'm trying to achieve...
Post Reply