LogJET

CSS + XHTML Airport

CSSで段組したらFirefoxで背景が出ねーよっ

というわけで、色々調べたり、実際にCSS書いたりしていたら半日かかった…。
参考までにどうぞ(というよりほとんど自分用)。

何か、これダメじゃないか?とか気になる箇所があったら指摘してください。

そろそろIE7のCSSの癖も覚えていかないと…
とりあえずネットスケープの古ーいやつはここからいける。(公式だが怒られそうなので"h"抜き)

  • ttp://ftp.netscape.com/pub/

Trackbacks
このエントリーのトラックバックURL
https://www.fsiki.com/m.new/t.cgi/417
FireFoxやsafariで背景が表示されないときの対処方法 from ネットショップ店長のWeb作成ノートps6.0

2008-10-09 0:54

Comments

script.aculo.usのSortable使って、float:left;なDIVをぐりぐり動かしてたのですが、ドロップ先の背景色がうまく表示されず、完全にあきらめてました。

ふとしたことで、displayを変更したら？？と重い
「css display inline-table」とかで検索してたらこのページを見つけかなりビンゴでした。

すっげー助かりました。

from ac : 2006-07-26 16:10

acさん
コメントありがとうございます。
現在リリースされているモダンブラウザでは一先ず問題なさそうなんですが、ハックを使っている関係上、できるだけ新しいブラウザが出たときはそのブラウザで確認することをお勧めします。

JavaScriptとCSSハックの兼ね合いも考えないといけないので、やはりCSSハックは最小限にとどめたいところですね。

from Fsiki : 2006-07-31 8:42

はじめまして
大変助かりました。
しかし、MacIE5では
overflowをvisible以外の値にすると
真ん中寄せがきかなくなってしまうようです

そこを目下調査中です。
ご報告までに。

from バング : 2006-12-22 18:28

バングさん、はじめまして、
訪問ありがとうございます。

私も調べて回ったのですが、なかなかそういった記事が見つかりませんでした。
ですが、ドンピシャな解決方法があるようです。

手元にMacが無いのであれこれテストができないのですが、上記ページで紹介されている方法で解決できるかと思います。
更にCSSは複雑になってしまいますが…。
おとなしくdisplay: inline-table;を使ったほうが楽かもしれませんね。

overflowを指定した要素を更に別の要素(divとか)で囲んでmargin: 0px auto;するって手もあります。

MacIEのためだけにdivを追加するのも「なんだかな～」ですが…

例えば

.x {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

でもだめでしょうか？
table要素の中央寄せはこれで解決できるんですが…。

私も、もう少し調べてみたいと思います。

from Fsiki : 2006-12-22 22:51

リンク先の通りにやったら出来ました！！ありがとうございます。
Fsikiさんの

.x {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

はダメです。
margin: 0px auto;と同じですよね。

#wrapper{
    width:760px;
    text-align:center;
    margin:0 auto;
    overflow: hidden;
    /* \*//*/
    position: relative;
    left: 50%;
    margin-left: -380px;
    /**/
}

#wrapper:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

/*\*/
* html #wrapper {
    height: 1em;
    overflow: visible;
}
/**/

これでうまくいくかと思います。
今のところ、
MacIE5.2,Safari1.3.2,MacFirefox1.5.0.8,MacOpera8.5,MacNetscape 7.1
WinIE7.0,WinFirefox2.0.0.1,WinNetscape 7.1
で大丈夫でした。（バージョンバラバラですけど。。）

from バング : 2006-12-25 17:09

バングさん

私もMacIE使ってあれこれ試してみました。
バングさんのコードを使って、うまくいきました。

で、一点問題が確認されまして…
どうやらネガティブマージンを使用している都合上、ウインドウ幅がコンテンツ領域よりも狭い場合に、コンテンツ領域がウインドウから左にはみ出しスクロールできない状態になってしまうようです（はみ出している部分が閲覧できない）。

あれこれCSSを触ってまわったのですが、どうにも解決策がわかりませんでした。

非常に悩ましいです。
やはり、センタリングするボックスに関してはdisplay:inline-tableを使うのが賢明なのかもしれません…。

MacIE恐るべし…ですね…。
何か解決策が見つかれば、またここに書きます（自信ないですが…）。

from Fsiki : 2007-01-06 2:49

以前からこの問題がよく出てて、Firefoxむかつく～！なんて思ってたのですが、なるほどね。今回背景色が重要なページを制作していて、この対応に約2日かけたのですが、なかなか思うとおりにいかなくて・・・。
そんなときにこのサイトを見つけ、わらにもすがる思いで試してみたら、、、「ウォーーーー！」万事解決♪本気で涙が出そうになりました！今も涙目。情報ありがとうございます。

＋情報として、IE対策ではwidthを指定していればIE対策をしなくても表示に問題なかったです。（FirefoxとIEで表示されるサイズは違ってきますが。）

from Toshi : 2007-02-16 11:10

IEとMozillaとの表示の違いに毎回四苦八苦しておりました。
貴重な情報を公開していただき、大感謝です。

ですが、最終回答をIE6.0.2で拝見すると、
やはり背景から内容(leftBoxとrightBox)が溢れてしまっています。
他の方はバッチリ見えているのでしょうか？

from Taka : 2007-09-26 19:19

Takaさん、コメント&ご指摘ありがとうございます。
確認してみたところ、確かにWindows IE6でボックスから内側のボックスがはみ出していました。

ページに適用しているCSSを確認してみたところ、記述に誤りがあり、それが原因で崩れているようでした。
以前はちゃんと見えていたのですが、恐らくこちらのアップロードミスで誤ったファイルをアップしてしまったようです。

ページに書いている記述では、問題なく表示できると思いますのでご安心ください。
ファイルは修正した後、改めてアップいたします。

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

from Fsiki : 2007-09-28 17:48

貴重な情報をわかりやすく公開していただきありがとうございました。FireFoxで背景が表示されずに戦っていた時ページを見つけ、内容を適用したら発解決でした。

おかげさまで短時間で問題解決できました。ありがとうございます。

from PS60 : 2008-10-09 0:57

こちらこそご参考にしていただきましてありがとうございました。
お役に立てて何よりです。

from Fsiki : 2009-01-31 10:42

いつもブログ拝見しております。

上記運営ブログにて貴サイトの記事を引用させてもらいましたのでご報告とお礼を兼ねてコメントさせて頂きます。

有用なTipsを惜しげもなく公開して下さり、感謝しております。
今までのfloatの悩みが一気に解決しました。

ありがとうございました。
これからも拝読させて頂きます。

失礼します。

from ヌコ : 2009-10-15 0:44

悩んで、悩んで、悩んで、こちらのサイトへ辿りつきました。
今まで悩み苦しんだ事が一瞬で解決しました。

本当にどうもありがとうございました。

from キウイまろん : 2011-10-23 9:15

入力情報を保存しますか?
(書式を変更するような一部のHTMLタグを使うことができます)

Copyright © 2005-2006 - Fsiki