ＨＴＭＬとCSSでの画像位置について教えてくださ

質問

こんにちは。
アメブロと言うブログでデザインとカスタマイズを依頼されました。
希望はヘッダー画像そのものにリンクを張りたいのですが、ＨＴＭＬ編集機能がありません（ＣＳＳのみ）。
プロフィール欄のみＨＴＭＬ編集ができるので、そこに下記のＨＴＭＬソースを書き、画像にリンクを張りました。

<div style="position:absolute;top:-320px;left:15px;"><a href="http://ameblo.jp/vice-president"><img border="0" src="http://stat.ameba.jp/user_images/da/d2/10014814202.jpg" width="700" height="366"></a>
</div>
※top:-10px－プロフィールのあるサイドバーの上端からの位置
　left:0px－サイドバーの左端からの位置

ＩＥではきちんと表示されたのですが、firefoxでは画像位置が崩れてしまいます。どのように記述したらよいでしょうか？
よろしくお願いします。

回答No.3

quads

> 現在はヘッダー画像にリンクを張っているのではなく、文字にリンクを張っているので崩れないようです。
>（私は画像自体にリンクを張りたいのですが、時間が限られていまして・・）

始め、あなたが示した方法は画像にリンクを張るものでした。
これはHTMLが弄れない以上、「強引な方法」でないと不可能なので、私が示したようになります。

文字（h1要素あたり）へのリンクで満足であれば、私の回答は一切無視していただいて結構です。

画像にリンクを張ることを実現したいのであれば、
本来は、より適切な指定にすべきですが、
検証する時間すらないというのであれば、#2の回答を参考にしてください。

●もう一度言うと、
この質問をしたときの状態でHTMLは大丈夫です。（DTDとかXMLに反するのはここでは議論しない）

最初の状態で、スタイルシートだけ追記します。
div[id="wrap"] {padding-top:366px;}
#freespace div[style] {top:10px !important;}

これで少なくともFxでも最低限の表示は保証されるはずです。

回答No.2

quads

あなたが提示したソース中のURIに含まれるブログを拝見しましたが、既に実現されているのですか？
それともまだ回答を待っているのでしょうか。

先ほどの状態で、IEでもFxでも実現する方法を教示します。
しかしながらこの発想は強引であり、通常はすべきではありません。

方針
●IE6以前で理想どおり表示させるソースを書く
●IE6以前では正常にパースできない方法でスタイルシートを書く

前者の方法です。
提示されたtopプロパティ値で改めてください
<div style="position:absolute; top:-320px; left:15px;">
<a href="$root_URI$"><img border="0" src="$image_URI$" width="700" height="366" alt="" /></a>
</div>

そして、トップページに適用されるCSSに対して、次のスタイルシートを記述してください。
div[id="wrap"] {padding-top:366px;}
#freespace div[style] {top:10px !important;}

ただし、確認していません。

質問文で書かれたようなdiv要素を追記したのであれば、id属性でも振ってくれればIEで検証しやすかったのですが。

お礼

quads様

ありがとうございます。

現在はヘッダー画像にリンクを張っているのではなく、文字にリンクを張っているので崩れないようです。
（私は画像自体にリンクを張りたいのですが、時間が限られていまして・・）

これからquads様のソースで確認してみたいと思います。
検証しましたら、またこちらで報告させて頂きます。
本当にありがとうございます。

回答No.1

quads

HTMLが編集できない時点で致命的ですが。
そんな条件を前提にして、とりあえず実現させる方法を教示します。

あなたがHTMLに追加した記述
<div style="position:absolute;top:-320px;left:15px;">
<a href="$root_URI$"><img border="0" src="$image_URI$" width="700" height="366"></a>
</div>

これを以下に改めてください
<div style="position:absolute; top:10px; left:15px;">
<a href="$root_URI$"><img border="0" src="$image_URI$" width="700" height="366" alt="" /></a>
</div>

そして、トップページに適用されるCSSに対して、次のスタイルシートを記述してください。
#wrap{padding-top:366px;}

Firefox でしか確認していません。
これを記述することにより IE で崩れる可能性があります。

それを検証するには適用されるCSSを弄らないと手間がかかるので私はしません。
Firefox では Web Developer の Edit CSS および属性セレクタを用いて容易に操作できるので試しました。

示したように変更した場合に、Firefox 以外のブラウザで崩れるようであればその旨をお書きください。

## 警告
http://blog.goo.ne.jp/oshietegoo/c/2fd47a0436464f7e861d622ad803e8ab
# 禁止事項 - 個人情報の開示
質問文中の提示ソースに、個人情報の開示に繋がる可能性が見受けられるURIの記述があります。

私が回答してしまうと同時に、質問者は質問の削除ができなくなってしまいますが。

お礼

ありがとうございました。
確かにFirefoxでは綺麗に表示されましたが、ＩＥで崩れてしまいました。

また、下記のコードでも試してみましたが、ＩＥで崩れてしまいました・・。

<div style="position:relative;"><a style="position:absolute;top:-320px;left:15px;" href="​http://ameblo.jp/vice-president"><img​ border="0" src="​http://stat.ameba.jp/user_images/da/d2/10014814202.jpg"​ width="700" height="366"></a>
</div>

どちらでも綺麗に表示させる事は無理なのでしょうか？

お解かりになりましたら、よろしくお願いします。

補足

補足です。

そうやら、ＩＥ７では綺麗に見ることが出来るようですが、ＩＥ６では崩れてしまうようです。

出来ればＩＥ６でも見ることが出来れば良いのですが・・。

お解かりになりましたら、よろしくお願いします。