- ベストアンサー
CSS背景が表示されず、IEでflotが適用されない
- dlタグで3×3のカラムで表示を行いたいのですが上手くいかず困っています。
- IE6ではfloat:left;が適用されず縦並びになってしまいます。
- 背景には何故表示の理由等も含めて、どなたかお分かりの方がいらっしゃいましたらよろしくお願い致します。
- matsuch
- お礼率77% (56/72)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
IE6でdlにfloatが適用されなかった理由は分かりません。 IE7ではローカルでもサーバーでも適用されました。 文字化けもありませんが、どのような状態だったので しょうか？ 背景画像についてですが、ブラウザ(IEやFirefox)の画面 を最大化しても表示されませんか？ こちらではIE7、Firefox2および3で表示されます。 どのように表示させたいのか分かりませんが、3カラム にし、各ボックス間に背景画像が表示されるように したいのでしたら、次のようにしてみてください。 #top_box{ width:800px; height:400px; background-color:#ffffff; } ↓ #top_box{ width:800px; height:400px; } #top_boxから削除したbackground-color:#ffffff;をdlへ dl{ (略) border-color:#ffffff; background-color:#ffffff; } ※関係ありませんが、ボーダーの色が背景色と同じ 指定なので、このままでは線が見えません。 どちらかの色を変更してください。 <dl><dt><dd>についてですが、これらのタグは通常 <dl>の中に<dt>と<dd>を一組みにして使用します。 ※<dt>と<dd>が対になっていれば、<dl>の中に何 セット入れても大丈夫です。 これらが本来用語を説明するためのタグだからだと 思います。 http://www.tohoho-web.com/html/dl.htm できれば<dl>の代わりに<div>、<dt>の代わりに<h1> ～<h5>のいずれか、<dd>の代わりに<p>を使用した方 が良いのではないかと思います。 ※<div>や<p>にまだ指定されていないclassまたはid を指定して、スタイルシートを適用させてください。 このまま<dl>等を使う場合、以下の間違いがあります。 1.<dt>の閉じタグが</dd>になっています。 ※今の所、特に影響はないようです。 2.<dt>に対して<dd>が2つある。(この為、Firefoxで 文字が重なって表示されます。) 関係ありませんが、dlに背景色を指定する場合、次の 背景色の指定は必要ありません。 dd.comment{ height:3.0em; background-color:#ffffff; } ※このボックスを違う色で表示したい場合は、この まま残して色を変更します。 これも関係ありませんが、次のような間違いがあります。 <link href="index.css" rel="stylesheet" type="text/css" /> タグの後ろが「 />」でXHTMLの記述になっています。 HTMLの場合は次のように書きます。 <link href="index.css" rel="stylesheet" type="text/css"> とりあえず上記を確認してみてください。
その他の回答 (2)
- koma30007
- ベストアンサー率87% (173/198)
問題なく表示されるようになったということで 良かったです。 >表組は<dl>で行うのがスタンダードのなのだと思いかけてました。。 W3Cの仕様に拘りすぎなくても良いと思いますが、 表は<table>、段組(カラム)などのレイアウトは、 なるべく<div>で行う方が良いと思います。 ただ、内側の枠(ボックス)には、<dl>を使用しても かまわないと思います。 私も用語定義以外の用途で、リンクページに使用して います。(サイト名とその説明・・・) 他には日記などに使用する場合もあるみたいですね。 以下の部分(2箇所)に関して、一部間違いがありました ので訂正します。ｍ(＿＿;)ｍ 『<dl><dt><dd>についてですが、これらのタグは通常 <dl>の中に<dt>と<dd>を一組みにして使用します。 ※<dt>と<dd>が対になっていれば、<dl>の中に何 セット入れても大丈夫です。』 『2.<dt>に対して<dd>が2つある。(この為、Firefoxで 文字が重なって表示されます。)』 <dt>に対して<dd>が複数あっても、その逆でも大丈夫 なようです。 http://www.marguerite.jp/Nihongo/WWW/RefHTML/dd.html 問題の原因は、スタイルシートで「dd.comment」と 「dd.date」に「height:3.0em;」が指定されていた ことでした。 (※高さが足りないため、文字が重なっていた。) では、どうも失礼しました。
お礼
ご説明下さいましてありがとうございます。
- koma30007
- ベストアンサー率87% (173/198)
一部訂正します。ｍ(＿＿;)ｍ 3×3のカラム表示ということですので、<dl><dt><dd>の 替わりにそれぞれ<div>、<h1>～<h5>のいずれか、<p>を 使用して、<h1>～<h5>と<p>に#top_boxから削除した 「background-color:#ffffff;」を指定してください。 次の部分は無視してください。 ここから #top_boxから削除したbackground-color:#ffffff;をdlへ dl{ (略) border-color:#ffffff; background-color:#ffffff; } ここまで ※ボーダーの色に関しては、<h1>～<h5>、<p>に指定 する背景色とは違う色を指定すると良いです。
お礼
大変詳細にご説明下さいましてありがとうございます。 問題なく表示されるようになりました。 />の記述についても今後きちんと記述するようにします。
お礼
お返事が遅くなりすみません。 表組は<dl>で行うのがスタンダードのなのだと思いかけてました。。