<p>の右寄せ、CSSの設定について

質問

お世話になります。

ブログを書いているのですが、imgタグ(classを"a"とします)を挿入するとHTMLでは自動でimgタグだけで前後が<p></p>で囲まれてしまいます。
このimg.aをCSSのfloatで右に寄せ、marginを設定しているのですが、続きの文章が同じ<p>の中に無いためか画像の左が丸々空白になり、画像の下の行から文章が始まるようになってしまいます。なおFirefoxでは画像の左は空白にならず、同じ高さから文章が始まっています。またこの<p>タグだけにクラスを割り振ることはできないようです。

この場合、Internet ExplorerでもCSSの設定などで画像の脇に文章を持ってくることはできるのでしょうか？それともなにか変なCSS設定を別にしてしまっている可能性が高いでしょうか？

よろしくお願いします。

回答No.7

Muller3 · ベストアンサー

早速教えていただいたテーマを読み込んで、
.asin {float: right;}
だけを追加してみました。

……？？？回り込んでます…(^^;
今度はMSIE7（http://browsershots.org/使用　MSIE 7.0 on Windows XP）で見てみたのですが…う～ん？
「テーマ/ヘッダ色を選択」のテーマは「指定なし」になってますよね？

余談ですが、このテンプレート、FirefoxやOperaで見ると、画像が大きくてテキストが少ない場合、次のエントリーに画像が突き抜けてしまいますね（っていうか殆どのテンプレがそうなってるようですが…恐らくfloatの解釈としてはこちらの方が正しいのでしょうが→http://archiva.jp/web/html-css/clearfix.html　ここに書いてある最適解を設定したら直りました）

お力添えできずすみません…

お礼

遅くなりましたが、度々の回答ありがとうございました。

知人のIEで見ても、私がbrowsershots.orgで試してもやはり左に空白ができていました。MacのSafariではFirefoxと同じように空白はできませんでした。もう少しCSSを勉強してから再度聞いてみようかと思うので、一旦終了させていただきます。

ありがとうございました。

回答No.6

Muller3

テーマはどれか使ってらっしゃるのでしょうか？
（テーマ使ってないとしたら、バグ対策は0からしないといけませんよね）

記事の親＜sectionは幅を指定してありますか？
width: 100%（←とにかく幅）
overflow: auto;
を設定するとどうでしょう…だめかな…

お礼

テーマはインポートして使っています( http://d.hatena.ne.jp/designset/277 div.hatena-asin-detail以下のfloatはleftをrightに。)。自動でベースのCSS( http://d.hatena.ne.jp/css/base.css )も読み込むようですが、こちらはあまり関係なさそうな…。　問題になっているimg.asin関連の設定は無いので、前回の「補足」に書きましたものを使っております。

教えていただいたもの、順にdiv.main(サイドバーではないメイン部分)、div.day(日付、コメント欄なども含んだ一日分の部分)、div.section(エントリ本文の部分)、div.section pなどに試してみましたがどうもうまくいかないようです。"width: auto;"にしてみてもダメでした。うーん。

IEの問題というより、float関連でFirefoxがなにか独自の解釈をしているのでしょうか…。まずimgだけの<p>は<p>の幅をimgに合わせる。それからそれがfloat指定されている場合は<p>を越えて次の文章を持ってくる、など。

この際もうまったく新しいデザインにしてしまうというのも手ですが…。(笑)

回答No.5

Muller3

imgタグを直接入力されているわけではなかったんですね。
入力支援使うと確かにサイズは出ませんね。
ご質問の主旨がなかなか理解できず申し訳ありません。

Firefoxで大丈夫でIE7（後方互換）でだめ、とわかっているので、floatまわりのIEバグなんだと思うんですけど、自分で設定してIE6で見てみたらちゃんと回り込んでるんですよね。とするとIE対策のために入れられたスタイルシート（テーマ）の記述を質問者様が上書きされているのか、IE7特有の問題が何かあるのか…
あとは…
お使いのIE7が、ベータバージョンだったりはしませんよね(^^;
いえ、ベータバージョンでは特定のハックが効かなかったらしいので、何か不具合が起こるかなと。そんなことぐらいしか思いつきませんですみません…

お礼

度々ありがとうございます。

うーむ、元のCSSに素人判断でごちゃごちゃ突っ込んだせいがあるかもしれません。なおIE7は正規リリース版です。
明日一旦非公開設定にして、怪しそうなものをあれこれいじってみます。それでもまだ分からない場合はここにまた補足いたします。(>_<)

補足

一旦まっさらにして試してみたのですが、以下のみ(質問のclass="a"がclass="asin"です)で質問と同様の状況(IE7で画像の左脇に文章が回りこまず、空白になる)に陥りました。宜しければご覧下さい。

/*初期化*/
*{
margin:0;
padding:0;
zoom:1;
}

/*全体の設定*/
/*body*/
body{
font-size:90%;
color:#444;
}
a{
color:#111111;
text-decoration:none;
}
a:hover{
color:#83ccd2;
}

/*div.main:記事部*/
div.main{
margin-left:270px;
margin-right:2%;
border:1px solid #aaa;
}
/*div.sidebar:サイドバー*/
div.sidebar{
top:330px;
width:225px;
position:absolute;
left:2%;
font-size:90%;
background:#fff;
border:none;
}
div.sidebar ul{
list-style:none;
}

img.asin {
float: right;
clear: right;
margin:0px 2px 2px 1px;
border:0;
}

なお画像だけが<p>で括られてしまうことが問題なのかな、と思いましたが、<img>タグだけをソースからコピペで貼ってみても同様の現象になるようです。float…。orz

回答No.4

Muller3

float: right;
clear: right;

ではどうでしょう。IE対策でそんな例を見かけて、一応IE6では確認しました。はてなは後方互換なので同じかな？と…
できなかったらすみません。

※画像のサイズは指定されてますよね？

お礼

ありがとうございます。

clear、キャッシュをクリアした上で試してみましたが効果ないようです。
HTML見る限りimgタグにwidth, height指定は入らないようです。…これが怪しいのでしょうか？

回答No.3

Muller3

もしかしてMACIE5.xなら、
http://cssbug.at.infoseek.co.jp/detail/macie/b015.html
これでつかまるかもしれません。
孫要素にしてしまう（divかますとか）すると、floatできます…。面倒ですが。

回答No.2

Muller3

どちらのブログ（＆テンプレート名）をお使いかを補足された方が、適切な答えが得られるかもしれません。その仕様が解除できたりするかもです。

どうでもCSSでどうにかするならば、以下できるかどうかわかりませんが、記事が入っている要素が仮に
<div class="entry">の場合、

.entry .a
{
float: ****;
}

でいけたりするかも…。しかし他の設定がどうなってるかにもよりますのでできなかったらすみませんです。

お礼

重ねてありがとうございます。

ブログは「はてなダイアリー」です。クセが強いと評判なのですが、記法とリンクが便利で使っております。これもはてな記法(ASIN:XXXXXXXXXX:image)の仕様なのかも知れません。

ですが、普通に同じ記法を使いながら画像は右寄せ、文章はそのすぐ左、と言ったところも見るので不思議です…。

なおIEはWindowsの7で確認しています。

回答No.1

Muller3

ブログによって記事作成のシステムが違うのではっきりとは言えないのですが、

＞HTMLでは自動でimgタグだけで前後が<p></p>で囲まれてしまいます
imgタグ前後で改行されてませんか？
多くのブログでは、改行が自動的に<br />や<p>に変換されてしまいます。imgタグと文章の間に余計な改行を入れずに記事を作成してみたら、CSSが有効になったりしないでしょうか？

お礼

ご回答ありがとうございます。

私の書き忘れなのですが、img後で改行はしておりません。imgタグが行頭に来ることはありますが、地の文の途中にimgタグを突っ込んで試してみても同様の現象が起きました…。