どうしても画像がずれてしまいます - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

どうしても画像がずれてしまいます

法人・ビジネス ホームページ・Web制作 2009/06/02 07:55

IE6とFirefoxで見た場合のズレについて

一枚の画像を3枚に分割してブラウザ上で1枚の画像に見せたいのですが、
Firefoxでは1枚の画像のように見えるのですが、IE6ではズレて見えます。
このズレを修正するにはどうすればいいのでしょうか。
分割の仕方はさまざまです。

左2枚、右1枚の場合
<div id="myjutaku">
<div id="m1"><img src="images/1.jpg" alt="" width="325" height="52" /></div>
<div id="m2">あいうえお、かきくけこ</div>
<div id="m3"><a href="index.html"><img src="images/3.jpg" alt="" width="148" height="99" /></a></div>
<br class="clear" />
</div>

CSS
#m{
width: 250px;
height:150px;
padding-top: 10px;
padding-bottom:10px ;
float:left;
}

#m1{
width: 250px;
height:50px;
}

#m2{
width: 250px;
height:100px;
line-height: 18px;
font-size: 13px;
padding-left:15px;
background-image: url(../images/2.jpg);
}

#m3{
width:400px;
height:150px;
padding-top: 10px;
padding-bottom:10px ;
float: left;
}

T型の場合
<div id="myjutaku">
<div id="my1"><img src="images/1.jpg" alt="" width="325" height="52" /></div>
<div id="my2">あいうえお、かきくけこ</div>
<div id="my3"><a href="index.html"><img src="images/3.jpg" alt="" width="148" height="99" /></a></div>
<br class="clear" />
</div>

CSS

#my{
width: 325px;
height:150px;
padding-right:10px ;
padding-bottom:10px ;
float:left;
}

#my1{
width: 325px;
}

#my2{
width: 172px;
height:99px;
padding-top:5px;
padding-left: 5px;
line-height: 18px;
font-size: 13px;
background-image: url(../images/3.jpg);
float:left;
}

#my3{
width: 148px;
float: right;
}

yurimonさん ( 兵庫県 / 女性 / 31歳 )

回答:1件

中沢 伸之 専門家

中沢 伸之
Webプロデューサー

- good

paddingの解釈

2009/06/02 22:56 詳細リンク

はじめまして、ストークデザインの中沢です。

Firefoxと、IE6の表示が違う(IE6の表示崩れ)についてですが、基本的にpadding要素の解釈が違います。

paddingを含めたwidthの幅設定をすると、FirefoxとIE6では解釈が違う為に表示崩れが起きてしまいます。

簡単に解決する方法の一つとしては、paddingの代わりに、marginを使ってみてください。

下記のサイトが分かりやすく説明されていますので、是非チェックしてみてください。


参考サイト

その他、borderも解釈が違う為、使わない事や、floatを使った際にIEではfloat元のmarginが倍になるというバグもありますので、個々にハックを使ったりする事等をオススメ致します。

回答専門家

中沢 伸之
中沢 伸之
(埼玉県 / Webプロデューサー)
ストークデザイン ウェブデザイナー

集客・売上アップを実現! 営業ツールとしてのWebサイトを制作!

お客様の事業内容やターゲット、目的に合わせた最適なWebサイトを制作し、集客・売上アップの実現を目指します。SEO対策を施した「安心料金・安心対応」の制作がモットー。海外向けサイトコンテンツの翻訳業務や英語サイトの制作も承ります。

中沢 伸之が提供する商品・サービス

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

その他サービス

格安ホームページ制作

貴社のサイトを格安でお作りします。

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

動的出力を考慮に入れたHTML・CSSの作成について かなりもりだくさん  2009-05-21 18:21 回答6件
なぜアンチエイリアスを無効にできないのか? Hajestiaさん  2012-12-10 21:29 回答1件
CSSを使ったhtml制作とSEOについて DELLTさん  2008-10-16 14:44 回答5件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

その他サービス

格安ホームページ制作

貴社のサイトを格安でお作りします。

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)