CODEWITHSUNDEEP
html
Helen Neely
Helen Neely

Reputation: 4740

Rounded Corners in HTML

I have this code and when it displays, there's a weird vertical line to the right side. I can't figure out what might be causing it. Any help would be appreciated.

enter image description here

Here's the full code that I'm using.

<html>
<head></head>
<body>

<table border="0" width="600" align="center" cellpadding="0" cellspacing="0" title="Join us!">
<tr bgcolor="#8cc63f" style="line-height: 0px">
<td width="15"><img src="topleft.jpg" width="15" height="15" alt=""></td>
<td width="410" style="font-size: .2em">&nbsp;</td>
<td width="15"><img src="righttop.jpg" width="15" height="15" alt=""></td>
</tr>

<tr bgcolor="#8cc63f">
<td width="15" style="font-size: 1px">&nbsp;</td>
<td width="410" bgcolor="#8cc63f" align="center" style="color: white; font-size: 16px">
<span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;">
    <a href="http://www.google.com"><br> We have spacious and modern training rooms. <br><br></span></td>
<td width="15" style="font-size: 1px;">&nbsp;</td>

</tr>
<tr bgcolor="#8cc63f" style="line-height: 0px">
<td width="15" height="15"><img src="buttomleft.jpg" width="15" height="15" alt=""></td>
<td width="410" style="font-size: 0px;" height="15"></td>

<td width="15" height="15"><img src="buttomright.jpg" width="15" height="15" alt=""></td></tr>
</table>
</body>
</html>

Upvotes: 3

Views: 377

Answers (3)

Ali
Ali

Reputation: 12674

The middle cell should be 570 width, that will solve the problem. However I would not tackle this problem in this way. Instead I would just use css to set background images to top right, bottom right, top left, bottom left.

Upvotes: 2

Parijat Kalia
Parijat Kalia

Reputation: 5085

You might want to look at incorporating CSS3 rounded corners without having to bang in a bunch of codes. Just try a google search on it!

Upvotes: 3

Robert
Robert

Reputation: 8767

It's due to your widths being off.

Change:

<table border="0" width="600" align="center" cellpadding="0" cellspacing="0" title="Join us!">

to

<table border="0" width="430" align="center" cellpadding="0" cellspacing="0" title="Join us!">

Working example at (minus the corner graphics): http://jsfiddle.net/GuuLs/

If you wanted the width to be 600px then you would need to modify the width of your middle td (currently 410) to 570.

Upvotes: 2

Related Questions