PukiWiki/1.4/ちょっと便利に/skinをテーブルレイアウトでなくするの履歴差分(No.4)

追加された行はこの色です。
削除された行はこの色です。
[[PukiWiki/1.4/ちょっと便利に]]

* テーブルレイアウトいやーん [#vaf0eb51]

#ref(no_table.diff)

**テーブルレイアウトを排除したときの注意 -- [[reimy]] [#j81bcf7c]
~テーブルによるレイアウトを排除した場合、Opera 6/7では正常に表示できない場合があるので注意しましょう。
~具体的には、
 <div>
   <div style="float:right"><!-- (B) -->
      ほげほげ
      ........
      ........
      ........
      へげへげ
   </div>
   <div><!-- (A) -->
      ほげらほげら
      ............
      ............
      <div style="clear:both"></div><!-- (1) -->
      へてらへてら
      ............
      ............
   </div>
 </div>
 <div style="claer:both"></div><!-- (2) -->
とあった場合、(1)にclearがあっても親ブロック(A)の外側にあるBブロックのfloatが解除されてはいけないのですが、Opera 6/7は解除してしまいます。
 |ほげらほげら|ほげほげ|
 |............|........|
 |............|........|
 |へてらへてら|........|
 |............|へげへげ|
 |............|
となるべきものが、Opera 6/7では
 |ほげらほげら|ほげほげ|
 |............|........|
 |............|........|
 |            |........|
 |            |へげへげ|
 |へてらへてら|
 |............|
 |............|
になってしまいます。
~Internet Explorer 5/6、Netscape 6/7、Mozillaでは親ブロック(A)の外側にあるBブロックのfloatが解除されることはないので、正常に表示されます。

~これで問題になるのは、本文とメニューバーをfloatで左右に並べているとき(テーブルレイアウトを排除した場合は、通常はこうなっているはず)、本文中でclearが現われた場合です。

~claerが親ブロックの外側のfloatまで解除してしまうOperaのバグです。
~clearが親ブロックの外側のfloatまで解除してしまうOperaのバグです。

~対策は左右を逆にする。floatを指定していない側のブロックにclearがなければ、Operaでも正常に表示できますので、左右のブロックを逆にすればよい。
~PukiWikiの場合、一般にメニューバーのブロックには原則としてclearがないので、本文のブロックを先に記述してfloatするとよい。つまり、メニューバーを左に置いた場合には上記の問題は発生しない。この場合、メニューバーよりも先に本文を記述することになるから、テキストブラウザや音声ブラウザのアクセシビリティも向上する。
 <div>
   <div style="float:right"><!-- (A) -->
      ほげらほげら
      ............
      ............
      <div style="clear:both"></div><!-- (1) -->
      へてらへてら
      ............
      ............
   </div>
   <div><!-- (B) -->
      ほげほげ
      ........
      ........
      ........
      へげへげ
   </div>
 </div>
 <div style="claer:both"></div><!-- (2) -->
***コメント [#v8e843a1]
-差分を当てると、注釈、添付ファイル一覧、アイコンメニュー、フッターなどがすべてメニューバーの右側に表示されてしまってます([[サンプル>しろくろのへや:PukiWiki]])。このページの下のように、これらはメニューバー・本文とは別に下に表示されるべき。 -- [[reimy]] &new{2003-12-24 (水) 13:38:50};
-差分はrelativeやabsoluteを使って強引に表示してますが、MenuBarや$bodyの大きさが不定であるPukiWikiの場合、この方法ではうまくいきません。上記に例示したように、floatとclearでやるほうが正しく表示できます。 -- [[reimy]] &new{2003-12-24 (水) 19:01:00};
-素人な質問で申し訳ないが、差分をどのようなコマンドで当てるのか教えていただけますか？よろしくお願いします。 -- [[zRyu]] &new{2004-06-26 (土) 18:07:07};
--patch を使います。see... [[pukiwiki:続・質問箱/23]] -- [[jjyun]] &new{2004-06-26 (土) 18:55:35};

#comment
PukiWiki/1.4/ちょっと便利に/skinをテーブルレイアウトでなくする の履歴差分(No.4)

PukiWiki/1.4/ちょっと便利に/skinをテーブルレイアウトでなくするの履歴差分(No.4)
