«  main | Comment  » 

対 WinIE ギブアップ宣言撤回。


前
のエントリは事実上のWinIEに対するギブアップ宣言 だったのですが、しらつきさん が救いの手を差し伸べてくれました。

WinIE や Opera、OmniWeb では BlogPage （mainページ）が画面の幅いっぱいに広がってしまい、スクロールバーで画面を左に持っていかないとナビゲーションバーを表示できなくなり、さらに下にスクロールしていくとエントリが右に少しずつずれていくという状態でした。

しらつきさんに原因を特定していただきました。
IEでおかしいのは、
div class="blogfooter"に対する
＜/div＞ の ＞ が抜けているからでないでしょうか？

＜/div になっています。

ということで、確認するとたしかに＜/div＞ の ＞ が抜けていました。
修正後プレビューすると WinIE や Opera、OmniWeb での幅の広がりがなくなり、エントリが下に行くほど右にずれていたのも直っています。これで、一番の問題点は解決です。

あとひとつはほぼ良好に見えるブラウザ（Firefox、Netscape、Camino) でサイドバーのレイアウトが下半分崩れていた問題です。

サイドバーのレイアウトは Google Search のあたりから崩れ始めていたので、いちどこれをはずしてプレビューしてみるとサイドバーのレイアウトの崩れはなくなっています。

やはり Google Search (自分で表示の仕方をカスタマイズしていた為）のコードが原因だったようです。

そこで、tauranさんから教えてもらった Another HTML-lintのgateway で Google Search のコードをチェックしてみました。

チェックしたのは下のコードです。
＜form action="http://www.google.co.jp/search" target="_blank"＞
＜center＞
＜table bgcolor="#b4ffc3"＞＜tr valign=top＞＜td＞
＜a href="http://www.google.co.jp/" target="_blank"＞
＜img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"＞＜/a＞
＜/center＞
＜/tr＞
＜tr＞
＜div style="font-size: small;" ＞
＜input type="text" name="q" size=" 18 " maxlength="255" value="" /＞
＜input type="hidden" name="hl" value="ja" /＞
＜input type="hidden" name="lr" value="UTF-8" /＞
＜input type="hidden" name="ie" value="UTF-8" /＞
＜input type="hidden" name="oe" value="UTF-8" /＞
＜input type="hidden" name="2coff" value="1" /＞
＜input type="hidden" name="inlang" value="ja" /＞
＜input type="submit" name="btnG" value=" Google " /＞＜br /＞
＜input type="radio" name="q" value=""/＞Web＜input type="radio" name="q" value="site:homepage.mac.com masatox Weblogs" checked="checked" /＞masatox Weblogs＜br /＞
＜/tr＞＜/table＞
＜/div＞＜/form＞

このコードで Safari や OmniWeb ではサイドバーは正常に表示されます。
エラーが多く出ていますが、それを見てもどう修正していいのかわかりません。
そこで、元のコードにある＜table＞、＜tr＞、＜td＞など、使い方がわからないので、これらをなるべく使わないようにしてコードを書き換えてみました。

これが書き換え後の Google Search のコードです。
きちんとサーチできています。見た目も以前と変わりません。
＜form action="http://www.google.co.jp/search" target="_blank"＞
＜div style="font-size: small;" ＞
＜input type="text" name="q" size=" 18 " maxlength="255" value="" /＞
＜input type="hidden" name="hl" value="ja" /＞
＜input type="hidden" name="lr" value="UTF-8" /＞
＜input type="hidden" name="ie" value="UTF-8" /＞
＜input type="hidden" name="oe" value="UTF-8" /＞
＜input type="hidden" name="2coff" value="1" /＞
＜input type="hidden" name="inlang" value="ja" /＞
＜input type="submit" name="btnG" value=" Google " /＞＜br /＞
＜input type="radio" name="q" value=""/＞Web＜input type="radio" name="q" value="site:homepage.mac.com masatox Weblogs" checked="checked" /＞masatox Weblogs
＜/div＞
＜/form＞
＜center＞
＜a href="http://www.google.co.jp/" target="_blank"＞
＜img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google"＞＜/a＞
＜/center＞
＜/div＞

このコードでサイドバーのレイアウト崩れがなくなりました。

なんとか、Win用のブラウザでの表示も以前に比べかなり改善できたと思います。

しらつきさん、tauranさんありがとうございました。

＊関連する記事
　WinIEで見ている方ゴメンナサイ。
　masatox Weblogs の推奨ブラウザ その２


Posted: Wed - September 15, 2004 at 12:30 AM              excite automatic translation:   
      |      |   |

Comment, Throw up comment to lower box. Thank you !
 対 WinIE ギブアップ宣言撤回。
 Trackback URL for this entry : http://haloscan.com/tb/masatox/E182302624


   «  main | EntryTop  »   
www.flickr.com
masatox's photos More of masatox's photos
⇧ 

Copyright © 2003-2008 , All rights reserved.