2007年12月26日

YUIのCSSを使ったページのリンクをクリックした瞬間、デザインが崩れる(テキストのサイズが大きくなる)問題の回避方法がありました。

次の記事に記述があります。

IE でリンクをクリックするとフォントサイズが小さくなる - METAREAL

上の記事のあるように、YUIのcssを読み込んだあとで、次をcssに記述したところ、回避できました :-o

CSS:
  1. * {font-size:100%;}

関連記事
2007年12月7日

Yahoo! User Interface Library(YUI)を2.3.1から2.4.0にアップデートしたところ、textareaの幅が狭く表示されました(Firefox2.0.0.11)。
InternetExplorer6(IE6)では、textareaの表示に関しては、以前と同じように表示されます。

YUIのbase.cssをみると、textareaを次のようにしています。

CSS:
  1. textarea{width:12.25em;*width:11.9em;}

とりあえず、別のCSSで次のように定義し直して、テキストエリアの幅を大きくしました。

CSS:
  1. textarea {
  2. width: 90%;
  3. }

何か違和感があります(特にIE6)が、Firefox2.0.0.11とIE6では、テキストエリアが狭すぎることはなくなりました。

僕の使っているPCが不安定なのか、いつのまにかリンクをクリックした瞬間、デザインが崩れる(テキストのサイズが大きくなる)問題が再現しています(YUI2.3.1、2.4.0)。
YUIのホームページでも同じ現象がでるので、YUIの使い方が悪い訳ではないと思いますが・・・

参考リンク
関連
2007年10月1日

XHTMLに関して参考になるページへのリンクです。

XHTMLの基本

XHTMLの書き方と留意点
HTML/XHTML相互変換に関する記事

各HTMLバージョンのDOCTYPE宣言のサンプル集

HTML / XHTMLタグ一覧

XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語
XHTMLベーシック

DOCTYPEとブラウザの表示モード

DOCTYPEによるブラウザの表示モードの違いは、次のページが参考になりました。
!DOCTYPE スイッチ
DTD とブラウザの表示モード

ページの妥当性チェック

ページの妥当性チェックは、次のサービスがあります。
The W3C Markup Validation Service

Firefoxのアドオン「Html Validator」は、ページの妥当性チェックに便利です。
Html Validator :: Firefox Add-ons

Yahoo! UI LibraryのCSS

Yahoo! UI Library: Fonts CSS」に次の記述があり、互換モードもOKです。

Works in both "Quirks Mode" and "Standards Mode."

その他

XHTML+CSSにする55の理由 | コリス
XHTML、CSS を学ぶ時の 6つの間違い | WWW WATCH

XHTML Frequently Answered Questions(私的日本語訳) - Software Linkage

ants Lab. | その他 | XHTMLでの非推奨タグたち
XHTMLのタグ一覧