table corners

[tysdal]

i am trying to format a table so that it looks like the upper left hand corner (http://tyspark.web1000.com/images/corner1.jpg) and the lower right hand corner (http://tyspark.web1000.com/images/cornerbottom.jpg) make the table look neat.

my html code is:

<table class="exp">
<tr class="bg">
<td class="bg">
<img class="bg"src="images/corner1.jpg" alt="bg" hspace="0" vspace="0">
</td>
<td class="text">
Navigation
</td>
</tr>
<tr>
<td colspan="2">

<p>&nbsp; </p>
<p>&nbsp; </p>
<p>&nbsp; </p>
</td>
</tr>
</table>


and my CSS for the code is:

table.exp {
background-color: white;
border: none;
}

tr.bg {
border: none;
}
tr {
border: none;
}
td.bg {
border: none;
border-collapse: collapse;
}
td.text {
border-collapse: collapse;
border: 4px double black;
border-bottom: none;
border-left: none;
margin-left: -9px;

}
img #bg {
vertical-align: top;
}

img #bg1 {
}

td.links {
border: 0px 4px 0px 4px double black;
}


thank you

[x_goose_x]

firstoff your image had a space on top, which it can't have and the horizontal line was too thick. I've attached a fixed copy. Also for the table you need to set the cellspacing and cellpadding of the table to 0.

Note: I saved the file as a gif with a transparency, so you can easily change the background-color.

[tysdal]

it worked, i didnt even think of cellspacing/padding
:thumbsup: thanks a lot

[edit]
but i still do not understand why my CSS wasn't formatting correctly, was it because the elements were in a table? im not used to working with tables i usually use div tags so im not sure

[x_goose_x]

both corners