こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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">テスト1</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個ほど繰り返す。

投稿日時 - 2011-01-23 17:10:34

QNo.6469179

すぐに回答ほしいです

質問者が選んだベストアンサー

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

実際のソースや環境をみればすぐにわかりそうですが、
マイナスマージンや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
>なのですが、これは関係ありますか?

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

投稿日時 - 2011-01-24 22:44:59

お礼

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

投稿日時 - 2011-01-29 03:25:30

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

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

大きなポイントとしては、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;
}

投稿日時 - 2011-01-23 17:52:57

補足

有難うございます。
@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
なのですが、これは関係ありますか?

投稿日時 - 2011-01-23 19:42:34

お礼

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

投稿日時 - 2011-02-24 11:41:38

あなたにオススメの質問