Tables with corners

  • Thread starter Thread starter tshad
  • Start date Start date
T

tshad

I have created a table for my textboxes and labels and have set up some
images with corners in the top left and top right.

The images are 15px in height but the text is making the size of the row a
little bit higher.

How do I make my image expand to fill the cell?

It is almost the full height - I just need to stretch it about 1 pixel. I
have the cellpadding and cellspacing set to 0.

<table cellpadding="0" cellspacing="0"
style="text-align:center;
background-color:Transparent; border-style:none; margin-bottom:0px"
width="900px">
<tr>
<td width="15px" height="15px"
style="background: url(images/RoundTL.gif) no-repeat;
background-position:bottom; background-color:inherit"></td>
<th>Client Setup</th>
<td width="15px" height="15px"
style="background: url(images/RoundTR.gif) no-repeat;
background-position:bottom; background-color:inherit"></td>
</tr>
</table>

It works fine except for the fact it doesn't line up on the top.

Thanks,

Tom
 
I have created a table for my textboxes and labels and have set up
some images with corners in the top left and top right.

The images are 15px in height but the text is making the size of the
row a little bit higher.

How do I make my image expand to fill the cell?

It is almost the full height - I just need to stretch it about 1
pixel. I have the cellpadding and cellspacing set to 0.

<table cellpadding="0" cellspacing="0"
style="text-align:center;
background-color:Transparent; border-style:none; margin-bottom:0px"
width="900px">
<tr>
<td width="15px" height="15px"
style="background: url(images/RoundTL.gif) no-repeat;
background-position:bottom; background-color:inherit"></td>
<th>Client Setup</th>
<td width="15px" height="15px"
style="background: url(images/RoundTR.gif) no-repeat;
background-position:bottom; background-color:inherit"></td>
</tr>
</table>

It works fine except for the fact it doesn't line up on the top.
Click to expand...

You are setting up the image as a background and not constrained to the
table cell, which is where your overlay is not working. If you want a
full cell, put the image in the cell or play with the image to fit the
background.

I am all for CSS, but when you do the way yo uare doing, the image is
not in the cell, per se, but a background (layered, sort of).

Hope this makes sense!

Peace and Grace,
Greg


--
Vote for Miranda's Christmas Story
http://tinyurl.com/mirandabelieve

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
Gregory A. Beamer said:
You are setting up the image as a background and not constrained to the
table cell, which is where your overlay is not working. If you want a
full cell, put the image in the cell or play with the image to fit the
background.

I am all for CSS, but when you do the way yo uare doing, the image is
not in the cell, per se, but a background (layered, sort of).

Hope this makes sense!
Click to expand...

It does.

I did change it to an image and created a larger height and it worked fine.
I don't know if that was the best way but it works.

<asp:Panel ID="mFilterPanel" runat="server">
<table cellpadding="0" cellspacing="0"
style="text-align:center;
background-color:Transparent; border-style:none; margin:20px 0px 0px 0px"
width="900px">
<tr>
<td width="15px" height="15px"><img
src="images/RoundTL.gif" height="20px" /></td>
<th>New Client Setup</th>
<td width="15px" height="15px" /><img
src="images/RoundTR.gif" height="20px" /></td>
</tr>
</table>

I also couldn't get this to work inside my table as my transparent corners
used the background color of the table instead of the background color of
the window.

So I just created another table (above) and set the bottom margin to 0 and
came flush with the bottom table.

I am curious as to why I only had to change the margin of the bottom of top
table and not also the top of the bottom table (phew). I would have thought
I would have to set them both to 0px.

Thanks,

Tom
 
It does.

I did change it to an image and created a larger height and it worked
fine. I don't know if that was the best way but it works.

<asp:Panel ID="mFilterPanel" runat="server">
<table cellpadding="0" cellspacing="0"
style="text-align:center;
background-color:Transparent; border-style:none; margin:20px 0px 0px
0px" width="900px">
<tr>
<td width="15px" height="15px"><img
src="images/RoundTL.gif" height="20px" /></td>
<th>New Client Setup</th>
<td width="15px" height="15px" /><img
src="images/RoundTR.gif" height="20px" /></td>
</tr>
</table>

I also couldn't get this to work inside my table as my transparent
corners used the background color of the table instead of the
background color of the window.

So I just created another table (above) and set the bottom margin to 0
and came flush with the bottom table.

I am curious as to why I only had to change the margin of the bottom
of top table and not also the top of the bottom table (phew). I would
have thought I would have to set them both to 0px.
Click to expand...


If you want the CSS background image, you have two choices:

1. Conform image to table
2. Conform table to image

Making the image bigger is the first option and it is fine. In general,
you only have to do it once, so it is not a bad solution.

I am not sure about the transparency issue. I would have to see the page
to give you better insight. But, as it is now working, you have it
solved. ;-)

Peace and Grace,
Greg


--
Vote for Miranda's Christmas Story
http://tinyurl.com/mirandabelieve

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
Back
Top