人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

http://www.thabiland.com/
上記サイトでCSSの設定が上手くできず、ブラウザ間で幅の表示がずれてしまって、困っています。

1、上記サイトのメニュー直下に、「プロモーション中の・・・・」という見出しの下に、枠があるのですが、Charomeだと枠がはみ出してしまいます。

2、コンテンツを囲うように、黒いボーダーが両サイドについているのですが、Chromeだとボーダーがずれてしまいます。

これらの問題を解決するには、どのようにCSSを記入すれば良いか、教えていただけると助かります。
どうぞよろしくお願いします。

●質問者: Tomo
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント

1.

.contentmid-detail {
 width: 613px; /* 645pxからpaddingとborder分を引く*/
}

613pxにするか指定しない(auto)。

2.

1090pxのdivと1080pxのtableのwidthをどちらかに合わせればフィットします。


Tomoさんのコメント
ありがとうございます。 2番については、解決できたのですが、1番がどうにもうまくゆきません。Chromeで表示がずれてしまいます。 ブラウザ毎に違うCSSを指定するのが良いのでしょうか?

Cherenkovさんのコメント
よくないですね。 IEメインで表示確認していますか?firefoxかchromeのほうが素直ですよ。 >|css| .contentmid-top { padding: 10px 0 10px 15px; } ||< これ付け足しました?firebugでデバッグするといいですよ。 [http://www.koikikukan.com/archives/2009/07/22-015555.php:title=小粋空間: Firebug の使い方:(X)HTML と CSS の確認・修正方法のまとめ]

Cherenkovさんのコメント
>|css| .contentmid-top { text-align: center; padding 10px 0 0 0; } .contentmid-detail { width: auto; margin: -10px 0 0 0; } ||< こうしてみるとか。

Cherenkovさんのコメント
提示したプロパティを変更または追加という意味です。これだけというわけではない。

Tomoさんのコメント
ありがとうございます。 上記のように変更してみたのですが、IEの方で、幅が合わず、横スクロールバーが出てしまいます。 また何かアドバイスがあれば、ぜひお願いいたします。

Cherenkovさんのコメント
IEのバージョンはいくつですか。7?9で確認しましたが横スクロールバーのはみ出しは確認できませんでした。画像もつけると誰かが回答してくれるかも。

Tomoさんのコメント
http://www.thabiland.com/capture15.jpg このような感じです。 IEのバージョンは、8 です。

Cherenkovさんのコメント
DOCTYPE 宣言を変更してみてはどうでしょう。現在は互換モード(Quirks)に設定されています。 IEの古い方式でCSSが解釈されて表示されている状態。 試しにIE9の開発者ツールでドキュメントモードをIE8にしてみると揃って表示されます。 http://gyazo.com/7dfdd7e05ac2164c04c4f0864c3c4a61 >|html| <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN"> を <!DOCTYPE html> にしてみるとか ||< 私自身がよくわかっていないのでリンク紹介に留めておきます。 -[http://hxxk.jp/2008/09/29/0118:title=hxxk.jp - DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )] -[http://www.htmq.com/htmlkihon/302.shtml:title=DOCTYPEスイッチ?HTMLの基本]
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ