スタイルシート問題

レイアウト問題


以前の画像ロールオーバーのメニューの方が私的には好みで見やすいとも思っていたのですが、画像転送の重さを考えて、先週(だったかな?)文字メニューに変更しました。……でも、やっぱり、文字メニューは寂しいよ〜。

そこで、今回は画像を使わずにスタイルシートを使ってボタンっぽいメニューに変えてみました。いかがでしょう?

ところが、又しても問題発生。私がスタイルシートを弄ると必ず問題が発生するんだな、これが(涙)

IEではまともに表示される画像が又しても他のブラウザでは綺麗に表示されない。何故、毎回私を悩ませる!<ネスケ

ひえ〜ん。理由が分かる方教えてください〜(涙)現在のメニューのリンク部分のCSSはこういう感じなのですが……。

a.m1:{
    width:140px;    fontsize:16px;
    color:#000000;  background-color:#d0ffff;
    border-style:outset;    padding-top:2px;}
a:link.m1{
    width:140px;    fontsize:16px;
    color:#000000;  background-color:#d0ffff;
    border-style:outset;    padding-top:2px;}
a:visited.m1{
    width:140px;    fontsize:16px;
    color:#000000;  background-color:#d0ffff;
    border-style:outset;    padding-top:2px;}
a:hover.m1{
    width:140px;    fontsize:16px;
    color:#ffffff;  background-color:#008080;
    border-style:inset; padding-top:2px;}
a:active.m1{
    width:140px;    fontsize:16px;
    color:#000000;  background-color:#d0ffff;
    border-style:outset;    padding-top:2px;}