メニューや見出しなど、表示項目を文字ではなく画像にしたい場合、text-indent:-9999pxでテキストを表示させなくします。
例えば、
h1 {
width:116px;
height:31px;
padding:0;
background:url("img/logo.gif") 0 0 no-repeat scroll;
text-indent:-9999px;
display:block;
}
h1 a {
width:116px;
height:31px;
padding:0;
background:url("img/logo.gif") 0 0 no-repeat scroll;
text-indent:-9999px;
display:block;
}
こういう感じに使います。
ところが、今日やっていた案件で、text-indent:-9999pxが効かない。
h3 {
width:111px;
height:31px;
padding:0;
background:url("img/info.gif") 0 0 no-repeat scroll;
text-indent:-9999px;
display:block;
text-align:right;
}
h3 a {
width:111px;
height:31px;
padding:0;
background:url("img/info.gif") 0 0 no-repeat scroll;
text-indent:-9999px;
display:block;
text-align:right;
}
しばらく悩んで、text-align設定を取り除いてみたら、直りました。
どうしても画像をrightに寄せたいので、h3に右寄せの属性を持たせてみたり、非推奨ですが、div alignで指定してみたり、それでもダメだったので、class属性でrightに寄せてみようとしたりしましたが、どーやってもダメでした。
text-indentとtext-alignは決定的に同居できないようです。
困りましたが、どうにかしないと。午後ゆっくり考えます。
12:22追記。
解決しましたー。float属性で右に寄せたらいいんじゃん!バカですね私。
というわけで、
h3 {
width:111px;
height:31px;
padding:0;
background:url("img/info.gif") 0 0 no-repeat scroll;
text-indent:-9999px;
display:block;
float: right;
}
h3 a {
width:111px;
height:31px;
padding:0;
background:url("img/info.gif") 0 0 no-repeat scroll;
text-indent:-9999px;
display:block;
float: right;
}
と、したらすっきり右寄せ。
さー、午後の仕事頑張るぞー。