firefoxのみテーブルのborderが消える

質問

firefoxのみテーブルの上下のborderの一部が消えてしまいます。
ウィンドウのサイズを変えると消える位置が変わります。
消えないための方法はありますか？

【CSS】
table.aaa{
width:750px;
border-top:1px solid #333;
border-bottom:1px solid #333;
border-collapse:separate;
border-spacing:0;
text-align:center;
margin-top:30px;
}

td.bbb, td.ccc{
padding:30px 30px;
}

td.ccc{
width:100px;
background:#000;
color:#fff;
}

ul{
width:750px;
margin-left: -23px;
overflow:hidden;
}

ul li {
display: inline;
width: 200px;
margin-left: 30px;
float: left;
}

ul li img {
display: block;
border: 1px solid #555;
}

【HTML】
<table class="aaa">
<tr>
<td class="ccc">テスト１</td>
<td class="bbb">※※※※※※※※※※</td>
</tr>
</table>
<ul>
<li><a href="xxx.html#w1"><img src="sample.jpg" width="200" height="150" ></li>
<li><a href="xxx.html#w2"><img src="sample.jpg" width="200" height="150" ></li>
<li><a href="xxx.html#w3"><img src="sample.jpg" width="200" height="150" ></li>
</ul>
<ul>
<li><a href="xxx.html#w4"><img src="sample.jpg" width="200" height="150" ></li>
</ul>

<table～…～</ul>まで10個ほど繰り返す。

回答No.2

kuzumiHK · ベストアンサー

試しに、質問で提示されたソースもボーダーは切れますか？

実際のソースや環境をみればすぐにわかりそうですが、
マイナスマージンやtable-layout:fixedやvisibility:hidden、インライン要素の重なりによるものなど、
ボーダーが消える事象の原因は考えられる可能性が多くあります。

＞----------------------
＞td.bbb, td.ccc{
＞padding:30px;
＞}
＞↓↓変更↓↓
＞td.bbb, td.ccc{
＞padding:30px;
＞margin:auto;
＞}
＞----------------------

tdはmarginは必要ないです。

＞ul li img {
＞border:1px solid #555;
＞margin: auto;
＞padding: auto;
＞}
----------------------

＞このような感じで、ということでしょうか？

imgはサイズ通りか無指定でよさそうです。
インラインですしね。

margin、paddingが必須なのは主にブロック要素です。

＞あと、
＞html→UTF8
＞css→Shift_JIS
＞なのですが、これは関係ありますか？

ボーダーに関係あるかどうかはわかりませんが、
統一するほうがいいと思います。
メタだけでなくファイルの保存エンコードも変更が必要です。

お礼

試しにやってみます。
有難うございました。

回答No.1

kuzumiHK

ボーダーが切れる事象は確認できませんでしたが、
スタイルが不安定なので下記のようにしたほうがよいかもしれません。

大きなポイントとしては、margin、paddingがブラウザごとにデフォルト値が違うため、
最初に全タグに対してアスタリスクを使って値を0にするか、
全てのスタイルに対して、margin、paddingを必ず指定するかです。
これを怠ると、ブラウザによっては余白が大きいという現象が起こりますので。

ご質問の部分ですが、tableをコラップスに変更してみました。
このことにより、ボーダーがほかの要素のボーダーの影にならないんじゃないかということで。。

*{
margin:0;
padding:0;
}

table.aaa{
width:750px;
border-top:1px solid #333;
border-bottom:1px solid #333;
border-collapse:collapse;
text-align:center;
margin:30px 0 0;
padding:0;
}

td.bbb, td.ccc{
padding:30px;
}

td.ccc{
width:100px;
background:#000;
color:#fff;
}

ul{
clear:both;
float:left;
width:750px;
margin:0;
padding:16px;
list-style:none;
}

ul li {
float:left;
width:200px;
margin:0;
padding:0 0 0 30px;
}

ul li img {
border:1px solid #555;
}

お礼

ありがとうございました。

補足

有難うございます。
@charset "Shift_JIS";
@import url("a.css");
この下に
*{
margin: 0;
padding: 0;
}
を追加した結果ですが、
marginやpaddingを設定していないヶ所は
直さずに確認しました。
表示されるborderが消える問題は改善されませんでした。

もう一つ教えて頂いた、
全てのスタイルに対して、margin、paddingを必ず指定する
というのは、
----------------------
td.bbb, td.ccc{
padding:30px;
}
↓↓変更↓↓
td.bbb, td.ccc{
padding:30px;
margin:auto;
}
----------------------
ul{
clear:both;
float:left;
width:750px;
margin:0;
padding:16px;
list-style:none;
}

ul li {
float:left;
width:200px;
margin:0;
padding:0 0 0 30px;
}

ul li img {
border:1px solid #555;
}

↓↓変更↓↓

ul{
clear:both;
float:left;
width:750px;
margin:0;
padding:16px;
list-style:none;
}

ul li {
float:left;
width:200px;
margin:0;
padding:0 0 0 30px;
}

ul li img {
border:1px solid #555;
margin: auto;
padding: auto;
}
----------------------

このような感じで、ということでしょうか？

あと、
html→UTF8
css→Shift_JIS
なのですが、これは関係ありますか？