** CSS とひたすら格闘 [#v5940c20] #ref(../rural_yn02h.png,nolink,もう Firefox なんてしらないっ!) 今度は[[汐碕市のサイト:http://www.city.shiosaki.nagano.bz/]]を [[MODx:http://modx.jp/]] で組んでみているのだが…… Firefox さんがワガママですよ? でも Google Chrome で見ても同じ現象なので、ボクの組み方の方が明らかに悪いのだろう。それはもう認めるしかない。 div#main というスタイルの中に、いろいろ配置しているのね。#sidebar とか #contents とか。 <div id="main"> <div id="sidebar"> ここにいろいろサイドバー関係 </div><!-- sidebar --> <div id="contents"> ヘッダ関連 <div id="article"> 記事とかいろいろ </div><!-- article --> </div><!-- contents --> </div><!-- main --> まー、簡単な構造的にはこんな感じ。で、main には border : 1px solid #66315d; が設定されている。IE で見ると、sidebar や contents、article をすべて main 包み込んでくれる。つまり、sidebar, contents, article すべてを囲んだ border が表示される。ところが Firefox や Google Chrome ではなぜか main はその下の sidebar の手前で終熄してしまうのだ。だが、それは border だけで、座標位置などは main にそって配置されているので、一応入れ子になっているのだろう……。&br; まー、簡単な構造的にはこんな感じ。で、main には border : 1px solid #66315d; が設定されている。IE で見ると、sidebar や contents、article をすべて main で包み込んでくれる。つまり、sidebar, contents, article すべてを囲んだ border が表示される。ところが Firefox や Google Chrome ではなぜか main はその下の sidebar の手前で終熄してしまうのだ。だが、それは border だけで、座標位置などは main にそって配置されているので、一応入れ子になっているのだろう……。&br; う~ん?? border の指定の仕方が不味いのか?? まー、ボクの事だ、なんか単純なミスをしているのだろう……。&br; とりあえず無視することにした<ヲイ&br; ということで、Firefox や Google Chrome では(そして恐らく Opera や Safari でも)全体の枠が表示されない……orz もう一つは IE のバグらしいのだが、1 ドットの設定で IE と Firefox でレイアウトが変わる。&br; 座標系が 0 からか 1 からかの違いなのかなぁ~?<奇数値の除の問題っぽい?&br; どういうことかというと、汐碕市のサイトは幅 750 ドットで作られている。で、左のサイドバーと右のコンテンツに別れている。サイドバーが 160 ドット、コンテンツが 590 ドットとなる。で、IE だとこいつを 589 に設定しないとレイアウトが崩れる(サイドバーの下に来てしまう)。Firefox では大丈夫。じゃぁ 589 にすればいいじゃんって話になるんだけど、そうなると Firefox ではサイドバーとの間に 1 ドット隙間ができてしまうのだ。 うもー! まぁこれはたまたま一番上に配置するものだから、絶対座標で回避はできるけどさ……正直なんなのよ、と。 というわけで、ボクはいまだに Table でレイアウトをするクセが抜けない(笑)<笑い事じゃない というわけで、ボクはいまだに Table でレイアウトをするクセが抜けない(笑)<笑い事じゃない&br; ところで、来月か再来月にサーバ・マシン入れ替える予定なのに、こんなにいろいろ組み込んじゃって……ちゃんと移行できるんだろうな??(汗) > ''追記''&br; 上の 1 ドットのズレだが、top でムリヤリ座標指定では解消されなかった。absolute を指定すると解消されるが、absolute では左からの距離もブラウザの左端からになってしまい、今回のレイアウトでは使えない(Sidebar が左端に準拠していれば使えた)。&br; で、どうやって回避したかというと、スタイルシート定義の先頭行に > をつけると IE だけはそれを読むらしい(笑)。というわけで IE 用の定義を本定義のあとに書いて回避した。IE 用を本定義の前に書くと、IE が IE の定義を読み込んだあと本定義を読み込んでしまうので注意。&br; width : 589px; > width : 588px; /* IE 用 */ ** 餃子市 [#f6de49e7] 夜は餃子市に行ってきた。味とかのレビューは過去の記事を見てくれい。 -餃子市の過去の記事 --[[2009.05.23 初めての餃子市>../2009-05-23#b71b6dba]] --[[2009.06.02 初めて写真を撮る>../2009-06-02#hab2e407]] --[[2009.07.07 珍しいメニュー>../2009-07-07#df17ecfb]] --[[2009.08.30 写真いろいろ>../2009-08-30#d571f119]] --[[2010.02.20 食べ過ぎです>../2010-02-20#r64c6d45]] --[[2010.07.03 サンツァイとシャンツァイ>../2010-07-03]] ショックだったのが、なんと来年の 1/1 から、営業時間縮小で AM2 時まで(ラストオーダー 1:30 )になってしまうことだ。帰り際に聞いたら、金・土・日以外の深夜はやはり客入りが余りよくないらしい。うーん、いつも繁盛しているように見えるんだけどなぁ。&br; 嬉しい(?)ニュースは、食べ放題を始めたことだ。2280 円で 70 品目だったかな? すべてのメニューではないが、ほとんど頼めるので、これはこれでイイかもしれない。 |CENTER:|CENTER:|CENTER:|c |&ref(101212DSCF1151.jpg,,25%);|&ref(101212DSCF1152.jpg,,25%);|&ref(101212DSCF1154.jpg,,25%);| |BGCOLOR(#D0D8E0):上海焼きそば|BGCOLOR(#D0D8E0):野菜湯麺|BGCOLOR(#D0D8E0):シメジの山椒炒め| |&ref(101212DSCF1149.jpg,,25%);|&ref(101212DSCF1157.jpg,,25%);|&ref(101212DSCF1145.jpg,,25%);| |BGCOLOR(#D0D8E0):蝦のマヨネーズ和え|BGCOLOR(#D0D8E0):トウモロコシのサクサク揚げ|BGCOLOR(#D0D8E0):食い放題始めたらしい| #article |