CSS アンカーの画像の回りが色枠で囲まれてしまう

質問

<a>タグでリンクボタン（画像）を作りました。
ソースはこんな画像とURLを指定したのみです。
<a href="http://xxxxx/"><img src="/image/menu01.gif"></a>

ブラウザで見ると、画像の周りが青枠で囲まれてしまっています。
（一度、クリックすると赤っぽい色に、その枠の色が変わります）

既存のページを元にHTMLを作成しているのですが、たぶん、定義して
ある　CSS　or　javascript　などの設定ファイルが悪さをしているような気がしていますが、何が原因か分かりません。

そのHTMLに指定してあるCSSをコピペさせていただきますが、どこが原因か分かりますか？
そのほか、怪しいところがありましたら、ご指摘ください。

よろしくお願いいたします。

----style.css---
body
{
background-color: #ffffff;
background-repeat: no-repeat;
font-family: Arial, Verdana;
font-size: 14px;
font-style: normal;
font-weight: normal;
/* color: #333333; */
/* margin-top: 10px; */
/* margin-left: 10px; */
/* margin-right: 10px; */
/* margin-bottom: 10px; */
}

/* Style for in-page header of the generated rowset pages */
.pagehead
{
font-size: 16px;
font-weight: bold;
}

/* Table row style referenced in generated various generated pages */
.tablebody
{
/* background-color: #CCDDEE; */
color: #111111;
font-size: 14px;
text-align: left;
vertical-align: middle;
padding: 5px 10px 5px 10px;
}

/* Default grid header and footer style for generated rowset pages */
.gridStyle-tr-header,
.gridStyle-tr-footer
{
background-color: #CCDDEE;
color: #555588;
font-size: 14px;
text-align: left;
vertical-align: baseline;
line-height: 18px;
border-color: #999999;
border-style: solid;
border-width: 1px;
padding-left: 10px;
}

/* Grid base row default style for generated rowset pages */
.gridStyle-tr-data
{
background-color: #FFFFFF;
color: #111111;
font-size: 14px;
text-align: left;
border-color: #999999;
border-style: solid;
border-width: 1px;
padding-left: 12px;
}

/* Grid alternate row default style for generated rowset pages */
.gridStyle-tr-alt-data
{
background-color: #CCDDEE;
color: #111111;
font-size: 14px;
text-align: left;
border-color: #999999;
border-style: solid;
border-width: 1px;
padding-left: 12px;
}

/* Used for prompts in generated pages */
.prompt
{
color: #993333;
font-style: italic;
}

A:link, A:visited, A:active {
color: #7777AA;
text-decoration: underline;
}

A:hover {
color: #9999FF;
background: transparent;
text-decoration: underline;
}

----common.css---
body { color:#111; background-color:#777; margin:0; }
form { margin:0; }

a { color:#111; }
a:hover, a.Hover { color:#666; }

a.My { color:#25a; }
a.My:hover, a.MyHover { color:#58d; }

回答No.1

ra_ra_ra · ベストアンサー

<a href="http://xxxxx/"><img src="/image/menu01.gif" border="0"></a>

で枠はなくなると思います。

お礼

いけました！！
ありがとうございます。

ちなみに、何が原因だったんでしょうか？

回答No.5

ORUKA1951

(すべての)ブラウザの仕様です。
画像にリンクがある場合、もし枠がないとアクセスビリティ上不都合だから。
ところが、ディスプレイで閲覧してくるユーザー相手に、明らかにリンクがあると明白な画像の場合は、それを消すことができます。
CSSのどこかに
a img{ border:none;}
とどこかに書いておけばよいです。
　その場合、<img​>要素には、画像の読み込みを停止している訪問者、あるいは読み上げブラウザ、テキストブラウザ、サーチエンジンなどのために、altで適切な代替文字列を入れておきましょう。また、<a>のtitle属性でも・・

回答No.4

totomac

a img { border:0;}
で、良いんじゃないでしょうか？

回答No.3

tasoh

画像の枠に対しての指定が何もされていませんね。
CSSのどこかに
img{ border:none; }
を追加してください。

もしくは、HTMLで枠を消すのであれば
<a href="http://xxxxx/"><img src="/image/menu01.gif"></a>
↓
<a href="http://xxxxx/"><img src="/image/menu01.gif" border="0"></a>
としてください。

回答No.2

write_draw

<img src="/image/menu01.gif">

を

<img src="/image/menu01.gif" border="0">

にすれば消えると思います

お礼

いけました！！
ありがとうございます。