Columbus Blog

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

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

2011.05.27 Friday 04:30

前回の続き。

せっかく全称セレクタによる指定でうまくいくかと思ったのに
事態はもっと悪くなってしまった。
ない知恵を絞ってみたが、どうも原因が分からない。

今回のケースで厄介なのは、いろいろ手段を講じても、
サーバにUPしてみなければ分からないということだ。
CSSの指定ひとつ変えてどうなるか検証してみるにも、
いちいちUPしてみなければ分からない。めんどうである。

ただひとつ、根本的な解決には程遠いのだが、
今回は、IEもFirefoxも、いずれもスペースが開いているということである。
つまり、それなら、邪道ではあるが、
下のナビメニュー全体のmargin-topをマイナス指定して
引っ張りあげてやる、というやり方がある。

しかし、これでは、UP前のテスト画面では
バナーとナビが中央で重なって見えてしまう。
でも、実際にUPして見える画面が、正しい画面なのだから、
気持ち悪いが、次善の策としては仕方がないところ。

やってみてUPしてみると、なんとかかっこうはついている。
しかし、こんなときにも、IEとFirefoxでは、
同じマイナスでも2から3ピクセルほどの狂いがでてくる。
これがなんとも気持ちが悪い。
どちらもこれならガマンができるか、という見え具合は、
margin-topがマイナス8pxあたり。

なんともすっきりしないが、これでやってみるしかないだろう。

一昨日だったかその夜は、寝ながらいつまでもこのことを考えていた。
なぜ、最初のテストでは全称セレクタ指定でうまくいっていたのに
コンテンツを全部修正したときに狂ってしまったのだろう?

いろいろグズグズと考えて、もしかしてこれが原因か?、
と思ったことを2つほど思いついた。

1.ナビメニューに<h4>を使用していること
2.ナビメニューをjsファイルで外部読み込みしていること

このあたりが、あやしいのではないかと思った。

<h1>〜<h6>などは、もしかして、margin: 0;指定しても
なにかしらスペースが付加されてくるのではないか?
そんな想像をしてみたが、きちんとmargin: 0;が生きている場合もある。

もうひとつのナビメニューをjsファイルに読み込んでいるというのは、
HTMLに書き込んだままにしていると、<h1>の直後に<h4>が来ることになり、
文法チェックではねられてしまうからなのである。
だから、jsにして隠したのだが、本来はよくない指定である。
それなら<h2>で記述すればいいわけだが、
その直後にくるサブタイトルのほうが大きなフォントであり、
それを<h3>にするのは美しくなく、なにかしら抵抗がある。
またそれぞれのコンテンツページで、ナビメニューはほとんど共通なので
やはりjsで短くひとつにして読み込みたくなる。

こんなことをとりとめもなく考えていたら、あることを思いついた。
jsファイルを生かし、かつ<h2>や<h4>のマージン、序列等を気にしないやり方。
つまり、ナビメニューを<p>のフロートにしたらどうなのだろう?

<p>でも要するに display: block;として、左フロートにしてやれば
問題ないように思える。
もともとこうしたCSS指定によるナビメニューの参考例で
<h4>などを使用していたからそのまま利用しているわけだが、
<p>でもOKなのではないだろうか?

もしかして、<p>でつくれば、マージンスペースも解決されるかも知れない。
そんな淡い期待をこめて、昨日、再度、実験してみた。

結果は上々。
marginのマイナス指定もすることなく、
UP前のテスト画面もUP後も同じ画面となった。
もちろん、IEもFirefoxなどすべてのブラウザもOK。
これで、永年の悩みも解消した。

教訓としては、jsにして読み込むにしても
<h1>の次に<h4>がくるような邪道の書き方はやめたほうがいいと思った。

結果としてまったく問題なく解決したが、
どこに誤りがあったのか、そもそもの原因はなにか、
依然としてよく分からない。

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

コメント

コメントする










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

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

トラックバック