AX
カテゴリ:未分類( 13 )
【CSS】floatを指定した時にできる隙間
InternetExplorer(以下IE)で発生する不具合の話。
DIVタグやTABLEタグなどのブロック要素を横に並べて表示したい時に使える
スタイルシート(以下CSS)のfloat。

例えば、テーブル(表)を二つ並べたい時。
普通にTABLEタグを書くとTABLEタグはブロック要素なので
表示されるテーブルの前後に改行が発生する。

■ コード
<table border="1">
<tr><td>一個目のテーブル</td></tr>
</table>
<table border="1">
<tr><td>二個目のテーブル</td></tr>
</table>


■ 表示結果
一個目のテーブル二個目のテーブル

そこで、CSSでfloatを指定する。するとこうなる。

■ コード
<table border="1" style="float:left;">
<tr><td>一個目のテーブル</td></tr>
</table>
<table border="1" style="float:left;">
<tr><td>二個目のテーブル</td></tr>
</table>


■ 表示結果
一個目のテーブル
二個目のテーブル


というわけでめでたくブロック要素であるTABLEタグを横並びに表示することができたのだが、
IEでこれと同じことをしようとすると少しおかしなことになる。
というか、IE6で起こった話なのでIE6だけかも。

IE6でブロック要素にfloatを指定した場合、
floatを指定していない要素の間に謎の隙間が生まれる


つまり以下のようになる

■ コード
<table border="1" style="float:left;">
<tr><td>一個目のテーブル</td></tr>
</table>
<table border="1">
<tr><td>二個目のテーブル</td></tr>
</table>


■ IE6の場合の表示結果
(Safariで見た場合に見た目を再現させる書き方で表示しています。(つまり上記コードではないです))
一個目のテーブル二個目のテーブル

■ Safariの場合の表示結果
(上記コードそのまま)
一個目のテーブル二個目のテーブル

ということで、IE6でもSafariでも同じように表示されるように一番最初に書いた書き方が必要なことがわかった。
つまり、隙間を発生させたくなければとなり合うブロック要素全てにfloatを指定する必要があるということ。

仕事で使って、marginやpaddingを0にしても隙間が消えないからどうしたものかと悩んでしまった。
IEのバグにはいつも悩まされます。。。(==;
[PR]
by manodeldio | 2012-02-23 00:29
カレーパン〜♪カレーパン〜♪
〜戯れ言〜
ニンテンドーDS専用ソフト「おさわり探偵 小沢里奈」/2006年4月13日発売/希望小売価格4,800円(税込5,040円)
会社の友達が突然これを買うとか宣言してきた。
理由はこれに登場してくるキャラが自分の名前と同じでそのキャラクタが気に入ったとかなんとか。
んで、そのキャラを書いた人のサイトだと思われるウェブテントと言う名のサイトにカレーパンのうたなるものがあり、それもオススメらしい。

聴いてみた。

我輩はこーゆーの好きです。(≧▽≦)
曲が頭の中でぐるぐる回る〜

気に入ったが、ゲームは買わない(爆)

それにしてもニンテンドーDSは売れまくっているようで。FF3が出るらしいからそれに合わせて買いたいかもー。とりあえず、並ばないと買えないなら買わないわ。(^^;

[PR]
by manodeldio | 2006-03-04 02:24
Spymac移植計画
〜戯れ言〜
以前 使っていた SpymacのBlog。
最近は、Spymacがサーバを新しくしているのか、HPの更新もBlogの更新もできない。そんな中、未だに見てくれる人がわずかばかりいるようなので、少しずつこちらに移して行きたいと思います。

なんか、見て意味のある、人気のありそうな物から移植して行きます。(独断と偏見ですが。)

コピペだけなんだけど、毎日移植していくのは大変そうなので、ほんと少しずつやっていきます。(^^;

[PR]
by manodeldio | 2005-10-30 20:17
また運動不足か・・・(==;
〜戯れ言〜
前に書いた通り、平日のみならず休日までいろいろ予定が入ってジムに行く事のできない日々。
やっぱり運動不足が祟ってきましたね。身体はダルいし、眠いのに寝付きが悪いし。つか、再びまたかる〜く鬱なんですよ。(==;

原因は運動不足だけじゃないと思う。むしろ原因は運動不足じゃなくてストレス。それを運動ができないでいるから発散できずに鬱。
ストレスの原因は色々あるんですけどね・・・。

まぁ、とりあえず、運動したい。(==;

[PR]
by manodeldio | 2005-09-18 23:59
ZAKZAK
8/4 地震が起こるでしょう
「HPに記載されている情報はすべて直感的。話としてはおもしろいが、『8月4日』という日付に科学的根拠はない。的中した、といっても、関東で地震が頻発していることを考えると、範囲を広くすれば当たる」

とは、言ってもねぇ。カンだろうがなんだろうが当てりゃいいんよ。色々ハイテクを駆使してロクに当たらない天気予報よりは信用できるんでないかい?ヽ( ̄▽ ̄)ノ
[PR]
by manodeldio | 2005-08-02 23:58
nikkeibp.jp
上級者は「マイドキュメント」を使わない
あー、我が輩もWindowsではマイドキュメント使わないわ。だって、使いにくいんだもん。(爆)
そもそもWindowsのディレクトリ構造がわかりにくい。なんでマイドキュメントがこんな深い階層にあるんだよっ!!Σ( ̄Д ̄|||)

Macの方がいいッスね。というより、慣れてるし。UNIXベースだけあってディレクトリの構造も見慣れてる。というか、プロンプトとかターミナルとか使わない人にはどうでもいいことなのかも。(^^;
[PR]
by manodeldio | 2005-07-29 22:57
asahi.com

牛丼には勝てないってことか・・・。( ̄∇ ̄;)
ま、我が輩はマクドは好きじゃないし、最近行った記憶も・・・、あるなぁ(爆)

なんかみんなでマックシェイクを飲みに行ったわ。(^^;
[PR]
by manodeldio | 2005-07-15 23:58
AV Watch
キューブ型のポータブルMP3/WMAプレイヤ
どうせだったらスフィア(球)型にしてほしかったなぁ。ま、当分iPod使ってますけどね。
でも、この小ささはいいなぁ。
[PR]
by manodeldio | 2005-07-15 23:58
NETAFULL
STAR WARS ライトセイバー
STAR WARS エピソード3が観たくてしょうがない今日この頃。
とりあえず、ライトセイバーでも買って気分だけでも高めておこう!

はぃはぃ( ̄▽ ̄)=3
[PR]
by manodeldio | 2005-07-11 23:57
NETAFULL
都電貸し切り
安い〜!!のか?(==?
普通に電車乗る時の料金に比べて数倍に跳ね上がっとるやん。宴会会場としては安いかもしれないが、なんか納得がいかない・・・。(´・ω・`)
田舎の電車だったら普通に乗ってても貸し切りみたいなもんだったりする。最近はそうでもないが、前は湘南新宿線がめっちゃ空いてた。車両に10人乗ってれば多いって言えるくらい。ほぼ貸し切りですな。
[PR]
by manodeldio | 2005-06-30 23:58