- ベストアンサー
IEでの”a img”の枠線について
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
ANo.1です。 javascript:void(0)は、今回直接関係ありません。 javascript:void(0)としておくと、何もアクションを起こさないので、テストすることができます。(つまり他のページへ移動することなく確認ができるということです)
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
>border-style:none;にしているので、通常は枠線が表示されないのですが、 何に対して設定しているのかによりますが・・・ a img{border:none;}/*リンクのある画像は枠線をつけるのがデフォルトなので */ a:link,a:visited{border:none;}/* 以下a要素に関する枠の指定 */ a:focus,a:hover{border:none;} a:active{border:none;} とでもしておけばよいでしょう。擬似クラスが設定してある部分は詳細度が同じなので順番が大事です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
a img{border:none;}/* 詳細度2 */ これだけでだめなら /* 擬似クラスは下記順番で */ a:link img{border:none;}/* 詳細度12 */ a:visited img{border:none;}/* 詳細度12 */ a:focus img,a:hover img{border:none;}/* 詳細度12 */ a:active img{border:none;}/* 詳細度12 */ 要はデフォルトのスタイルシートより詳細度を上げておけばよいかと思います。
- outbrave
- ベストアンサー率60% (231/380)
フォーカスリングのことだと思います。 <a href="javascript:void(0);" onfocus="this.blur()">test</a> アンカータグに、onfocus="this.blur()" を追加 または、 a:focus {outline: none;} スタイルシートで上記を追加、こちらはIE8以降のみに適用されます。
関連するQ&A
- css:リンク画像の枠消し: a img { border:none} にしてもダメ
リンク画像に、【テキストリンクと同じスタイル】つまりリンクの背景色や枠線が適用されてしまい、困っています。 下のように、entry-bodyというクラスの a を打ち消す a img のスタイルを指定しているのですが…。(色番号は長くなるので#だけにしています)a:visited img や a:hover img も同様に指定しています。また、.entry-body img には、他のスタイル指定をしていません。 どなたかお分かりになったら助けてください! .entry-body a { color:#; background-color:#; border-bottom:1px #;} .entry-body a img { background-color:transparent; border-bottom:none;}
- ベストアンサー
- HTML
- リンクで包括している画像とテキストの周りに枠線を表示させたい
例えば画像だけにリンクしているなら枠線は画像の周りに表示されるのですが、 画像の下にテキストを置いて、その2つをリンクで囲むと、 テキストだけに枠線がかかるようになり、ちゃんと画像とテキストの周りに枠線が表示されません・・・ 理想としては次のようなかんじにしたいのですが、どう記述すればよいのでしょうか? ┌──┐ │画像│ │文字│ └──┘ <a href="画像へのURL" style="border: 1px solid rgb(51, 204, 255);"> <img src="image.jpg"><br>文字 </a> ↑ これだと枠線が画像とテキストを囲んでくれない
- 締切済み
- HTML
- 画像の枠線に色をつける方法を探しています。
画像の枠線に色をつける方法を探しています。 現在無料HP作成サイトでHPを作っているのですが、ポップアップウィンドのjavascriptを設定したところ 画像の枠線が消えてしまいました。 入力したのが↓です。 <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> border="1"になっているのに表示されないんです。 色がついていないのか。枠線自体が表示されていないのか。分からず、 調べたところ、色をつけるにはスタイルシートを指定し直接書く方法があるとのことで style="border:solid 5px #000000" をつければ色をつけられるという事を発見しました。 それで、下記のように入力したところ <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" style="border:solid 5px #000000" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> 枠線が太くなって表示されました。 どう書けば枠線を表示できるのでしょうか。 希望はborder="1"の時の太さがいいです。 HP作成初心者なのでタグがめちゃくちゃだと思います。色々なサイトから引用したため。 勉強不足で申し訳ありません。 よろしくお願いします。
- ベストアンサー
- HTML
- <br />が3つ続くと<img>が表示されない・・・IEのみ
XHTML初心者です。 初めてXHTMLでサイトを作っています。 問題(1) <br /><br /><br /><img class="style_a" 略 /> 行をあけるため<br />を連続3つ使うと、その直後の<img>が表示されません。 したがって、思うような位置に画像を入れられないのですが、どうしたらよいでしょうか? IEだけがそうで、FIREFOX、OPERAでは問題なく表示されます。 ちなみに<img>のclass="style_a"を外すとIEでも表示されます。 問題(2) また、一行空けたいときに<br /><br />と入れると何も変わらず、<br /><br /><br />と3つ続けると一行空きます。 これもIEのみの現象です。 私のIEの設定がおかしいのでしょうか? 教えてください。お願いします。
- ベストアンサー
- HTML
- IE <a>要素の上にimgを置くと
<a>の上にimgを置きたいです。 以下の様に書きました。IE以外は赤のBOXの上でもimgの上でも リンクが生きてます。 でもIEはimgの上ではリンクが機能しません。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> a { display: block; background-color: red; width: 300; } </style> </head> <body> <a href='javascript:alert(0);'> <div style="position: relative; height: 300"> <img src="hoge.jpg" style="position: absolute; top: 50; left: 50"'> </div> </a> </body> </html> どうしたらIEでも期待した結果を得られますでしょうか? 以上、ご指導の程、宜しくお願いいたします。
- ベストアンサー
- CSS
- 枠線を消したい
こんにちは、honiyonです。 JSで文章の一部を可変にしたいと考えています。 文章全体をJSで出力するには量が大きすぎる為、テキストボックスを対象の場所に配置し、そのテキストボックスの内容を変更する事で対応しようと考えています。 ただし、文章の所々にテキストボックスがあるのは見た目的にヘンです。 なので、テキストボックスの背景を白にして、枠線も消してしまえば完全に文章に馴染むのでは、と考えました。 そこで、 <INPUT type="text" name="moji1" style="border-style:none"> と定義してみたのですが、枠線が灰色で残ってしまいます。 完全に枠を撤廃する事は出来ないのでしょうか? 尚、これはIEではなく、Operaで動作する必要があります。 宜しくお願いします(..
- ベストアンサー
- HTML
- CSSで枠線の太さを変えるとき
CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが1pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします(CSSは初心者程度のレベルです)。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================
- ベストアンサー
- CSS
- ロールオーバー画像の枠線を消したい
初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、(4ヶ所とも)今度は何も表示されなくなってしまいました。 <問題のタグのひな形> <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします!
- ベストアンサー
- JavaScript
- FireFoxでborder-collapseを使うと余計な枠線が表示される
FireFoxでborder-collapse:collapseを指定すると、余分な枠線が表示されてしまいます。 IEでは問題ありません。 <HTML> <HEAD> <title>TEST</title> <style type="text/css"> table { border-collapse: collapse; } td { border: 1px solid black; } td.none{border:none;} </style> </HEAD> <BODY> <table> <tbody> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td class=none> </td><td td class=none> </td><td class=none> </td><td class=none> </td></tr></tbody> </table> </BODY> </HTML> 何か対策は無いでしょうか?
- 締切済み
- その他([技術者向] コンピューター)
- CSSでリンクの表示をテキストと画像で変えたい
CSSを使って、 ・テキストのリンクのときは、 a:link で 常に点線のアンダーラインを表示 a:hover で マウスを重ねたとき色を変える ・画像のリンクのときは、 アンダーラインをださない a:hoverの動作をさせない という風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
ありがとうございます! おかげさまでできました! ちなみに"javascript:void(0);"はどのような意味でしょうか? これがなくてもonfocusだけでもできました。