I’m currently building a website and I have been using tables forever. I feel like it’s time for me to move in div layouts but I am having a problem figuring out how to accurately display what I need using a div. The left and right images are rounded corner graphics and I am designing this for a mobile website so the buttons need to expand and contract dynamically. Any help would be greatly appreciated. Thanks in advance.
My current code:
[INDENT]<table width=“100%” border=“0” cellspacing=“0” cellpadding=“0” class=“btn” style=“background-color: #828b70;”>
<tr>
<td align=“right” width=“10”><img src=“images/btn_left.gif” alt=“” width=“10” height=“36” /></td>
<td height=“36” class=“buttontxt”><a href=“link.html”>link</a></td>
<td width=“40”><img src=“images/btn_right.gif” alt=“” width=“39” height=“36” /></td>
</tr>
</table>[/INDENT]
The CSS:
[INDENT]
.buttontxt {
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#85574c;
padding-left:15px;
background-image:url(images/btn_bkg.gif);
background-repeat:repeat-x;
}
table.btn td a{
display: block;
width:100%;
text-decoration: none;
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#85574c;
padding-top:6px;
padding-bottom:6px;
}
table.btn td a:link, table.navbar td a:visited {
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#85574c;
}
table.btn td a:hover, table.navbar td a:active {
font-size: 13px;
line-height:normal;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#85574c;
}[/INDENT]
A good place to start is with Sliding Doors. Although they’ve used the technique to created tab labels, it’s exactly the same principle for putting graphic rounded corners on any other box.
Of course, if you just want rounded corners and you haven’t got any kind of graphic/artwork on them, and if you’re not bothered about prehistoric versions of IE showing old-fashioned square corners, it’s much easier to use border-radius on a single block element.
Do you have a screenshot? Ideally, this can be cut down to just the link, but it depends on what type of border effect you need. At least if you want to support current browsers 
Hello.
Thank-you for your replies. Stevie D I looked into sliding doors and it seems it utilizes floats which I have been told to stay away from when designing a mobile website. Do you think that is accurate information?
C. Ankerstjerne, Here is a screenshot of one of the buttons.
OK then, the way I would do that would be, assuming you’ve got it set up as links within an unordered list (colours are approximate!):
ul#nav {background-color: rgb(27,52,12); padding:1px; width:10em;}
ul#nav li {line-height:2em; background-image:url(fade.png); background-color:rgb(250,240,210); margin:2px; border-radius:3px; list-style:none; padding-left:0.5em;}
ul#nav a {background-image:url(fade.png); background-position:90% 50%; background-repeat:no-repeat; color:rgb(200,30,30); display:block; text-decoration:none;}
Although, to be honest, for a mobile site I wouldn’t go anywhere near that complicated. I would leave the face off, and possibly the fade as well. When people are reading on their mobiles, by and large they want something simple and clear, without too many fancy graphics.