- ベストアンサー
FireFoxで見るとブラウザの幅によってテーブルの枠線が消える
FireFoxで表示するときにブラウザの幅によったり出たり消えたりします（上と左の線）。 柔軟に変化できるように結構苦労して書いたのですが、ここに来て挫折しそうです、どなたか解決策を下さい。 赤の枠線です。 ソースの↓確かこのあたりが消えたり出たりします <!--▼中右全体枠-->色#990000 文字数オーバーなため.txtと.htmlのURLを txt http://tubamesound.uijin.com/index.txt html http://tubamesound.uijin.com/index.html よろしくお願いします。
- idhokanohi
- お礼率58% (48/82)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<!--▼インフォメーションボ－ド--> <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は指定できない。） あたりは今のうちに文法チェッカーにかけてコードをよく見直して、エラーを正しておく事をお奨めします。コンテンツが沢山入ってしまってからではますます修正がややこしいことになると思いますので。
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
すみません、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;">
お礼
ありがとうございます、 確かに99％の指定に変えてみたところ上手く動作いたしました。 あなたは神か。本当に、ありがとうございます。 p.s.windows標準のメモ帳で作るのやめようかと思います。
- auty
- ベストアンサー率58% (284/486)
<table width="100%" height="100%" cellspacing="0" cellpadding="0" style="border: solid 1px #000099; border-collapse: collapse;"> <!--▼上段タイトルバー--> の border-collapse: collapse; を消してみてください。
お礼
回答ありがとうございます。 border-collapse:collapse;を消してしまいますと、枠線の幅が2pxになってしまうため、消さない方向でどうにかなりませんでしょうか。 また、tableの背景色を指定して、tdの背景色を＃FFFFFFのような方法も避けたいのです。 引き続きよろしくお願いいたします。
補足
・テーブルのセルの開始タグと閉じタグが合っていない（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は指定できない。 知らなかったです、勉強不足ですね申し訳ないです。