FireFoxでToolTipの位置がおかしい
- CSS初心者の質問者は、FireFoxでToolTipの表示位置が他のブラウザと異なることに困っています。
- 質問者はChromeでは問題がなかったが、FireFoxだけで表示位置が変わってしまうことに頭を悩ませています。
- 質問者は、どのような方法でFireFoxでToolTipの表示位置を修正できるのかアドバイスを求めています。
- ベストアンサー
ＦｉｒｅＦｏｘでＴｏｏｌｔｉｐの位置がおかしい
ＣＳＳ初心者で、いくつかのサイトを参考にＴｏｏltip表示を試したのですが、ＦｉｒｅＦｏｘでだけ表示位置が変わってしまいます。Ｃｈｒｏｍｅでは問題なかったのですが、ターゲットがＦｉｒeFoxで困っています。 どのような方法で直せばよいのでしょうか。 ＣＳＳは以下の通りです .toolTip:hover{ background: #ffffff; text-decoration: none; } .toolTip span{ display: none; border: solid 2px #999; background-color: #eee; color: #666; padding: 5px; font-size: 12px; margin-left: 8px; line-height: 1.6; } a.toolTip:hover span{ display: inline; position: absolute; background-color: #fff7ee; border: 1px solid #cccccc; color: #000000; width: 150px; ｝ ＨＴＭＬの一部ですが <a href="#" class="toolTip"><span>介護記録の内容の表示と印刷ができます</span><img src="b-print.jpg" width="211" height="144"></a> としています
- masarun53406
- お礼率38% (39/101)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Chromeがそのように動作するとしたら、Chromeの解釈が間違っています。 「上辺の位置は、包含ブロックに対して決まる。 また、位置指定されたボックスの包含ブロックは、同じく位置指定されている最も近い祖先に設定される( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#q29 )」 言い換えれば、直近のstatic以外の親抱合ブロックの内辺を参照するという事です。 位置の基準になる抱合ブロックにrelativeを指定すると良いでしょう。 dispaly:none → :hover{display:になっているのに、二箇所でborderやbackgroundを指定しなくても良い 親にclassをつければ、子要素にいちいち同じclassをふるのは無駄です。
関連するQ&A
- 吹き出しの位置に付いて
<style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:288px;} a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #ffffff; color:#0208a8;} </style> 上記のＣＳＳで吹き出しを作ると、必ず右側に 吹き出しが表示されます。 中央（バーナーの真下）にソースを表示したいので margin-leftの部分をセンターなどに変更したのですが 必ず右側に表示されます。 吹き出しを中央に表示するには 何処を変更したら良いでしょうか。 宜しくお願い致します。
- ベストアンサー
- HTML
- スタイルシートでツールチップ
初心者です。 http://ameblo.jp/linking/entry-10083271034.htmlから拝借して、ツールチップが出るような指定をしたいと思うのですが、できたらaタグを使わずにやりたいのですが、どうしたらよいでしょうか。 よろしくお願いいたします。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;} </style> <body> Easy <a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>. </body> </html>
- ベストアンサー
- HTML
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
- １番右側の画像のhoverだけ位置をずらしたい
テーブル内の画像にcssでマウスオーバーで拡大画像が出るように設定しましたが、 一番右の列をマウスオーバーすると画面からその拡大画像が消えてしまうため、 この列のみもう少し左側に画像が出るようにしたいのですが、どう記述したらよいのか分かりません。 http://okwave.jp/qa/q6343605.html ↑この回答がかなり核心をついているのですが、私の記述で言うところの隣接セレクタってどこなのか分かりません。。 現在設定しているのは下記のコードです。 どなたかご教授下さい。 【html】 <tr><td class="type1" td colspan="2" scope="col" align="center" valign="middle"><a href="#" id="hover"><img src="●●.jpg" width="100" height="100" alt="ec"/></a></td> </a></td> </tr> 【css】 td.type1 { height: 185px; width: 185px; background-color:#FFF; } a#hover img{ border:none; padding:5px; width:100px; height:100px; border: 1px solid #CCC; } a#hover{ display:block; width:100px; height:100px; } a#hover:hover img{ width:300px; height:300px; position:absolute; padding:5px; border: 1px solid #CCC; background-color:#FFF; } ちなみにtdが４つ入ります。（画像は横に４つ入り、一番右側というのは４番目になります）
- 締切済み
- CSS
- firefox とie6 でのbackground height wi
firefox とie6 でのbackground height width表示の違い ホームページ作成しています。 初心者です。 globalnavi というdiv のなかに globalnavi li をfloat-rightで横並びにしました。 width 800px height 30px にしたいのですが IEやfirefoxでずれが生じます。よくあるトラブルのよなのでバグ対策など調べて試してみましたが両方がぴったり合うことはありませんでした。丸一日挑戦しましたがギブアップです。background image は30×800のバーをpng形式で作りました。独学でまだ理解していないことばかりで乱雑なcssですみません。ご教示をお願いします！！ #globalNavi{ background-image:url(../menubar.png); width:790px; height:30px; font-size:14px; color: #1C1D21; text-align:center; } #globalNavi li{ float:right; overflow:hidden; width:80px; height:30px; list-style-type:none; text-align:center; color: #1C1D21; border-left-width: 2px; border-left-style: solid; border-left-color: #999; line-height:0; } #globalNavi a{ width:80px; height:30px; display:block; text-align:center; line-height:normal; } #globalNavi a:hover{ width:80px; height:30px; background-position: 0 -80px; background-color:#B7D68D; text-decoration: none;
- ベストアンサー
- HTML
- CSSでIEとFirefoxでの表示の違い
IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常（希望通り）に表示されるようにするには どのような記述にすれば良いのでしょうか？ 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- 【CSSについて】リストをフロートするとfirefoxでボーダーが消える
お世話になっております。 今回は、CSSの質問です。 IE6.0とFF3.0の違いなのですが、ソースを以下に記述します。 ***HTML*** <ul id="navi"> <li><a href="#">風景</a></li> <li><a href="#"> 生き物</a></li> <li><a href="#">建物</a></li> <li><a href="#">乗り物</a></li> </ul> ***CSS*** #navi { margin-left: 0px; padding-left: 0px; list-style-type: none; width: 600px; border-right: 1px solid #333333; } #navi li { float: left; border-left: 1px solid #000000; border-top: 1px solid #333333; border-bottom: 1px solid #000000; width: 149px; } #navi a { display: block; background-color: #ff9900; color: #FFFFFF; text-decoration: none; width: 149px; line-height: 30px; text-align: center; font-size: 12px; font-weight: bold; letter-spacing: 0.5em; } #navi a:hover { background: #00FFFF; color: #000000; } IEではボーダーで区切られたナビがキレイに表示されますが、FFでは右端のボーダーが消えてしまいます。 これもハックしなきゃならないものですか？ とりあえず、背景に画像を使用することで逃げられるのですが、すっきりしませんので対処法を教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSのツールチップにアニメーションをつける方法
CSSだけでマウスホバー時にツールチップを表示しています。 以下のように記述することで、ホバー時にツールチップが出るようになったのですが、アニメーションをつけたいと思っています。 HTML ============ <a href='#' class='tooltip'>用語<span>用語の説明</span></a> ============ CSS ============ a:hover {background:#f7f7f7; text-decoration:none;} a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:200px;} a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;} ============ ただ、実際にホバーするのは、ホバー時に表示する文字ではないので、どこにtransitionを記述すればいいかわかりませんでした。 こういう場合、どこにtransitionを追加してあげれば、ホバー時にアニメーションを追加できるのでしょうか？ 以下のセレクタは試してみましたが、ホバー時にアニメーションはつきませんでした。 .tooltip{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } .tooltip span{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } ご教示いただけると幸いです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- HP全体を左寄せ配置するCSSの記述について。
HP全体を左寄せ配置するCSSの記述について。 CSS付きで中央表示の無料テンプレートを頂きました。 これを左寄せ配置で表示させる方法を教えて下さい。 (base.css) @charset "Shift_JIS"; /* 基本設定 */ *{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Helvetica, sans-serif; } body{ color:#333; text-align:center; } br{ letter-spacing:normal; } a{ color:#333;text-decoration:none; } a:hover{ color:#fff;text-decoration:none; } img{ border:0px; } /* テンプレート */ #temp{ width:500px; text-align:center; line-height:18px; letter-spacing:1px; margin:10px auto; } #header{ background:#fff url(img/cat.gif) no-repeat 0px 0px; width:500px;height:120px; text-align:left; border:1px solid #333; } #menu{ background-color:#333; width:500px;height:24px; color:#fff; margin:10px 0px; border:1px solid #333; } #main{ background:#fff; width:480px; text-align:left; padding:10px; border:1px solid #333; } #footer{ background:#fff; width:500px;height:30px; color:#333; line-height:30px; margin:10px 0px; border:1px solid #333; } /* タイトル部分 */ #header h1{ padding:30px 0px 0px 190px; } /* メニュー部分 */ #menu ul{ list-style-type:none; height:24px; margin-left:30px; } #menu li{ display:inline; padding:0px } #menu a{ color:#fff; line-height:24px; float:left; text-decoration:none; padding:0px 5px; } #menu a:hover{ color:#DB9400; text-decoration:none; } /* メインコンテンツの見出し */ #main h2{ background:url("img/mark.gif") no-repeat; padding:1px 0px 3px 25px; color:#DB9400; よろしくお願いします。
- ベストアンサー
- HTML
- FireFoxでCSSのボーダーが反映されません
FireFoxでのCSS表示について教えて下さい。 現在、IEでは見れるものがFireFoxで反映されておりません。 どこかに原因があるとは思うのですが、見つからないのです。。。涙 Bodyとページ全体のCSS、及び問題箇所のCSSを記述します。 #body { margin: 0px; width: 100%; padding: 0px; border: 0px; height: auto;} #page { background-color: #ffffff; width: 746px; height: auto; margin: 0px; padding: 0px; border-collapse:collapse; border: 0px; border-spacing:0px;} #page td {line-height: 120%; font-size: 12px; color: #000000;} #contents1 {width: 746px; border-collapse:collapse; border-spacing:0px; margin:0px 0px 5px 0px;} border: 1px solid #666633; #contents td {font-size: 12px; line-height: 120%; color: #000000; padding-top: 2px; padding-bottom: 2px;} #contents2 {width: 350px; height: 45px;} #contents2 td { border: 1px solid #999999; font-size: 12px;} ※contents1は外枠のみボーダーカラーをつけたいと思います。 contents2では、tdのみ枠をつけて、外枠は表示させたくありません。 (大枠の中にいくつか枠付きの行が表示される状態にしたいです) idではなくclassにする方が良いのでしょうか？ CSSについては独学なので、記述もほとんどDW頼りです。 参考サイトなどご存知でしたら教えて下さい。。。 以上、よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
初心者には手が出せない世界のように感じました。 ブラウザーによって変える必要もあるのを知ることができて、収穫です。ありがとうございました。 問題は解決できませんでしたが。
補足
解説ありがとうございます まだまだ初心者のため static 抱合 親に などの意味がよく理解できません そして 添付すべき画像が複数不可能のため 意味不明だったかもしれません 添付は 左下の画像にマウスを載せた 問題の者で 他の五個は 載せた画像のところにtooltipが表示されます よろしくおねがいします