解決済
LDブログ:IE7で作った配置がsafariで崩れます。
ライブドアブログのデザインを作っていますがIE7で作って、友達のsafariで見ると配置が崩れています。
見ると全体的に定位置よりも下にずれておかしくなったり間延びしてる感じです。safariで試しにmargin-top: 0;に替えても位置が動かないので、safariではIE７で指定したmarginのマイナス指定/ネガティブ指定が効かないのかあと思っています。
いろいろ調べても出てくるのはIEのマイナス指定バグの話ばかりです。
ということはこの指定の仕方がIE特殊仕様に併せて作っているということなのでしょうか？
CSS:
.blogtitle{
margin:-40px 0 5px 20px;
#colabo_banner{
margin:-46px 0 6px 630px;
#bargain_logo{
margin: -45px 0 0 765px;
このmargin-topマイナス指定と#item_banner{
margin:75px 250px 0 0;
これがIEだともう少し真ん中に有ります。他のブラウザでもおかしくなっているでしょうか？
大概のブラウザでまともに見えるにはどのように指定すればいいでしょうか？お願いします。
※実験ブログなので、解決後過去ログとして検索して探し当てた人はもう他のデザインに変わっていて見れないかもしれません。
回答(2)
1.
一番気になったのがsite.cssの104行目
#cgmmenu ul {
のmargin-bottomが67pxと大きいのでブログタイトルなどを下に押し込んでいます。これを30px程度にすると上に引き上げられます。ブログのデザイン開発ではFirefox+Firebugなどを使えば分かりやすく開発できるのではないでしょうか。そのあとにIE対応のためのCSSハックを適用していく形です。
本当に色々ありがとうございました。IEのデバッカーまで紹介していただいて（ちなみに他ブラウザのものはないですかね？）
>margin-bottomが67pxと大きい
そこは弄ってなかったので盲点でした。
直して上に上がりました。
ありがとうございます。
2.
IE6ではひどいことになっているかも。。
レイアウト図を描いて、それぞれのブロック幅、マージン、回り込みとどこで解除せるかを決め、それに沿って計画的にCSSをコーディングするのがおすすめです。
気になった所をいくつか挙げると、、
一番基本的なところで、レイアウトにかかわるブロックにwidthと4方向全てのmarginを指定して下さい。
ここはブラウザのデフォルトに任せてはいけません。
・回り込みの解除
#bannerにclear指定がありますが、ブラウザで解釈が異なるのでやめた方がいいです。
初めのうちは回り込みの解除はbrタグにclearの指定をするのが無難です。
clear属性は非推奨なので、例えば
<br class="clear-all" />とクラスを割り当てて、CSSを
.clear-all { clear: all; }
とでもしてください。・clearされたブロックの下端に接するブロックの上マージンは無視されます(.blogtitle)。
これは質問文にある通り、無視されるのが正常な解釈です。
・高さ可変のブロックにheightを指定しないのが普通です(#container, #blogcontainer)。
敢えて指定している原因は↓の名残りでしょうか。今は違いますが。
・親ブロック内にフロートブロックが存在するときは、親ブロックが閉じられる前に回りこみを解除する。
そうしないと、親ブロックの下端がフロートブロックの上端まで縮みます。
CSSで指定した背景画像が出なかったり切れたりするときは、大抵縮んで消えた部分に背景があります。
・ブロックのセンター配置(#container)
親要素に対してセンター配置をしたいときは左右マージンをautoにします。
IE6ではこれが効かないので親要素にtext-align:centerを指定します(親要素のbodyに既に入っています)。
・親要素をの上にはみ出すマイナスマージン指定をすると、多分IE6でははみ出した部分が消えます(#right)。
これはoverflow:visibleだけではダメだったような。。
#rightを親要素の#blogcontainerに対してz-indexで上に持ってくる必要がると思います。
z-indexを使うために両者にposition:relativeを指定したり、ブラウザ互換がなかったり、その影響が他に及んだり、割りと面倒な所です。
あと、aタグのようなインライン要素の中にdivのようなブロック要素を入れるのは禁止されています。
>場当たり的に作った感じ
すみませんねｗでももともとのLDテンプレCSS梅花がおかしいんです。#bannerにclear指定も上の異様に大きいmargin-bottom設定もmarginそれぞれを指定したり指定しなかったり、paddingでやってみたりも。
>高さ可変のブロックにheightを指定しないのが普通です
>aタグのようなインライン要素の中にdivのようなブロック要素を入れるのは禁止
は知りませんでした。でもheight指定取ると上にずれるし画像が途中までで割れますね。heightの代わりにどう指定すればいいですか？div背景画像じゃなくてimgをちゃんと入れて対応しろということですね。でもそこは今のところ大丈夫そうですが対応してないブラウザはありますか？まあカッチリ最初からじゃないのでこんなグダグダですわｗ
コメント(16)
あと追加で
.blogtitleのmargin-topを0にして、float: left;を追加します。
#colabo_bannerのmargin-topを0にします。こんなところでどうでしょうか。
しょうがないから狐火を落としてきてIEと並べて色々弄くってます。またどうしようもならなくなったらHELP頼みます。
一応firefox3.5とIE７をにらめっこして大体近似位置にもってこれました。
ただ、firefoxにおいて
・もう少しcolabo_bannerを上に上げたい。
・bargain_logoの背景をIEのように靴の右面に合わせたい。
ができませんでした。
他のブラウザではどうでしょうか？これはひどいという表示になったブラウザがありましたら教えてください。
IE6では、結構くずれています。FirefoxやIE8でもIE7に比べて微妙にずれていますが、直すとなるとCSSというよりHTMLを直す必要がありそうです。
作り直しかorz
基本的にcgmmenuやblogtitleやdescriptionは普通に並べて、バナー類だけをpositionレイアウトで配置するほうが良いと思います。
テスト用のブログに作ってみました。
http://blog.livedoor.jp/tani_masaru-devel/
変更点としてはヘッダー部分をdiv#blogHeaderで追加で囲み、背景画像をセットしています。あとはcgmenuの高さをセットして綿紬の高さにそろえて、blogtitleの高さをセットして背景黒帯の部分の高さにそろえています。descriptionはpadding-rightをセットし背景画像を避けるようにしています。バナー3つはpositionを使って配置しています。とりあえずTOPページだけですが、参考にどうぞ。
フォント周りの設定に抜けがあるので、若干の見栄えの違いはありますが、IE6/7/8,Firefoxe3.5/Chrome/Safari/Operaで同じ配置になっているはずです。
ありがとうございます。色々勉強させてもらってます。
>>#8
を参考にしながら弄くってみました。
http://blog.livedoor.jp/jikken_1/
http://blog.livedoor.jp/jikken_1/site.css
IE7とfirefox3.5で合わせました。
table#headerもblogheaderに合わせたかったので合わせてみました。
本文上の帯は記事とサイドAにの上に来るのが意図なので背景はcontentinからwrapperへ移動しました。
>IE6/7/8,Firefoxe3.5/Chrome/Safari/Operaで同じ配置になっているはずです。
他のブラウザでも大丈夫そうでしょうか？
IE6でサイドカラム div#leftがカラム落ちを起こしています。
原因としてはIE6のバグなのですが、float指定した方向にmarginを指定するとmargin幅が倍になるというものです。対象となっている個所は2か所で
#content{
margin-top:20px;
margin-left:10px;
float:left;
width:485px;
text-align:left;
}
#contentin{}
#left{
margin:7px 0 0 16px;
float:left;
width:180px;
}
です。対応策としては、div#leftに関してはfloat:rightにすることで回避できます。div#contentに関しては、div#content {
float: left;
padding-left: 10px;
}
div#contentin {
width: 485px;
text-align: left;
}
のようにして回避できると思います。IE系のクロスブラウザ確認には「IE Tester」がお勧めです。これを使えばIE5.5/6/7/8と4種類のIEでの見栄えを確認することが可能です。
http://www.my-debugbar.com/wiki/IETester/HomePage
>>#12
の意図がわからなかったのでそのままにしておきましたが、そういうことですか。納得です。
ちなみにこちらのデザインは手伝っていただいて申し訳ないのですが、以前言っていたようにみんブロに公開することで商用で使わせていただきます(直接お金はとりませんが)。色々ありがとうございました。
http://knowledge.livedoor.com/41033
あと最後に
これは症状が出たり出なかったりなのですが、table#header内のニュース項目の部分が読み込みによっては位置が反映されず若干横に寄ったりほとんどmargin-left:0;ぐらいの位置にきたりします。これもバグなのでしょうか？
>>#14
以前の質問からみんなのデザインにアップするのだろうなと思っていました。
>>#15
こちらで再現しないので、正確な答えではありませんが、予想される原因はニュースティッカーの左にある「[PR]...」の部分にあるように思えます。これはJavaScriptでJavaScriptを読んで、それがdocument.writeで広告部分を吐き出しているのですが、この文字数などでティッカーが押し出されて、折り返されたり、位置がずれているのだと思えます。
