別に大した事を書くわけではない。個人的な覚書き程度の事である。
ブログに画像を貼り付けた際に、画像がずれる、すき間が空く、と言った原因の解消法を書き留めておく。

スタイルシートには記述する順序があった

結論を先に書いてしまえば、IE（インターネットエクスプローラー）で表示する場合、スタイルシートに記述するスクリプトの順番を気にする必要は無い。htmlコードの記述を<body>～<div>～<p>～と階層通りに読み込み、htmlコードの階層の深い部分に存在するclassやidタグの指定を優先して表示させる。

しかし、FireFoxで表示させようとすると、そうはいかない。
htmlコードの階層よりも、スタイルシートのclassやidの記載順を優先して表示させるのだ。（後ろに記述したものから優先させて表示させる）

つまり、スタイルシートを作る際には、外側（bodyやコンテナ用のclass指定）を最初に書き、次にブログのように左、中、右とカラムを分けている場合には各カラムの指定をして、次にサイドバー、メインコンテナ等の指定、最後に各コンテナ内に配置する<div>タグや<p>タグのclass指定をしてやらないと上手く表示されないのだ。

昨日の作業

昨日ページランクやSEO的観点で、「オートリンクネット」と云うサービスが非常に有効な気がして登録をしたワケなのだが、オートリンクネットから貰ったhtmlコードをこのブログに貼り付けると、上手く表示されないのだ。

具体的に書くと、本文内では
スタイルシート画像タグ
のように表示され、

サイドバーには
スタイルシート、テーブル画像
の様に表示されるのだ。

原因は解っている。

オートリンクネットから配布されたhtmlコードはtableタグで構成されていて、私のブログはテーブルタグ、画像タグ共に、htmlコードに余分な記述をしなくても済むようにあらかじめスタイルシート（css）ファイルに以下の様な指定がしてあるのだ。

本文中にテーブルがある場合

.main table {
  border:1px solid #ddd;
  font-size:12px;
  line-height:130%;
  padding: 0.5em 1em 0.5em 1em;
  margin: 0 1em 0 1em;
  background-color: #efffff;
}

と言った感じに、（2008年1月16日現在では）テーブル内に余裕を持たせるように設定している。

サイドバーに画像がある場合

.side img {border: 0;margin:2px 1px;padding:2px 1px;}

といった感じに、画像同士がくっつき合わないよう、こちらも空間を挟むよう設定しているのだ。

という事で、オートリンクネットのhtmlタグを隙間無く表示させる為に、以下のスクリプトをスタイルシートに追加。

.pic {border:0;margin:0;padding:0;}
.pic table {border:0;margin:0;padding:0;}
.pic img {border:0;margin:0;padding:0;}

「pic」と云うclassを新たに作成し、html内でオートリンクのtableタグを<div class="pic"></div>で挟んでやったのだ。しかし、IEではスキマは消え正しく表示されるのだが、FireFoxでは正しく表示されない。

何故？と少しばかり調べてみたが、有効な答えに辿り着けず。
あ～でもない、こ～でもないと試行錯誤しててようやく発見。スタイルシートの記述には、実は順序があったのでした(；´ω｀)

おまけ

既知のお話なんでしょうが、私はこの件があって色々検索して、初めて知りました。

スタイルシート［CSS］/スタイルシートの基本/表示モードによる解釈の違い
ボックスのサイズ（width、height）を指定する場合、標準モードと互換モードで以下ような違いが発生するようです。

ボックスのサイズ

※この解釈の違いはIEとOperaで発生します。FirefoxやNetscapeでは、どちらのモードでも常に「標準モード」側の解釈となります。

標準モード … widthとheightで指定したサイズには、枠線やパディングを含みません。
互換モード … widthとheightで指定したサイズには、枠線やパディングを含みます。

例えば、width: 100px と padding: 10px が指定されたボックスの場合、ボックス全体の横幅は次のように変化します。

標準モード … ボックス全体の幅は120pxになります。
互換モード … ボックス全体の幅は100pxになります。

※標準モードでは、width: 100px に padding: 10px が両サイドに加わるので、ボックス全体の幅は120pxになるわけです。

ブロック要素のセンタリング

ブロック要素をセンタリングする場合、標準モードと互換モードでは次のような解釈の違いがあります。

※この解釈の違いはIEで発生します。Firefox、Netscape、Operaでは、どちらのモードでも常に「標準モード」側の解釈となります。

標準モード … 左右のマージンにautoを指定するとセンタリングされます。
互換モード … 左右のマージンにautoを指定してもセンタリングされません。

※互換モードでセンタリングさせたい場合には、親要素に text-align: center を指定します。

 

なるほど。。。。サイトのレイアウトを作る時にpaddingで各要素の間にスキマを作ると、ブラウザや表示モードによって解釈が違っていて、微妙な差が生じるワケですね。。。
IEとFireFox両方でサイドバーを落とさず、ギリギリの大きさでレイアウトしようと思ったら上記の知識が必要だったワケです。。。。またレイアウトを変更する時は参考にしようと思います。