Home > Archives > 2008-04

2008-04

[CSS] IE6とIE7でのレイアウトの乱れ

Pocket

SOHOでのお仕事の発注依頼がありまして、カチカチと作業をしていまして、こんなところでつまずいてしまいました。

[dec]
li.list {
list-style-image: none;
list-style-type: none;
padding-top: 0px;
text-indent:-9999px;
font-size:0;
line-height:0;
float:left;
}

li.list a {
float:left;
font-size: 12px;
display: block;
height: 20px;
width: 220px;
background-color: #E8E8E8;
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
color: #666666;
text-decoration: none;
text-indent: 15px;
font-weight: lighter;
padding-top: 9px;
text-align: left;
line-height:normal;
}

li.list a:hover {
background-color: #848484;
color: #FFFFFF;
}
[/dec]

これはIE7では問題なく表示されるが、IE6で表示させてみると、思ったように表示されない。

[dec]
*html li.list a {
float:left;
font-size: 12px;
display: block;
height: 30px;
width: 220px;
background-color: #E8E8E8;
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
color: #666666;
text-decoration: none;
text-indent: 15px;
font-weight: lighter;
padding-top: 9px;
text-align: left;
line-height:normal;
}

*html li.list a:hover {
background-color: #848484;
color: #FFFFFF;
}
[/dec]

って書けば、IE6とIE7と同じように表示される。

しかし、W3CのCSS検証にかけると、*html li.list a:hoverとか*html li.list aは使っちゃだめです。っていわれる。
つまり、不合格なんですけど、どうすればこれを回避できるのか?というのが問題。

キーワードは、IE6 IE7 10px heightです。

IE6とIE7でheightとが10pxも違うっていうのは本当に困る。。。

同じ症状の人がいないか検索してみたが、
IE6で、マージンが2倍になってしまうバグ”を見てみたけど、
これは、margin-left: 10px;の設定が、IE6とIE7で表示すると、margin-left: 20px;に2倍になってしまうというバグ。

このバグとの症状と今回の問題点が異なるので、ちょっと自分でも考えてみようかと思う。

もしCSSのスペシャリストさんがいらっしゃったらご教授していただけると幸いです。

よろしくお願いいたします。

From xxxYukihiroxxx

Pocket

[Memo] Adobe Flash Playerプラグインをyumでインストール

Pocket

Fedora 8に入っているFirefoxのプラグインでFlashをインストールすると、失敗する。
成功する人もいるみたいだが、俺はダメだった。
だから、コマンドでインストールを試みた。

# yum -y install flash-plugin

これで問題無しです。

ちょっと仕事用のNotePCと自宅サーバー用のPCで回線速度のテストがしたくて
例のごとく、USENのスピードテストを使っているわけだが、やはり、WindowsとLinuxでは軽さがぜんぜん違う。
Linuxでは、20M前後は余裕。
Windowsでは、10M程度。

レジストリいじれば改善はされると思うが、ここまで違うとちょっとイラツク。
前まではしっかり速度出てたんだけどなぁ。。。

Pocket

[Flash] javascriptへ値を受け渡したい場合。

Pocket

HTMLの記述に
[dec]

[/dec]
そして、Flashの記述に
[dec]
var msg = “Hello”;
getURL(“javascript:call(” + “‘” + msg + “‘” + “);”);
[/dec]

これ重要です。…_〆(゚▽゚*)

From xxxYukihiroxxx

P.S
Javascriptで値を渡す場合もあるが、画面サイズを指定する場合もある。
しかし、IE7などのタグブラウザでは、新しい画面を開こうとするとサイズ関係なく表示されてしまいます。。。

Pocket

[CSS] アクセシビリティ — Accessibility

Pocket

アクセシビリティ — Accessibility

ここにも書かれているが、

■ バリアフリーを確立する
アクセシビリティを向上させるために、以下の点に留意しましょう。
・画像には alt属性を用いて、適切な説明文を記述する
・フォントの大きさは、相対値を用いて設定する
・ナビゲーションにアクセスキーを設ける
・フォームのコントロールにはタブキーを設定する
・font、b、u などの物理要素の使用を避ける
・スクリプトが実行できない環境のために、noscript要素を使って代替を用意する
・フレームを使用する場合には、noframes要素を用いて代替を用意する
・テーブルは、summary属性を用い、適切に変換できるよう配慮する
・テーブルのヘッダセルには abbr属性などを利用して情報を盛り込む
・文書情報を埋め込むヘッダ部に、文書の前後関係を明示的に記述する

今いろいろとHPを見てみると、HTML4.01が多く、しかもフォントのサイズまで固定というHPが多いのが目に付いた。
やっぱり、HPを作るからには、アクセシビリティも考慮した、XHTML+CSSのマークアップは当然だと考えていた。

しかしながら、うちはフォントのサイズを固定にしてください。という要求も多いのが原状。
HPを見に来る人のターゲット層を考えると、小さくした方がシンプルでいいのかもしれないが
やはりマークアップしていると、文字の大きさっていうのがかなり気になってしまう。
いや、配慮しているといったほうが正解かもしれない。

自分のオヤジも、デフォルトでパソコンの初期設定の時点で、全体のフォントを120%ぐらい大きくして観ている。
やはり小さいのが観にくいというのが素直な感想だった。

今はそういうPC全体でフォントのサイズを設定できる時代になったので(過去はなかったのでは?)
今後もこれは絶対に外せない機能でありつつも、HPへのアクセスしたときにどこに必要な情報があるのか?
というのも明示しなければならない。

ページの見栄えより、「障害者」のために、点字や音声ブラウザ、テキストブラウザなどの非視覚系ブラウザが存在し、
インターネットを身近なものにしています。
しかしながら、ネット上にある Webページが、それらのブラウザに対応していなければ、「障害者」の方たちは情報から疎外されてしまうことになりかねないので、マークアップそのものを大切にしていかなければならないと思いました。

From xxxYukihiroxxx

Pocket

[spam] スパムの標的に・・・。

Pocket

先日からいっぱいコメント残してくれる人が居るんですが、スパムのラッシュがやっとこさきましたね。
まぁこればっかりはBlogを公開している以上、しょうがないので、IPで規制してもいいのですが
スパムを送ってくる人はpoxyを変えてくるので、いっちもさっちも行かない状況なんですよね。。。

いい対策があればいいのですが、今のところ、調べていないので、出すすべなし状態です。

MTの方にも着てるし。。。

そういえばWPは設定するところあったっけな?コメント残せる為には名前とメールアドレスと・・・などなど。
けど、こんなのへっちゃらで乗り越えてくるので。。。

あーあ。

From xxxYukihiroxxx

Pocket

Home > Archives > 2008-04

Search
Feeds

Return to page top