TagCSS

tdにAJAXで読み込む時

タグ: tally | Firefox | ajax | CSS
tallyを作ってて苦戦したことのメモ

テーブル(table)のセル<td id="tako"></td>にajaxで何かを読み込む時、Firefoxでセルがずれる場合がある(ずれたりずれなかったりするのでよく分からない)。

解決策
<td><div id="tako"></div></td>
とする。

tallyの場合、
<td><div id="tako" ondblclick=""></div></td>
のように、セルのダブルクリックでフォームを登場させている。
これだとセルが空欄の時、IEで反応しなかったりする。
それは、
td div {_width:100%}
みたいなCSSで回避。

ところで、IE7では<tr>にスタイルを指定できるようになってるのかしら?

Opera、GoogleMapsで変なスクロールバー

Opera(Win ver9.1) でGooglemapsをぐりぐり動かすと妙なスクロールバーが登場して、ちょっと鬱陶しかったのです。

maps.google.co.jpでは出ないので何かあるのだろうとは思っていたのですが、CSSで解決しました。mapの領域に

#map {
  position:relative;
  overflow:hidden;
}

こんな感じで指定します。

今日知ったCSS

タグ: CSS
html, body {overflow:hidden}
とか。これを指定しておくとスクロールバーが出ない。(W3Cを指定している場合は、htmlにも指定するのがミソ )

overflow
ブロック要素にスクロールバー。
scroll , hidden , auto

IEには、
overflow-y や overflow-x
がある。

ブロック要素は、
position:relative
を入れておいた方がよいみたい。
そこに動的に読み込むとIEではみ出たりする。

li:hover

タグ: CSS
うすうす気がついていたのだれけど、IE6で li:hover が機能しないのですね。
で、
http://www.hedgerwow.com/360/dhtml/c...
が話題になってるのかな。

karasuのタブメニューも、IEでは、オンマウスで色が変わっていなかった。微妙だから気がつかない程度なんだけど。

traintrainは、Wii風でいこっと。

IEのCSSって、いろいろやっかいあるなあ

タグ: CSS
selectタグにz-indexが反映されなかったり、
フォームの中に長いテキストが入ってるとひろがっちゃったり。
http://www.zspc.com/documents/css2/b...
これをなんとかしたいと調べてたんだけど、いいや。
IE7でも同じ。

W3Cの呪文とheight:100%

タグ: web | html | CSS
W3Cとか良く知らないのですが、ソースのトップに、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm... ">

と書いてみたりしています。

で、たまにそれが引っ掛かって意図通り表示できないことがあります。

可能ならば、W3Cの仕様書に則ってる方が良いとは思うので、まずは調べます。

今回引っ掛かったのは、height:100%です。例えば、

ポストマップの全画面表示
http://postmap.org/?mode=full

では、#mapにスタイルシートで100%を指定しています。これを作った頃はW3Cの呪文を記述してなかったのでうまく表示できているのですが、呪文を書くと地図が表れません。

さて、解決法。

html,body{height:100%;}

を書く。


参照ページ:
Web標準普及プロジェクト>Web標準化Tips>height: n%;の正しい仕様

可変レイアウト(table-row)

タグ: CSS | web
可変レイアウトで調べていたら、

スタイルシートスタイルブック
というページにあたり、そこから

template:css
というサイトへ。

可変レイアウトで苦労するのは、winIEでfloat指定だと下に落ちることなのですが(これの好みはそれはそれであるとは思うのですが、blogで下に落ちるとすごく下になってしまうので、それはいまいちだと)、下記のテンプレートのCSSにdisplay:table-rowなんていう属性があり...

3 Column CSS Layout a work in progress»

と書きながらVirtualPC7でせっせとテストしたら、落ちました。

あ、前提として、可変ウインドウで、右にナビゲーションが好きだということがあります。

この機会に、いろいろブラウザをインストール。(Safari,Firefox,WinIE以外)

Macintosh
・Opera8.54
・Netscape7.1
・InternetExplorer5.23

Windows
・Opera8.54

さらに、この機会にブラウザ統計をリサーチ
ポストマップのブラウザ統計(2006.4)

で、表題のtable-rowは、MacのIE以外は動くので、もう使ってよいレベルなのですね。まあでも、挙動はfloatとそう変わらないから(縦の長さの統一は良いかも)、無理して使うこともないや。各ブラウザに対するテクニックは少々必要なようですし。

9wa.orgのデザインメモ

右上ログイン関係:del.icio.us

サイドバー:nucleusのデフォルト

に胡椒を振りかけただけ。

半角英数字をずらずら横に並べると、WinIEで、サイドバーが下にいく。回避策を半日かけて検討したけど挫折。たぶん、サイドバーを左にすると安定しそうだけど、ナビゲーションは右にあった方がマウスが画面を横切らないので良い気がする。スクロールバーが右側というのも、そういう論拠からだと思うし。

Safariだとヒラギノ丸ゴのボールドが勝手に角ゴなるので、Firefoxで見るのと印象が違う。べつにいいけど。いずれフォントの調整もしよう。
← | 1 | →