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;
}
--------ここまで---------

回答の条件
  • 1人2回まで
  • 登録:2008/04/28 12:48:40
  • 終了:2008/04/28 13:31:40

ベストアンサー

id:komorebi No.1

komorebi回答回数133ベストアンサー獲得回数82008/04/28 13:17:47

ポイント100pt

結論から言うと、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の記述も多いので気をつけましょう

id:z16a

できました。

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

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

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

2008/04/28 13:30:20

その他の回答(1件)

id:komorebi No.1

komorebi回答回数133ベストアンサー獲得回数82008/04/28 13:17:47ここでベストアンサー

ポイント100pt

結論から言うと、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の記述も多いので気をつけましょう

id:z16a

できました。

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

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

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

2008/04/28 13:30:20
id:tmasao No.2

tmasao回答回数76ベストアンサー獲得回数202008/04/28 13:21:57

ポイント10pt

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

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

display: block;

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません