CODEWITHSUNDEEP
htmlcss
anon
anon

Reputation: 1117

rounded corner with html table

I have the following HTML for a table to make a rounded corner box. 

<div class="tipHolder" >
<table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">

<tr>
<td><img src="png\tile_top_left.png" style="float: right;" ></td>
<td id="tipTop"><!-- Blank top section --></td>
<td ><img src="png\tile_top_right.png" ></td>
</tr>

<tr>
<td id="tipLeft"><!-- Blank left section --></td>
<td>
<!--###################
Enter your content here
################### -->

rgergergfthrthrthr
</td>
<td id="tipRight"><!--Blank right section --></td>
</tr>

<tr>
<td ><img src="png\tile_bottom_left.png" style="float: right;"  ></td>
<td id="tipBottom"><!--Blank bottom section --></td>
<td ><img src="png\tile_bottom_right.png" ></td>
</tr>

</table>
</div>
</body>
</html>

with this CSS

#tipTop {
    background-image:url('tile_top.png');
    background-repeat:repeat-x;

}
#tipLeft {
    background-image:url('tile_left.png');
    background-repeat:repeat-y; 
    background-position:right;
}
#tipRight{
    background-image:url('tile_right.png');
    background-repeat:repeat-y;  
}
#tipBottom {
    background-image:url('tile_bottom.png');
    background-repeat:repeat-x;  
}

Currently I am giving the corner images in the HTML itself but the side images from the CSS and this works fine. I want to move the corner images to the CSS as well but when I convert any two table corner cells to divs the column or row disappear. for example if I do top right and bottom right corner the right coulmn disappears. Top left and Top Right, the top row disappears...

Upvotes: 0

Views: 1059

Answers (1)

Marc B
Marc B

Reputation: 360762

Table cells with no content collapse down to the minimum. You'd need to set fixed-sizes via CSS, and possibly even put a blank character into the cell to force it to stay open:

<td id="topleft">&nbsp;</td>

#topleft {
    background: ...;
    width: 15px;
    height: 15px;
}

Background images don't affect the sizing of an element, so you need to force the element to have some size before the background will become visible.

Upvotes: 1

Related Questions