2011-08-09 56 views
3

我有這段代碼,當它顯示時,右邊有一條奇怪的垂直線。我無法弄清楚可能是什麼原因造成的。任何幫助,將不勝感激。HTML中的圓角

enter image description here

下面是我使用的全部代碼。

<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> 
+0

所以你正在使用圖像給圓角的外觀? –

+0

是的。如果您知道解決方案或更好的方法,請讓我知道 –

+1

http://css3generator.com/>邊框半徑 – Im0rtality

回答

2

這是由於您的寬度被關閉。

變化:

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

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

工作例如在(減去角落圖形):http://jsfiddle.net/GuuLs/

如果你想要的寬度爲600px的,那麼你將需要修改您的中間寬度td (目前爲410)至570.

+0

謝謝,解決了這個問題。你簡直太棒了:) –

3

您可能想要考慮整合CSS3圓角而不必在一堆代碼中敲擊。只要嘗試谷歌搜索就可以了!

2

中間的單元格應該是570寬度,這將解決問題。 但是我不會以這種方式解決這個問題。 相反,我只是使用CSS來設置背景圖像top right, bottom right, top left, bottom left