過去ログ表示


過去ログ 49 を表示

トピック内全 5 記事中の 1 〜 5 番目を表示
[ 最新記事及び返信フォームをトピックトップへ ]
このトピックの全ページ / [0]

position:relativeと文字列配置
(#7192) このトピック中1番目の投稿

私がよく行くサイトなのですが、下記のページについて。

http://www.cdrinfo.com/

div のインラインスタイルで指定された背景色が、
周辺文字を右に配置させる設定の画像の上に
来てしまっているのです。

# IEだと画像が上に来ます

文字だけは画像を避けていますが、背景だけは
画像に重なってしまう。

CSS についてはつい最近かじり始めたばかりなので
どちらが優先かわからないのですが、文字ではなく
div のスタイルで position:relative ならば、
背景ごと画像を避けるべきのような気もしますし…。

コメントがいただければ幸いです。よろしくお願いします。

Re[1]: position:relativeと文字列配置
(#7199) このトピック中2番目の投稿

> 私がよく行くサイトなのですが、下記のページについて。
>
> http://www.cdrinfo.com/
>
> div のインラインスタイルで指定された背景色が、
> 周辺文字を右に配置させる設定の画像の上に
> 来てしまっているのです。
>
> # IEだと画像が上に来ます
>
> 文字だけは画像を避けていますが、背景だけは
> 画像に重なってしまう。
>
> CSS についてはつい最近かじり始めたばかりなので
> どちらが優先かわからないのですが、文字ではなく
> div のスタイルで position:relative ならば、
> 背景ごと画像を避けるべきのような気もしますし…。
>
> コメントがいただければ幸いです。よろしくお願いします。

Mozillaの解釈が正解です。
相対配置は新たなフロールートとなりますのでいわば別のレイヤーとして解釈されます。そのため、相対配置の背景は通常フローの要素の前景より更に手前に表示されることになります。

期待されている効果を得るためには相対配置ではなく、負のマージンを用います。
詳しくは下記バグ参照。
http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=2717

Re[2]: position:relativeと文字列配置
(#7200) このトピック中3番目の投稿

> 期待されている効果を得るためには相対配置ではなく、負のマージンを用います。
> 詳しくは下記バグ参照。
> http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=2717

ちょっと誤解がありました。
ソースを見直したところ、position:relative;を削除するのが望ましい対応ですね。
どのみちWinIEの表示はCSS2.x的には支離滅裂な表示です(早い話、バグです)。

ああっ本当だ!
(#7203) このトピック中4番目の投稿

> ちょっと誤解がありました。
> ソースを見直したところ、position:relative;を削除するのが望ましい対応ですね。

削ってみたら確かに画像が手前に来ました。
どうもありがとうございます。
IEでの見え方も変わらないようなので、
サイト管理者の方にメールしてみようと思います。

> どのみちWinIEの表示はCSS2.x的には支離滅裂な表示です(早い話、バグです)。

ちなみにOpera7.22で確認したところ…かなり酷い有り様でした。
セルの中の文字が表の幅をオーバーして見えなくなったりとか
画像が左にあるときだけ画像が手前に来ていたりとか。
一時は最も標準準拠を謳っていたような…。

ともあれわざわざフォローいただき、どうもありがとうございました。
済!
Re: ああっ本当だ!
(#7209) このトピック中5番目の投稿

> 一時は最も標準準拠を謳っていたような…。

そーでしたっけ。地上最速を謳ってた(fastest browser on earth だったかしら)ことははっきりと覚えてますが。
#6の出始めに入れてみたけど既にGeckoベースのMozillaがある程度安定していたので、
サイズを変えただけで崩れ去ってしまうoperaに対して魅力を感じない上に展開しただけでは使えないので以降使ってませんが。


このトピックの全ページ / [0]

返信不可


- Child Tree -