既存のサイトでページ数が多いので、出来るだけ修正箇所が少なく実現できると助かります。
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;
}
--------ここまで---------
No.1
133
8
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の記述も多いので気をつけましょう
No.1
1338
ここでベストアンサー
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の記述も多いので気をつけましょう
できました。
どうもありがとうございました。
IEがいろいろと動作がおかしいというのは聞いていたのですが、普段IEしか使用していないので、
firefoxで自分のサイトを始めて見てびっくりしました。
No.2
7720
10pt
a要素はインライン要素なので、width指定が効かないのだと思います。
.menu中で以下のようにブロック要素への指定を明示的に加えてあげると良いと思います。
display: block;
どの箇所に違いがあるという点が具体的に書かれていないので推測ですが...。
7
6
1
1
できました。
どうもありがとうございました。
IEがいろいろと動作がおかしいというのは聞いていたのですが、普段IEしか使用していないので、
firefoxで自分のサイトを始めて見てびっくりしました。