FireFoxで表示するときにブラウザの幅によったり出たり消えたりします（上と左の線）。柔軟に変化できるように結構苦労して書いたのですが、ここに来て挫折しそうです、どなたか解決策を下さい。赤の枠線です。ソースの↓確かこのあたりが消えたり出たりします色#990000 文字数オーバーなため.txtと.htmlのURLを txt http://tubamesound.uijin.com/index.txt html http://tubamesound.uijin.com/index.html よろしくお願いします。

すみません、ANo.2にコピペのミスがありましたので訂正します。【誤】 ↓ 【正】

FireFoxで見るとブラウザの幅によってテーブルの枠線が消える

解決済

質問者：idhokanohi
質問日時：2008/04/26 02:03
回答数：3件

FireFoxで表示するときにブラウザの幅によったり出たり消えたりします（上と左の線）。
柔軟に変化できるように結構苦労して書いたのですが、ここに来て挫折しそうです、どなたか解決策を下さい。
赤の枠線です。
ソースの↓確かこのあたりが消えたり出たりします
色#990000

文字数オーバーなため.txtと.htmlのURLを
txt
http://tubamesound.uijin.com/index.txt

html
http://tubamesound.uijin.com/index.html

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： abril
回答日時：2008/04/28 13:13

<table width="100%" height="100%" cellspacing="0" cellpadding="0" style="border:solid 1px #000099;">

上記のテーブルの、widthとheightを100%より少ない値にすれば、ウィンドウサイズを拡大・縮小してもこの赤枠の線は消えない様になります。
例えば、width="99%" height="99%" とするだけでも解消はされました。

原因は、高さの相対関係の計算が親子で矛盾してしまっているからでしょう。IEはとにかく何かと”緩い”ので適当に表示してしまうのですが、Firefox等はシビアな結果を返してきますのでIEで何となく上手く行く様にという作成の仕方はできるだけ避けて、きちんと構造とスタイルにエラーや矛盾がないかを確認しながら構築して行く方が宜しいでしょう。

ただし、このHTML（http://tubamesound.uijin.com/index.html）にはかなり文法上の間違いが多いです。文法チェッカーにかけると、致命的エラーが20個ぐらい列挙されてしまいます。
中でも、

・テーブルのセルの開始タグと閉じタグが合っていない（Line84～137にかけて数カ所）。
・同一タグ内でSTYLE属性の指定が重複している（<td width="1%" height="1%" style="border:solid 1px #000099;" style="border:solid 1px #000099;">）。
・このDTD宣言（<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">）では記述できない空要素タグの閉じ方をしている（<link rel="stylesheet" type="text/css" href="http://img.shinobi.jp/tadaima/tdftad.css" />）。
・属性値の書き方が正しくない（<img>のwidthやheightを"130px""50px"という様に記述している。pxは指定できない。）

あたりは今のうちに文法チェッカーにかけてコードをよく見直して、エラーを正しておく事をお奨めします。コンテンツが沢山入ってしまってからではますます修正がややこしいことになると思いますので。

この回答への補足

・テーブルのセルの開始タグと閉じタグが合っていない（Line84～137にかけて数カ所）。

<body>～</body>を見ても一つも発見できなかったのですが、もしよろしければ具体的に教えていただけないでしょ・・・・あ。
<p>タグの閉じ忘れが一つだけありました。このせいでしょうか？
-----------------------------------------------------

・このDTD宣言（<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">）では記述できない空要素タグの閉じ方をしている（<link rel="stylesheet" type="text/css" href="http://img.shinobi.jp/tadaima/tdftad.css" />）。

こちらに関しましては広告の自動挿入のため仕方ないかな。
この宣言じゃないと擬似フレームのdivの高さを100%で指定するのが無理でしたので・・・。
--------------------------------------------
<img>のwidthやheightを"130px""50px"という様に記述している。pxは指定できない。

知らなかったです、勉強不足ですね申し訳ないです。

補足日時：2008/04/28 14:43

通報する

- 1
- 件

通報する

No.3

回答者： abril
回答日時：2008/04/28 14:36

すみません、ANo.2にコピペのミスがありましたので訂正します。

【誤】

<table width="100%" height="100%" cellspacing="0" cellpadding="0" style="border:solid 1px #000099;">
↓
【正】

<table width="100%" height="100%" cellspacing="0" cellpadding="10%" style="border:solid 1px #990000;">

- 1
- 件

通報する

この回答へのお礼

ありがとうございます、
確かに99％の指定に変えてみたところ上手く動作いたしました。
あなたは神か。本当に、ありがとうございます。

p.s.windows標準のメモ帳で作るのやめようかと思います。

通報する

お礼日時：2008/04/28 15:04

No.1

回答者： auty
回答日時：2008/04/26 04:55

<table width="100%" height="100%" cellspacing="0"

cellpadding="0"
style="border: solid 1px #000099; border-collapse: collapse;">


の
border-collapse: collapse;
を消してみてください。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
border-collapse:collapse;を消してしまいますと、枠線の幅が2pxになってしまうため、消さない方向でどうにかなりませんでしょうか。
また、tableの背景色を指定して、tdの背景色を＃FFFFFFのような方法も避けたいのです。
引き続きよろしくお願いいたします。

通報する

お礼日時：2008/04/26 15:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！