2011-08-09 9 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="430" align="center" cellpadding="0" cellspacing="0" title="Join us!">

実施例に

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

http://jsfiddle.net/GuuLs/

あなたは、あなた600PXする幅を望んでいた場合あなたの中間の幅を変更する必要がありますtd (現在の410)を570に変更してください。

+0

で角を丸めることを保証します。問題を解決しました。あなたは単に輝かしいです:) –

3

コードの束を叩かずにCSS3の丸みのあるコーナーを組み込んでみてください。ちょうどGoogle検索を試してみてください!

2

中間のセルは570幅でなければなりません。これは問題を解決します。 しかし、私はこの方法でこの問題に取り組まないでしょう。 代わりに私はちょうどtop right, bottom right, top left, bottom leftに背景画像を設定するためにCSSを使用します。

関連する問題