人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

firefoxでもIEと同様に表示させたいのですが、どう変更したらいいかわかりません。
既存のサイトでページ数が多いので、出来るだけ修正箇所が少なく実現できると助かります。

test.html
--------ここから---------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="default.css" type="text/css">
<title>テスト</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><a href="test1.html" class="menu">テスト</a></td>
<td align="center"><a href="test2.html" class="menu">テスト</a></td>
</tr>
</tbody>
</table>
</body>
</html>
--------ここまで---------

default.css
--------ここから---------
.menu{
background: #eeeeee;
width:150px;
height:28px;
padding-top:5px;
border: solid 1px #0000ff;
text-decoration: none;
color: ##c0e0ff;
Font-size: 12pt;
}

a.menu:hover{
background: #c0e0ff;
width:150px;
height:28px;
padding-top:5px;
border: solid 1px #0000ff;
text-decoration: none;
color: #ffffff;
Font-size: 12pt;
}
--------ここまで---------

●質問者: z16a
●カテゴリ:インターネット ウェブ制作
✍キーワード::hover background border COLOR CSS
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● komorebi
●100ポイント ベストアンサー

結論から言うと、IEの表示が本来間違いです。


原因としては、a要素は“インライン要素”という部類に入るので、

「幅(width)」や「高さ(height)」を設定しても無効です。


なので、「IEの表示のようにしたい」のであれば、

a要素を“ブロック要素”に一時的にCSSで変更しなければいけません。


具体的には、a要素に対して「display:block;」のルールを追加すると幅と高さが生まれます。


a.menu{

display:block

background: #eee;

width:150px;

height:28px;

padding-top:5px;

border: solid 1px #0000ff;

text-decoration: none;

color: ##c0e0ff;

font-size: 12pt;

}

a.menu:hover{

background: #c0e0ff;

color: #fff;

}


また、「Font-size」は、全て小文字で記述しましょう。

無駄なCSSの記述も多いので気をつけましょう

◎質問者からの返答

できました。

どうもありがとうございました。

IEがいろいろと動作がおかしいというのは聞いていたのですが、普段IEしか使用していないので、

firefoxで自分のサイトを始めて見てびっくりしました。


2 ● tmasao
●10ポイント

a要素はインライン要素なので、width指定が効かないのだと思います。

.menu中で以下のようにブロック要素への指定を明示的に加えてあげると良いと思います。

display: block;

どの箇所に違いがあるという点が具体的に書かれていないので推測ですが...。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ