- ベストアンサー
XHTML+CSS で、ブラウザごとに表示が変わってしまう
quadsの回答
xml宣言によりIEでは過去モードで解釈され、かつIEのバグによる解釈が重なり、IEではご覧のような表示結果となります。 箇条書きで挙げてみると… ●height:100%の認識 ●text-inline:centerのブロック要素レベルへの適用 ●要素の上下余白が、余白を指定した要素の上下に何らかの要素が無い場合に無視される ●サイズ指定のフロート化されたボックスサイズまでも計算する ●ブロックサイズがborderの幅やpaddingまで含む。 いろいろありますが、眠いのでこの辺で（笑 で、眠いながらにもNNとFFあたりで同等の表示になるように作ってみました。 が、最適ではありません。ある程度同じように見せているだけなので、xml宣言ありXHTML1.1での作成をされるのであれば、もっと厳密なクロスブラウジングをするようにしてください。 また、meta情報などもきちんとした方がいいかもしれません。 XHTML1.1ということで考慮されているのであれば良いですが。 今回は次のソースで勘弁っ。 この投稿時に何らかのミスがあるかもしれませんが、その時はすみません…。 <body> <div id="wrapper"><div id="content"> <h1>The Website</h1> <hr /> <p class="nmt nmb">[ トップページ ] [ <a href="information/">情報</a> ] [ <a href="diary/">過去日記</a> ] [ <a href="links/">リンク集</a> ]</p> <hr class="mb" /> <div id="left"> <div class="subject p">更新履歴</div> </div> <div id="right"> <div class="subject nmb p">2005年8月15日 月曜日</div> <p class="nmt ml">テスト公開</p> </div> <div class="clear"> <div id="main"> <p> フロート部以降のブロック </p> </div> </div> </div></div> </body> </html> body { margin: 0px; padding: 0px; background: #9f9 url(../images/wall.gif); text-align: center; } #wrapper { width:700px; margin:0 auto; } #content { height:100%; padding: 20px 20px; background: #fff; text-align: left; } #left { float: left; width: 175px; border: 1px solid #696; font-size: 85%; } #right { float: right; width: 475px; border: 1px solid #696; } .clear { width:100%; clear:both; padding-top:20px; } #main { border: 1px solid #696; } h1 { margin-top:0; padding: 10px; border: 3px dashed #0c0; background: #cfc; } h2 { } h3 { } p, .p { line-height: 150%; font-size: 92%; } hr { border: solid #696; } .subject { font-weight: bold; border-left: 10px solid #0cc; padding-left: 5px; background: #cfc; } .b { font-weight: bold; } .nmt { margin-top: 0px; } .nmb { margin-bottom: 0px; } .nml { margin-left: 0px; } .nmr { margin-right: 0px; } .mt { margin-top: 20px; } .mb { margin-bottom: 20px; } .ml { margin-left: 15px; } .mr { margin-right: 20px; }
関連するQ&A
- XHTMLとCSSについて分かりやすい書籍を教えて下さい
XHTMLとCSSを使用して、世界標準のwebサイトを作成したいと思っています。 XHTMLとCSSに関しての書籍で、内容が良いものを教えていただけないでしょうか？ 私は一応、HTMLとCSSの基本的な知識はあります。 よろしくお願いします。
- ベストアンサー
- HTML
- XHTML＋CSSコーディングについて
個人のホームページを作成していますが、 SEOを考慮し、XHTML＋CSSでトップページのみ作成し、サブページはHTMLで作成しようと考えております。 トップページとサブページでXHTML＋CSSとHTMLとで違う構築の方法だとSEO上逆効果とかありますでしょうか？
- ベストアンサー
- HTML
- xhtml? css?
cssについて質問があります。 どこかのHPのソースを表示して、index.htmlと保存し、それを開くと上手く表示されません。 全部左に寄って、背景等も表示されません。文字は表示されています。 初心者なので分りませんが、おそらくcss（stylesheet）？が機能していないように思うのですが・・・。 これってどうやって解決すれば良いのでしょうか？ 要は、違うサーバに移して同じものを表示したいのです。 もちろん、パクるのではなく、 自力でHPを作るために、xhtmlとかcssとか勉強しています。 誰か助けて下さい。
- 締切済み
- HTML
- XHTML＆CSSとドリームウィーバーについて
最近というかずいぶん前からですが、ウェブサイトの制作に XHTML＆CSSで記述しているサイトをよく見かけますが、 これにするメリットはただのhtmlと比べ何が優れているのでしょう？ わたしとしては、htmlしかしらず、ドリームウィーバーver4で、 サイトを制作していましたが、最近、初めてXHTML＆CSSで記述している サイトを読み込んで、レイアウトがめちゃめちゃなのに驚きました。 テーブルレイアウトでしか作ってこなかったので、正直どうして いいか戸惑っています。今後どうしたらいいのでしょうか？ またドリームウィーバーの最新バージョンは、テーブルレイアウト のような簡単な見え方で、XHTML＆CSSで記述ができるように なっているのでしょうか？
- ベストアンサー
- CSS
- xhtml 1.0とxhtml1.1
xhtml 1.0とxhtml1.1がありますが、webサイトを作成する上ではどちらでサイトを作ったら良いのでしょうか？ htmlとcssはある程度わかるのですが、xhtml 1.0とxhtml1.1の違いがいまいちわかりません。htmlでサイトを作っていると将来的に何か問題が起こるのでしょうか？
- ベストアンサー
- HTML
- xhtml＆CSSで携帯サイト作成
xhtml＆CSSで携帯サイトを作成しているのですが、思うようにうまくいきません。 imgタグで表示したjpgファイルをセンタリングしたいのですが、色んな方法を試したのですが、どれも出来ませんでした。 xhtmlで、画像をセンターに表示させる、一番シンプルな方法はどうすればよいのでしょうか？ また、作り方が載っているお勧めサイト等あれば教えて頂きたいです。
- ベストアンサー
- HTML
- いきなりXHTML+ CSSで勉強しても大丈夫ですか？
現在ドリームウィーバーを使用してHPを作成できるくらいなのですが、いまから本格的にHTMLを勉強しようと思っています。 ただ今現在主流になりつつあるXHTMLとCSSですが、いきなりそれの本を買って勉強したほうが効率がいいでしょうか？ それともHTMLの本を本で勉強してから取り組むという形じゃないと難しいでしょうか？ できればXHTML＋CSSをいきなり勉強して覚えたいと思っているのですが、 アドバイスよろしくお願いいたします。
- ベストアンサー
- CSS
- 検索エンジンにおけるHTML+CSSとXHTML+CSSの差
自信のあるウェブサイトを作ったとしても、やはりそのサイトに訪れてもらえないと意味が無いですし、ウェブ制作を仕事として続けていくためにはSEO対策についての勉強も当然必要と思い、CSSの勉強を始めようと思っています。 そこで諸先輩方にお聞きしたいのですが、 『HTML+CSS』で構築されてるサイトと『XHTML+CSS』で構築されてるサイトでは、yahooやgoogleで検索された場合にランクされる順位に大きな差は出てくるのでしょうか？
- ベストアンサー
- HTML
- XHTML1.1+MathML2.0+SVG1.1をブラウザで表示したい。
XHTML1.1 MathML2.0 SVG1.1 XML1.0 これを含むコンテンツをブラウザで表現する方法を探 しています。 XHTMLを文書の全体的な配置や意味の定義に使い、色や、配置にCSSを使い。 数字表記にはMathMLを。 ベクター画像にはSVGを使用し。 他のプログラムが使用するデータをXMLとして内包するページを作成しようと思っています。 XML1.0に関しての仕様は大体抑えたので、HTMLをXMLで再定義したものであるXHTML1.1でウエブページを作ろうとしたところなぜか巧く表示できません。 ページは"整形式XML"としては正しく作成しました。 ブラウザはIE6.0です。 使用する前にパラメータ エンティティを定義しなければなりません。リソース 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd' の実行エラーです。ライン 85、位置 2 %xhtml-prefw-redecl.mod; -^ というエラーメッセージが返されました。 ファイル拡張子は、xmlとしました。 ページは、人間だけでなく、他のプログラムへ対しても意味を持つようにしたいので、中にXMLのデータを挟みこめることは必須です。 この条件での、ウエブページ制作を詳しく解説しているサイトは無いでしょうか？
- 締切済み
- XML
- XHTML+CSSの印刷について
XHTML+CSSにて <div id=""></div>にて段組で制作しております。 そこでCSSを外部読み込みのURLにて指定しております。 IEにて印刷プレビューするとメインの画像しか映らなく メニューやコンテンツ部分が正常に映りません。 この場合どのようにしたら正常に表示する事ができるでしょうか？ （CSSに問題あるのでしょうか？） 下記のサイトもそのような例です。 （フラッシュ部分の画像しか映らない） http://www.kanematsu-oilgas.co.jp/
- ベストアンサー
- HTML
お礼
quadsさん、迅速なご回答、有難う御座いました。 本当に助かりました。 quadsさんが添削して下さったソースをもとに、 自分なりにさらに手を加えてみました。 まだ何か問題点があれば、どなたでもご指摘下さい。 宜しくお願い致します。 P.S：メタ情報は、自分なりにキチンとしているつもりだったのですが…。 どの辺が悪いのか、よく分かりません。 教えていただければ幸いです。