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

解決済みの質問

CSS、Winで問題なく表示されるものがMacで不具合が

CSS初心者です。

左側にコンテンツの一覧(メニュー)を縦に表示させ、残りの右側の部分に内容を表示させるページを作っています。
(HTMLの「フレーム」を想像していただけると近いと思います)

当然メインコンテンツとメニューの文章量は違い、メニューの方が少ないのですが、Macの場合その2列の長さ(高さ)が変わってしまうのが困っています。
(文章量に合わせて四角で囲われてしまい、隣のメインコンテンツと四角の長さが揃わない)

参考にしている本を見ると、メニュー部分の高さに関係なくコンテンツ全体の高さで表示される、という注釈があるのですが、Winでは問題なくてもMacではうまくいっていません。

現在完成の期限が迫っていて、非常に困っています。
解決方法、どなたか思い当たることはありますでしょうか。

投稿日時 - 2005-09-11 18:15:27

QNo.1642523

すぐに回答ほしいです

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

質問内容の確認ですが、side部分の背景が全体のコンテンツの高さに達しなくて途切れて見えるということでよいのでしょうか。質問の内容をとりちがえてなければよいのですが…。

.sideにposition:absolute;を追加、clear:both;で以下のように回り込みの設定。それとcontentsの幅の指定は必要かなと思います。
あとCSSは装飾用とレイアウト用の2つに分けておくと後で修正が楽です。

<BODY>
<div class="contents"><div class="side">sideの内容・・・</div>
<div class="main">mainの内容・・・</div>
<div style="clear:both;"></div>
</div>
</BODY>

投稿日時 - 2005-09-13 04:46:29

補足

>質問内容の確認ですが、side部分の背景が全体のコンテンツの高さに達しなくて途切れて見えるということでよいのでしょうか。

そうです、まさにその通りです。ありがとうございます。
.side部分はこのように変更してみました。

.side {
width: 180px;
margin-left: 10px;
position:absolute;
}

そして<BODY>部分にご指示のとおり、<div style="clear:both;"></div>を書き足すと…うまくいきました!!

ただ、CSSファイルは「ページの基本のデザイン部分」「ページレイアウト用部分」がそれぞれ独立した2つのファイルとなっており、HTMLを記述しているものと別になっています。

ご回答はHTMLファイルの<BODY></BODY>の間にclear:both;を書き込む形のようですが、実際はCSSファイルが分割されているので、その場合はもしかしてCSSファイルにclear:both;を書き込むのでしょうか。(何となくこの手の設定は、CSSファイルで一括して行うもののような気がしたので)

大変お手数ですが、この推量が正しい場合、CSSファイルのどこにclear:both;を入れればいいのか、ご教示いただけますでしょうか。
自分でも何カ所かためしに入れてみたのですが、いずれもうまくいかず、力尽きました。

すみません、現在はさほど急いでおりませんので、何卒よろしくお願いいたします…

投稿日時 - 2005-09-15 01:57:09

ANo.3

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

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

回答(4)

ANo.4

body内に<div style="clear:both;"></div>を書き足すということは、<div>で具体的に領域を指定するということです。
ですので特定のクラスに書き足せばよいわけではありません。

投稿日時 - 2005-09-15 14:26:52

お礼

なるほど、了解です。

何から何まで教えていただき、本当に感謝しております。
まだまだ初心者ですが、これから頑張ります。
ありがとうございました。

投稿日時 - 2005-09-18 16:38:09

ANo.2

IE7はCSSへの正確な対応が謳われている事実。
つまり、現状のIE6ではCSSの異常な処理が珍しくない。

このため、Windowsでしか使えないIEに特化した
ウェブデザインが横行している。
共通規格であることが最重要であるHTML文書において
一方的にIEが避難されるべき立場にある。

この問題の複雑さは、Mac版のIEは、Windows版とは
まったく別に作成され、まともなCSS処理を備えていることにもある。

そのため、同じIEを使ってもWindowsとMacで表示が食い違う。
いわんや、MOZILLA(Firefox)やOPERAなどの
CSS準拠を謳うウェブブラウザーとの食い違い。

ひとつの解は、ウェブブラウザーを判断して
別々のHTMLファイルやCSSファイルを送信する方法。

もうひとつは、なんとか共存できるCSS表現を模索する方法。

対策に詳しい書籍やウェブサイトもあるとは思いますが

今の時期であれば、来年のIE7への対応に不安がありますから
CSS準拠を重視して、Mozilla FirefoxやOPERAの
Mac版とWindows版を基準に作成し

IE6で問題が出る部分に対策を組み込むのが
今の時期の良い選択肢では無いかと思います。

もっとも、こっちはIEが動くようなOSは無いので
どのくらい、IE6がCSSに弱いのかは知りません。

なお、旧世紀に設計されたIEの弱みのひとつにタブブラウズがあります。
IEコンポーネントを用いたSlipenir等でも利用され
タブブラウジング人口は、非常に高くなっています。
(もちろんIE7にも盛りこまれます)

用途によっては、ウェブサイトのデザインに
タブブラウジングを想定する必要もあると思います。

たとえば、同じ質問掲示板のOKWebと教えてねっとでも
タブブラウズに向かない後者は、時として不便。

投稿日時 - 2005-09-11 19:41:46

お礼

今回は、どうやら私の記述ミスが原因だったようです。
ですが、Winユーザーのみのサービスが横行しているのもまた事実で。
少数派はどうしても切りすてられる運命にあるようで、辛いものがありますね…
ご回答ありがとうございました。

投稿日時 - 2005-09-21 12:26:59

ANo.1

>参考にしている本を見ると、メニュー部分の高さに関係なくコンテンツ全体の高さで表示される、という注釈がある

参考にされている本の検証ブラウザのバージョンはどうなっていますか?

チェックされている環境のMacOSとブラウザの種類および詳細なバージョンを明記して下さい。バージョンによっては無理なことをやろうとしている可能性もあります。
問題なければCSSの内容も補足してもらえるとよいです。

投稿日時 - 2005-09-11 19:32:12

補足

書き込みどうもありがとうございます。

本の検証環境は、バージョンは書いていないのですが、2005年3月現在のものだそうです。

MacOSは10.3.8、ブラウザはSAFARIの最新版です。
なおMacですとIE・ネスケ(記憶が定かでないですが、どちらも最新版かそれに近いはずです)でも同じ現象がおきます。

CSSはそのまま載せるのはまずそうなので、もう少しお待ち下さい。

投稿日時 - 2005-09-12 12:19:48

お礼

遅くなりました。CSSはこのような感じです。

■ページの基本のデザイン部分
body {
color: #666666;
font-family: "MS Pゴシック", Osaka,sans-serif;
background-color: #FFF7EE;
text-align: center;
}
h1{
font-family: "MS Pゴシック", Osaka,sans-serif;
font-size: 350%;
margin: 0px;
text-align: center;
}
(中略)
h3 {
font-family: "MS Pゴシック", Osaka,sans-serif;
color: #666666;
font-size: 125%;
margin:1em 10px;
background-color: #FFF7EE;
border-top:double 3px #FF99cc;
border-bottom:double 3px #FF99cc;
text-align: left;
clear:both;
}
p {
font-family: "MS Pゴシック", Osaka,sans-serif;
font-size: 90%;
line-height: 150%;
margin-right:15px;
margin-left:15px;
}
p img {
float: left;
margin-right:5px;
border: solid 1px #666666;
}
a {
color: #666666;
text-decoration: none;
font-weight: bold;
}
h1 a {
color: #FF99CC;
line-height: 150%;
}
.side h2 {
font-family: "MS Pゴシック", Osaka,sans-serif;
font-size: 150%;
text-align: left;
margin:0px;
}
.side ul {
font-size: 80%;
margin-top: 0px;
}
.contents {
background-color: #FFFFFF;
border: solid 1px #CCCCCC;
width: 750px;
margin:auto;
text-align: left;
}

■ページレイアウト用部分
.main {
width: 550px;
float:right;
padding-right: 0px;
background-color: #FFFFFF;
background-image: url(back.jpg);
background-repeat: no-repeat;
background-position: right top;

}
.side {
width: 180px;
margin-left: 10px;
}
.contents {
background-image: url(side.gif);
}

投稿日時 - 2005-09-13 00:56:42

あなたにオススメの質問