IEで画像の横に表示される隙間について。

解決済

質問者：SAI-777
質問日時：2009/05/16 08:58
回答数：3件

現在こちらのサイトで（http://www.black-inspiration.com/）
画像を横幅1260pxに合わせて隙間なく表示させようとしているのですが、
複数のブラウザでチェックするとIEだけ画像の左側にわずかな隙間が空いてしまいます。
ちなみにサイト構築にはwordpressを使用しています。
どのようにしたらこの隙間を取り除くことが出来るのか教えて頂けないでしょうか？？
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： sh_hirose
回答日時：2009/05/16 20:45

>すみません、言っていませんでしたが僕は全くの趣味でHPを作りはじめてプログラミンに対する知識は全くありません。

HTMLのソースを見たのですが、HTMLとしてもひどいかなと・・・。
単なる趣味ならいいのですが、公開するならもうちょっとHTMLの知識をつけるべきだと思います。

>どのようにしたらこの隙間を取り除くことが出来るのか教えて頂けないでしょうか？？
左詰めでいいんですかね？
とりあえず構文的におかしなところを修正しました。

あと画像サイズですが、横幅が1265になっていましたが、1260に修正しました。
CSSの
div#header,
div#content,
div#footer {
width: 100%; /*(60%~ | 600px~ | 60em~) etc.*/
min-width: 1250px;
max-width: 1250px;
margin-right: 0px;
margin-left: 0px;
position: relative;
text-align: left;
}
のmin-width: 1250px;、max-width: 1250px;も1260に修正したほうがいいと思います。

HTML
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head profile="http://purl.org/net/ns/metaprof">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="generator" content="WordPress 2.7.1" />
<meta name="author" content="BLACK INSPIRATION" />
<link rel="alternate" type="application/rss+xml" href="http://www.black-inspiration.com/feed" title="RSS 2.0" />
<link rel="alternate" type="application/atom+xml" href="http://www.black-inspiration.com/feed/atom" title="Atom cite contents" />
<link rel="stylesheet" type="text/css" href="http://www.black-inspiration.com/wp-content/them … />
<meta name="description" content="[ MASATO MIURA / GRAPHIC PORTFOLIO BLOG / rami2929@gmail.com ]" />
<link rel="pingback" href="http://www.black-inspiration.com/xmlrpc.php" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.black-inspiration.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.black-inspiration.com/wp-includes/wlw … />
<title>BLACK INSPIRATION</title>
</head>
<body>
<div id="main">
<div id="header">
<p class="siteName" style="margin-left: 10px;">
<a href="http://www.black-inspiration.com"><font size="6" color="#696969" face="Georgia">BLACK INSPIRATION</font></a>
</p>
<p class="description" style="margin-left: 10px;">
<font size="2" color="#808080" face="Georgia">[ MASATO MIURA / GRAPHIC PORTFOLIO BLOG / rami2929@gmail.com ]</font>
</p>
</div>

<div id="content">
<div class="section entry" id="entry35">
<div class="textBody">
<p><img alt="1" src="http://www.black-inspiration.com/image/3.jpg" width="1260" class="mt-image-none" style="" /></p>
</div>
<ul class="reaction">
<li class="comment">
<font size="2" color="#808080" face="Georgia" text-decoration: none;>
<a href="http://www.black-inspiration.com/archives/35#com … title=" へのコメント" rel="nofollow">Comments</a>: <span class="count">0</span>
</font>
</li>
<li class="trackback">
<font size="2" color="#808080" face="Georgia">
<a href="http://www.black-inspiration.com/archives/35#tra … title=" へのトラックバック" rel="nofollow">Trackbacks</a>: <span class="count">0</span>
</font>
</li>
<li>
<font size="2" color="#808080" face="Georgia">2009-05-13</font>
</li>
</ul>
</div>
</div>

<center>
<a href="http://www.black-inspiration.com/"><font size="2" color="#696969" face="Georgia">HOME</font></a>/
<a href="http://www.black-inspiration.com/archives/27"><f … size="3" color="#696969" face="Georgia">1</font></a>/
<a href="http://www.black-inspiration.com/archives/29"><f … size="3" color="#696969" face="Georgia">2</font></a>/
<a href="http://www.black-inspiration.com/archives/35"><f … size="3" color="#696969" face="Georgia">3</font></a>/
</center>

<div id="footer">
<ul class="support">
<li>Powered by <a href="http://wordpress.org/">WordPress 2.7.1</a></li>
<li class="template"><a href="http://vicuna.jp/">vicuna CMS</a> - <a href="http://wp.vicuna.jp/" title="ver.1.5.8">WordPress theme</a></li>
</ul>
<address>Copyright © 　BLACK INSPIRATION All Rights Reserved.</address>
</div>
</div>


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-8707347-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>

この回答への補足

ご指摘ありがとうございます。
知識をつけるべき、ごもっともです。
ええと・・・wordpressを利用しているのですが、
htmlを直接編集することは出来るのでしょうか。
何やらもう知識が足りなすぎて一度出直した方がいいような気がしてきました。笑

補足日時：2009/05/17 17:59

通報する

- 0
- 件

通報する

No.3

回答者： sh_hirose
回答日時：2009/05/18 12:31

>ええと・・・wordpressを利用しているのですが、

>htmlを直接編集することは出来るのでしょうか。
WordPressいじったこと無いのでなんともいえませんが、WordPressの日本語サイトを見てみたところソースは正常でした。
質問者さんのソースは構文的におかしな所が多いので、何か設定をいじっていないですか？

わからないようでしたらもう一回WordPressをインストールしてみてはどうでしょう?

参考URL：http://ja.wordpress.org/

- 0
- 件

通報する

No.1

回答者： atsak
回答日時：2009/05/16 12:15

CSSを見れる状態にして頂かないとなんとも。

画像単体に限らずページ全体が中央寄せになってるのは問題ないのですか？

中央寄せになっている為の左余白が原因なのなら、
ざっと見たところ<center>タグを使用している点と
bodyのtext-align:center;が解けてないか、といった所でしょうか。

余計なお世話かもしれませんが、
<p><center><img src="..." /></center><p>
となってますが、pタグにtext-align:center;ではダメなのですか？
XHTML宣言をしていることですしcenterタグは非推奨です。
imgタグがXHTML記述ですしどちらかに統一してはどうでしょう。

この回答への補足

早速の回答ありがとうございますっ。

すみません、言っていませんでしたが僕は全くの趣味でHPを作りはじめてプログラミンに対する知識は全くありません。
恥ずかしながら、感覚と勘を頼りに色々いじっています。

とりあえず<center>タグは解いてみましたが変化はありませんでした。
主要なCSSはこちらです。
（http://www.black-inspiration.com/wp-content/them …）
レイアウトはこちらで指定しています。
（http://www.black-inspiration.com/wp-content/them …）

もしよろしければ、極力初心者にも分かりそうな示唆を頂けると幸いです。
どうぞよろしくお願い致します。