Columbus Blog

新発見日記。ただし発見の意味は広義・・・感想・愚痴もときどき・・・

不可解なマージンと全称セレクタ指定1

2011.05.26 Thursday 23:14

 HTMLのコーディングをやっていて、当初から現在でも不可解で
よく分からないことがある。
それは、主にブラウザのちがいによるマージンの差なのだが、
最近になって、CSSで最初に「全称セレクタ」の「*」指定で、
* {margin:0;padding:0;}
としておくと、ある程度、解決できることが分かった。

ところが、今回、この方法でうまく行くかなと思っていた修正が、
なんとも不可解なことになってしまった。
結果として、最終的には、うまくいったのだが、
自己流で学んだCSSで、基礎ができていないせいか、
うまくいったことの理由がいまも判然としていない。

その当初の問題とは、たとえばこういうケースである。
メインサイトのコンテンツに、上部に高さ150pxのバナー画像をおいて、
その直下に当該コンテンツのナビメニューを配置しているのだが・・・。
バナー画像とナビの間にスペースがないようにしたい。
当然、バナーのmargin-bottomを0としたり、
下にあるナビメニュー全体のmargin-topも0と指定する。

いままで「全称セレクタ」を指定していない状態で、
サーバにアップする前では、それがきちんと間にスペースなどなく、
バナーとナビがぴったりくっついて表示されている。
ところが、それをサーバにUPしたとたん、
実際のページでは、IEはOKなのだが、
なんとFirefoxでは、およそ10pxほどの空間がそこに入り込んでしまっている。当該画面
これがなんとも理解に苦しむ症状で、長い間、解決できないままになっていた。

およそ現在までに、UPする前のテスト画面とUP後に
こんなにも変化が出てしまうケースはこの現象だけでほかにはない。
これを修正する、あるいはそうなってしまう原因を知るということは
至難の技のように思える。

もしかして、「全称セレクタ」による指定が上記をclearしてくれるかも、
そう思って、実験してみることにした。
単純に外部CSSの冒頭に* {margin:0;padding:0;}
を入れ込んで、バナー部分だけの若干の修正をする。
自分のパソコン画面ではきちんとなっていてもUPするとダメなわけだから、
結果としてUPして確かめてみるしかないわけである。
コンテンツの細部はマージン等が消されて寸詰まりだがとりあえずUPして
上部の具合だけを見てみることにした。

なんと、Firefox OKである。
むろん、IEもOK。
FirefoxがOKなら、SafariもOperaもなんとかなる。

ああ、やはり、「全称セレクタ」指定をしなければだめだったのか。
でも、これで、解決できる。

コンテンツは7ページほどあるので、
「全称セレクタ」指定によるほかの<p>などのマージン等々も修正、
翌日、さあこれでOK、とばかりに7ページ一挙に更新。

さて、確認。ところが・・・。

!!!!!!!!

えーーーーっ、どうして?
目を疑うばかりの結果。

なんと、Firefoxは依然として前回のスペースが開いたまま。
そして驚いたことに、こんどはIEでもスペースが開いている!

これは、いったいどういうこと?
ほんとに頭を抱えてしまった。

以下、次号。

WEB関連 | comments(0) | trackbacks(0) | - | - |

コメント

コメントする










この記事のトラックバックURL

http://columbusblog.tanuki-bayashi.com/trackback/935496

トラックバック