requireでtextデータを読み込んだら、cssのクラスセレクタが無視されているみたいです。

質問

バンドをしていて、そのホームページを作成していたのですが、どうしても分からない部分が出てきたので、ご教授お願いします。

ホームページについては、上にヘッダー、左右にfloatで回り込み、真ん中にはmarginを設定してメインコンテンツ、clear:both;でフッター、という感じで表示しています。

そして、右のカラムは全ページ共有なので、PHPのrequireを使って、テキストファイルを読みとらせています。

今までブラウザはsleipnirを使ってきたので正しく表示されていたのですが、ブラウザをGoogle chromeに変更したところ、レイアウトが崩れてしまいました。

requireで読み込んだ部分のクラスセレクタで指定されたcssが反映されていないように感じます。
ＩＥで確認した分には問題なかったのですが、それ以外のブラウザでは反映されていないという感じです。

ちなみに
main.cssファイル
.koushin{
height:100px;
width:140px;
overflow-x:hidden;
overflow-y:scroll;
font-size:10px;
line-height: 12px;
padding: 5px;
scrollbar-face-color: #ffffff;
scrollbar-3dlight-color: #cccccc;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #cccccc;
scrollbar-arrow-color: #cccccc;
scrollbar-track-color: #ffffff;
}
right.txt（このテキストをrequireで読み込む）
<div class="koushin">
更新情報～～～～～
</div>
として、更新情報のoverflowをscrollにしたいのですが…。

・直接HTMLファイルに書き込んでいるメインコンテンツはスクロールになっている
・ＩＥではきちんと表示される
ので、コーディングのミスではなさそうな気がします。

・ＩＥのレイアウトは崩さない。
・共用部分は更新が大変なので、読み込ませたい。
・overflowをscrollにしたい。
です。

よろしければご回答お願いします。

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.6

umioyo · ベストアンサー

では一度原点に戻ってCSSの問題なのかPHPの問題かはっきりさせてはどうでしょう。
requireさせないでright.txtの中身を直接HTMLに記述させたらどういう結果になるでしょうか。
ヒマになってからで結構ですが・・・

お礼

お礼が遅くなってしまい申し訳ございません。

先ほど確認した結果、CSSの問題だったことがはっきりしました。
完全に自分の知識不足が問題だったみたいです。

貴重なお時間を沢山取らせてしまい、申し訳ありませんでした。
頑張って勉強して直してみることにします。

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

回答No.5

umioyo

ええと、やはり一番はどのように崩れているか回答する方がわからないので、（gooの方針により）URLで示せないのであれば画像なりで見せてもらったほうがより解決にちかい回答が得られるのではないかと思います。

というかどーなんですか。echoなりで出力してるんでしょうか？
right.txtの中身が
print <<<EOM
<div class="koushin">
更新情報～～～～～
</div>
EOM;
のようになっていればいいんじゃないかと思うのですがいかがでしょうか。

放置は個人的には構わないと思います。
後で結果がどうなったのか気になるので、教えて欲しいですｗ

お礼

echoなりprintなりしてまいませんでした。まさか読み飛ばしちゃうとは…。すみません。

右のカラムに入れていたHTMLをそのままコピーして、right.txtを作っているだけになっています。
そこが問題なのでしょうか…。
ちょっと修正してみます。

自分は完全な素人でして、まともな情報は得られないと思いますよ^^;

回答No.4

umioyo

しつこくすいません。
requireしたデータが画面にHTMLタグとして出力されていない可能性を考えてみました。
right.txtをrequireしたあとどうしているのか実際のところがわかりませんが、echoなりprintなりされているのでしょうか。
「更新情報～～～～～」だけをrequireして、「<div class="koushin">」と「</div>」はもとのHTMLに記述してはどうでしょうか。

お礼

何度もご回答ありがとうございます。
初めて利用させて戴いたのでＣＳＳを見つけることが出来ませんでした…。すみません。

解決する方法としてはやっぱりそれしかないですかね…。
趣味でやっているので、複数個にわたったページを編集のが大変なので別の方法を探していました。

No.1の方の指摘とも合わせて編集してみようかと思います。
このたびは回答ありがとうございます。

あと、他にもrequireでクラスセレクタを普通に利用出来ている方などの意見も聴きたいと思うのと、数日忙しく編集がすぐに出来そうにないので、回答は締め切らずに放置させて戴いてもよろしいでしょうか？
やっぱりマナーとして問題ありますか…？

回答No.3

umioyo

あ、すいません。
ちゃんと読んでませんでしたがIEは問題ないんですね。。。
失礼しました

お礼

追記などが見つけられなかったので、こちらに失礼します。

前の回答にお礼を付けた後にright.txtをright.phpに変更して試してみたのですが、上手く行きませんでした。

right.txtをright.phpとして
<?php
print <<<EOM
<!--更新履歴-->
<h3>更新履歴</h3>
<div class="koushin">
更新情報～～
</div>
EOM;
?>

index.htmlの中身は
<?php
require('right.php');
?>

.htaccessの中身は
irectoryIndex index.html index.php .ht
Action myphp-script /php.cgi
AddHandler myphp-script .php .html
としています。

あと、画像を上げようと思ったのですが、１度削除してしまったら次に投稿出来ませんでした。
申し訳ないです。

回答No.2

umioyo

IEのバージョンおよびどのように崩れているかがわからないので正確にわかりませんが、特にIE6に関してはwidth&paddingの解釈がおかしかったり、floatさせたクラスにmarginを割り当てるとmarginが2倍になるなどのバグ・・・というか解釈の違いが多くあります。
おそらく崩れるのは、左と右のfloatさせたボックスの幅がwrappingさせている外枠の幅を超えているのでいわゆる段落ちしてしまっている状態ではないかと思います。
見た目でkoushinクラスに問題があるようであれば、そうなのかもしれませんが、メインコンテンツ部分の余白にも注意されると良いかと思います。

具体的には、メインコンテンツと、koushinクラスにbackgroundを指定（別な色で）すると、それぞれの領域がどこまできているか確認できるかと思います。
その状態で、IE6,7,8,GoogleChromeなどで比較してみてください。

PHPではなくCSSで相談されたほうが回答が速かったでしょうね^^;

参考URL：

http://adp.daa.jp/archives/000265.html

回答No.1

grumpy_the_dwarf

overflow-xとかoverflow-yってのがそもそもIE独自の方言なので、
基準に従うブラウザでは解釈されません。overflowを使います。
scrollbar-ホニャララも全部IE独自方言ですね。

お礼

回答ありがとうございます。

ただ、メインコンテンツ部分でもoverflow-xとoverflow-yで指定しているのですが、Google Chromeでもきちんと表示されていたので、そこが原因ではないと思います。
scrollbar-についても、きちんとＩＥだけに定義しておくことにします。
ありがとうございます。