ウォーターサーバーとコーヒーマシンが一体化した画期的マシン >>

http://www.recipe-de-cooking.com/
IEで見たときとfirefoxで見たときではレイアウトが異なっています。
中央寄せの状況もブラウザで違い、またコンテンツの幅も違っています。
firefoxでは右端が出っ張った形になっています。(ガタガタ)なぜでしょうか?
解決方法がわからないので教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

IEの横幅 -> width


他 -> width + 左右padding(指定があれば) + 左右border(指定があれば)

全体や広告部分にも該当箇所があるかと思います。
これらプロパティを併用しないようなつくりにするか、
ブラウザ別にスタイルを変えるなど対処してください。

「CSSハック」で検索すると、特定のブラウザに向けて
スタイルを設定する方法を説明するサイトが沢山出るかと思います。
    • good
    • 0

#2です。



> ですが、いろいろwidthの数値を調整しているのですが、うまくいきません。
widthを一つ一つ指定するのではなく、上位の要素にだけwidthを指定してみてはどうでしょうか?
下記はFirebugでCSSを修正して横幅が整うことを確認しました。(tableの横幅がずれるのは内部のwidthを整えて修正してください)
# 一括で同じwidthを指定するなら、上位の要素にだけ指定すれば十分です。
# 下位要素はデフォルトの横幅(width:100%;)で自動的に整います。

------------
.main{
width: 900px;
}
#head {
/*magin, padding, widthを指定しない */
}
.cnt {
/*magin, padding, widthを指定しない */
}
.footer {
/*magin, padding, widthを指定しない */
}

<div class="main">
<table id="head"></table>
<div class="cnt"></div>
<div class="footer"></div>
</div>
---------

> いろんなサイトを見ているとレイアウトがきっちりしていてどうやっているのか不思議です。
「CSS バグ」で検索すると様々なブラウザのバグがHITします。
そうした情報を参考にしたり、自分で試行錯誤して手直しして修正してます。
試行錯誤する際は、「Firebug」「IE Developer Toolbar」などのデバッグツールを活用して。

あと、IEはバグの宝庫なので初めはFirefoxで修正してそれからIEでチェックするといいんじゃないでしょうか。
    • good
    • 0

DOCTYPEスイッチが後方互換モードになっているので、


まず「後方互換のまま修正する」か「標準準拠に変更するか」方針を決める必要があると思います。

IEの標準モードと互換モード - CSSめも@Palm84
http://www10.plala.or.jp/palm84/css_memo_standar …


** 後方互換のまま修正する
以下、どちらでもOK
- widthと同時に左右borderや左右paddingを指定しない (divを入れ子にする等)
- CSSハックでブラウザ毎にCSSを指定する

ADP: IE6のwidth解釈バグ対処法
http://adp.daa.jp/archives/000265.html
ボックスモデルの解釈の不具合(IE/width,heightプロパティ):スタイルシート(CSS)辞典 - HTMLタグボード
http://www.dspt.net/stylesheet_css/001/ie_error1 …
CSSレイアウトの定石 WinIE6バグ回避法
http://mb.blog7.fc2.com/blog-entry-83.html

** 標準準拠に変更する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
にして、レイアウト修正する。

# ページ数がまだあまり多くないようなら、標準準拠モードに変更すると長期的にみて手間が省けると思います。

この回答への補足

ご回答ありがとうございます。
後方一致でやろうと思っています。
ですが、いろいろwidthの数値を調整しているのですが、うまくいきません。
もうお手上げ状態です。
いろんなサイトを見ているとレイアウトがきっちりしていてどうやっているのか不思議です。
どのようにしたらいいのか教えて下さい。

補足日時:2009/06/19 16:11
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QIEとクロームの表示ずれ

普段IEを使ってHPを表示しているのですが、クロームで
表示してみたところ、添付資料のように表示されました。
(レイアウトに関する部分はCSSで定義しています)

他のページもほとんど同じようなズレ方なのですが、
なにか簡単に修正ができるのでしょうか?

Aベストアンサー

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修正する必要があるでしょう。
 さすがにないでしょうが、可能ならHTML4.01strict,XHTML1.0strict,XHTML1.1(XHTML1.1にはtransitinalやframesetはない)・・1999年の勧告以来
【引用】____________ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )]より
 とされてきましたから、strictだとは思いますが・・

 なお、互換モードで一番問題となるのは、IEのスタイルシートのサイズ計算のバグです。
すなわち、コンテナブロックのサイズをpaddin辺の内側ではなくborder辺の内側として計算してしまうことにあります。
 IEを標準にWebページを作成すると良く犯す失敗です。できれば他のウェブ標準ブラウザを使用して作成するほうが無難です。特にFirefoxは開発用ツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )が豊富ですから、この様なときにとても助かります。

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修...続きを読む

QIEとGoogleクロームの表示の違い

私は通常はブラウザはインターネットエクスプローラー11を使っています。

自作ホームページ(ビルダーで作成)をGoggleのインデックス登録するのにブラウザはGoogleの方が良いようなのでGoogleクロームで自分のサイトを開いてみましたら、えらい画面のレイアウトが崩れているんです。

これはなぜでしょうか?またGoogleでも正常に表示するには方法がありますか?

Aベストアンサー

ホームページを作成する時の最大の邪魔はIEの存在。
IEだけがW3Cのルールを無視した部分がある。

先ずはモダンブラウザ(Google、Firefoxなど)を基準に作成する。
その上でieで表示してみて、ieでずれた部分を対応する。

方法はケースバイケースなので、都度検索して調べるしかないが、
一番のIEのチョンボはmarginの解釈。
本来marginは境界同士の隙間なのだが、ieは隣の境界から自分のコンテンツまでの隙間と解釈する。

モダンブラウザとIEで両方共となるとpaddingで調整する事になる。

Q同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

まったくの初心者ですが、テンプレートを編集してホームページを作りました。
しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。
(Lunascapeというブラウザで、3種類のエンジンが選べるので他のエンジンにしてみたのです)
問題を極力単純化しようと余計な文章を省いたHTMLを用意しましたが、結果は変わりませんでした。

Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。

現状、この重大なエラーを残したまま公開している状態のため、急ぎ直したいのです。

画像は実行したときの症状を、下にはそのソースを載せます。
アドバイス、回答をよろしくお願いします。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>テスト</title>
</head>
<body>
<style type="text/css">
<!--
table{
border-collapse: collapse;border-spacing: 0;
width: 60%;
margin-bottom: 30px;
border: 1px solid #DDD;
table-layout:fixed;
}
th{
border: 1px solid #DDD;
color: #333;
padding: 10px 20px;
}
td{
border: 1px solid #DDD;
color: #333;
padding: 5px;
}

.title{ width:12em;}
.compose,.long{ width:4em;text-align:center;}
.value{ width:6em;text-align:center;}

th.genre { background: #E5F2F8;}
-->
</style>
<table>
<tr><th class="title">タイトル</th><td class="long">こうもく1</td><td class="value"><span class="d">こうもく2</span></td><td>こうもく3は大切なこうもくです。ほんとうです。</td></tr>
<tr><th class="title">タイトル</th><td class="long">こうもく1</td><td class="value"><span class="d">こうもく2</span></td><td>こうもく3は大切なこうもくです。ほんとうです。</td></tr>
</table>

</body>
</html>

同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

まったくの初心者ですが、テンプレートを編集してホームページを作りました。
しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。
(Lunascapeというブラウザで、3種類のエンジンが選べるので他のエンジンにしてみたのです)
問題を極力単純化しようと余計な文章を省いたHTMLを用意しましたが、結果は変わりませんでした。

Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせると...続きを読む

Aベストアンサー

この場合の幅というのは <table> の幅も含めていますか?
IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、万全を期すならば

html, body { margin: 0; padding: 0; }

を指定した方が良さそうです。(デフォルトスタイルシートのリセット)
width: 60%; は親要素に対しての割合ですから、margin, padding がブラウザ毎に違うと <table> の幅が不統一になります。

> Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。
この辺りでしょうか。

・全てのtable関連要素に margin, padding, border を指定する (デフォルトスタイルシートのリセット)
・em を使いつつ、幅を完全に揃えたいのなら、font-size を指定する (代償にアクセシビリティが下がります。「幅を完全に統一にしたい」という要望なら避けられない問題ですが…。)

デフォルトスタイルシートはあてになりませんので、他にもあやしそうなプロパティを探してリセットしてみてください。

この場合の幅というのは <table> の幅も含めていますか?
IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、万全を期すならば

html, body { margin: 0; padding: 0; }

を指定した方が良さそうです。(デフォルトスタイルシートのリセット)
width: 60%; は親要素に対しての割合ですから、margin, padding がブラウザ毎に違うと <table> の幅が不統一になります。

> Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広...続きを読む

Qchromeのcss位置ズレについて

CSSのpositionで画像を上にかぶせて表示させています。
そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。

下記の2つのハックを使った場合、display:noneだと反映されたのですが
positionにすると何も反映しなくなります。

ハックはpositionには効かない、などあるのでしょうか?
どなたか教えていただけますでしょうか。

よろしくお願いいたします。

-----------------------

body:nth-of-type(1) #selector {position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}

-----------------------

@media screen and (-webkit-min-device-pixel-ratio:0){
#selector {
position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;
}
}

CSSのpositionで画像を上にかぶせて表示させています。
そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。

下記の2つのハックを使った場合、display:noneだと反映されたのですが
positionにすると何も反映しなくなります。

ハックはpositionには効かない、などあるのでしょうか?
どなたか教えていただけますでしょうか。

よろしくお願いいたします。

-----------------------

body:nth-of-type(1) #selector {position : absolute;top:960px;left:0px;filter: alpha(opacity=85);...続きを読む

Aベストアンサー

趣味でWEBサイトを作成している者です。
あの・・・display:none;で反映されたって・・・消えただけですよね…
これは非表示にする物です。
positionとは何ら関係のないものです。
あとposition:absolute;よりもrelativeの方がいいですよ?
absoluteだとほかと全く独立して位置決めするので画面上部、画面左右からの指定ですが
relativeだと元々出る位置からの指定で、画面倍率の値をいじってもずれません
セットで居る為だと思います。
あと上の画像の値にz-index:1;とでも書いて下さい。
これは画面に対して奥(数字が小さい1)手前(数字が大きい10)というz軸を設定する為のものです。
これ入れるとずれないと思います。
同じ位置で重なるとどうしてもずれが出ると思いますので。

QグーグルクロームとIEの表示の違い

IEではちゃんと表示されているホームページがグーグルクロームでは、壊れてしまいます。
外部CSSファイルを使っていますが、HTMLファイルに特別な書きようがあるのでしょうか?

Aベストアンサー

IEとクロームに限らず、
ブラウザー全て違います(微々たる差)

HTMLに特別な書き方が必要な場合もありますが、
私が考えるに、IEでしかちゃんと表示させられないような書き方をしていると思います。

多少のずれや、マージンの差があっても、ちゃんとした書き方をしていれば、ある程度壊れずに表示されるものです。

特にtableとか、margin、padding、floatあたりが結構シビアに変わってきますので、そこらへんを調べてみてはいかがでしょうか?

Qテーブルの表示がずれます

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
<tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>
宜しくお願い致します。

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>...続きを読む

Aベストアンサー

こんにちは。
イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね?全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が1行のものと、2行のものとでは、ページが違うんですよね?
もし、同じページに表示するのであれば、1ページにつき、<html>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。

Qyyyymmddからyyyy/mm/ddへの変換

いつもお世話になっております。
Aと言う変数にはyyyymmddの値が入っていて
Aをyyyy/mm/ddにしてBの変数に入れたい場合の処理がわかりません。
調べたところ、SimpleDateFormatクラスと言うものを使えばよいと言うことが判明しました。
しかし、今まで使ったことがないのでよくわかりません。
変数Aと変数BはどちらもString型です。
ご教授お願い致します。

Aベストアンサー

 こんにちは。

 本当に変数aの中の文字列が厳密にyyyyMMddの形式のなっているのなら、普通に

String b = a.substring(0, 4) + "/" + a.substring(4, 6) + "/" + a.substring(6, 8);

 これでいいと思いますが、いったんDate型にする必要があったり、ちゃんと日付として認識できるか確かめる必要がある場合は、

String a = "20051029";

SimpleDateFormat formatter = (SimpleDateFormat)DateFormat.getDateInstance();
formatter.applyPattern("yyyyMMdd");
try {
  Date date = formatter.parse(a);
  formatter.applyPattern("yyyy/MM/dd");
  String b = formatter.format(date);
  System.out.println(b);
}
catch (ParseException ex) {
  System.out.println("解析失敗");
}

 こんな感じでいいんじゃないでしょうか。

 こんにちは。

 本当に変数aの中の文字列が厳密にyyyyMMddの形式のなっているのなら、普通に

String b = a.substring(0, 4) + "/" + a.substring(4, 6) + "/" + a.substring(6, 8);

 これでいいと思いますが、いったんDate型にする必要があったり、ちゃんと日付として認識できるか確かめる必要がある場合は、

String a = "20051029";

SimpleDateFormat formatter = (SimpleDateFormat)DateFormat.getDateInstance();
formatter.applyPattern("yyyyMMdd");
try {
  Date date = formatter.p...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QIEとfirefox、行間の表示が異なってしまう

ulタグをline-heightで行間指定した場合、firefoxとIEでは表示が異なってしまいます。
firefoxでちょうど良い行間にするとIEでは詰まりすぎて文字がつぶれてしまったり。

解消方法を教えていただけないでしょうか?

Aベストアンサー

line-heightの数値はpx指定ですか?%指定ですか?
IEはpxやptなどでフォントサイズを固定できますが、Firefoxではフォントサイズの固定ができません。
行間をpxなど固定サイズで指定していたとき、文字サイズが変われば行間も見た目が変わってしまいます。

「行間を指定する」
http://www.tagindex.com/stylesheet/text_font/line_height.html

「スタイルシートで使用する長さの単位」
http://www.tagindex.com/stylesheet/basic/length.html

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">


人気Q&Aランキング