:first-childと:focusが効かないのはIE6のせい？
- IE6で:first-childや:focusが効かない原因を教えてください。
- WindowsMeのIE6を使っていますが、:first-childと:focusが効かない状態です。
- CSSのスタイル指定に問題はなさそうですが、IE6の仕様による制約が影響している可能性があります。
- ベストアンサー
:focus,:first-childが効かない
のですがこれはie6だからでしょうか? ちなみにWidowsMe ie6を使っています <style type="text/css"> input:focus { background-color:black; } a:hover { color:white; background-color:black; text-decoration:none; } li { border-top:solid 1px #ccc; } li:first-child { border-top:none; } </style> <input type="text"/><br/> <a href="#">xxxx</a><br/> <ul> <li>ab</li> <li>cd</li> <li>ef</li> <ul>
- guuman
- お礼率86% (1043/1206)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
これはie6だからでしょうか? YES! 参考URLでブラウザごとの対応状況がわかります。
関連するQ&A
- 階層型ドロップダウンメニューのサブ項目CSSの背景色の指定について
メニューバーにサブ項目を作り、hover,active,時のbackground-colorを指定したいのですが、うまくいきません。 ◆http://haradesignroom.jp/0909menu_bar/0909renewal/kaisoumenu/index.html Web制作関連の雑誌に出ていたフォーマットを元に上記のメニューバーを作りました。 第一階層には背景画像を配し、hover,activeのときに別画像を設定しました。 ６項目のうち、サブメニューがある（商品情報など）にマウスをおくと、グレーの背景色のサブメニューが表示されるまでは良いのですが、サブメニュー各項目にマウスを置くと、第一階層のhoverの画像が表示されてしまいます。またサブメニューの下欄の項目が表示されません。 サブメニューがhover、active状態のときに、さらに別色（＃FFCCCC）で指定したいのですが、CSSの書き方がわかりません。 どなたかご教示お願いいたします。 【CSS】 * { margin: 0; padding: 0; } body { font-family: Helvetica, Sans-Serif; font-size: 12px; padding-bottom: 15px; } #page-wrap { width: 800px; margin-top: 25px; margin-right: auto; margin-bottom: 25px; margin-left: auto; } a { text-decoration: none; } ul { list-style: none; background-repeat: repeat-x; } p { margin: 15px 0; } /* LEVEL ONE*/ ul.dropdown { position: relative; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: none; border-right-style: none; border-left-style: none; } ul.dropdown li { font-weight: bold; float: left; background-image: url(../images/menu_bk.jpg); height: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCC99; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } ul.dropdown a:hover { color: #993333; background-image: url(../images/menu_on_bk.jpg); } ul.dropdown a:active { color: #993333; background-image: url(../images/menu_on_bk.jpg); } ul.dropdown li a { display: block; color: #666666; border-right-style: none; border-left-style: none; padding-top: 20px; padding-right: 30px; padding-bottom: 4px; padding-left: 30px; border-top-style: none; border-bottom-style: none; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li:first-child a { border-left: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { color: #666666; position: relative; background-color: #D2D2D2; } ul.dropdown li.hover a { color: #993333; } /* LEVEL TWO */ ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } ul.dropdown ul li { font-weight: normal; color: #FFFFFF; border-bottom: 1px solid #ccc; float: none; background-repeat: repeat-x; background-image: url(../images/transparent02.jpg); float:none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; color: #FFFFFF; } /* LEVEL THREE*/ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; color: #FFFFFF; } ◆ 長々申し訳ありませんが、どなたかよろしく お願いいたします。◆
- 締切済み
- インターネットビジネス
- 画像を使ったドロップダウンメニュー
ホームページのメニューボタンにドロップダウンを使おうと思っています。 色々ネットから調べて自分で試したのですが、 オンマウスで画像を変えたりと、少し複雑な為、うまく表示できません。 文字数の関係上スタイルシートのコードだけしか貼れませんが、 よろしくお願いいたします。 /* ナビゲーション */ #navi_continer { position: relative; z-index:100; width: 400px; height:110px; } #navi { position: absolute; width: 100px; background-image: url(./img/menu/03a.jpg); height: 110px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-image: none; } #navi li a:hover { color: #ffffff; background-image: url(./img/menu/03b.jpg); height: 110px; width: 100px; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #navi li.navi_menu_on{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }button { background-image: url(%E3%83%94%E3%82%AF%E3%83%81%E3%83%A3%201.jpg); }
- 締切済み
- Java
- CSSでポップアップメニューを作成したがIEだけメニューが表示されません。
下記のようなCSSでポップアップメニューを作成したのですが IEだけポップアップメニューが表示されませんでした。 IEでもポップアップメニューが表示されるようにするには どのようにすればよいのでしょうか？（JavaScriptは未使用で作成） <html> <head> <style type="text/css"> #menu { position: relative; width: 102px; height: 22px; } #menu li { list-style-type: none; float: left; } #menu li a { color: gray; width: 100px; height:20px; text-decoration: none; text-align: center; border: 1px solid gray; display: block; } #menu li a:hover { background-color:#FFFFCC; } #menu ul li ul { display: none; } #menu ul li:hover ul { display:block; position:absolute; top: 22px; left: 0; } </style> </head> <body> <div id="menu"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
- CSSを使いたいのですが上手くいきません
テーブル型のメニューを マウスオンで背景の色を変えたいのですが… CSSの解説HPを見たのですが、どこの記述に誤りがあるのか 恥ずかしながら分かりません。 お分かりになる方いらっしゃいましたら、ご教授お願い致します。 <html> <head> <meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- container{ width:100px;} container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} container ul li{ margin:0; padding:0; display:inline;} container ul li a{ margin:0; padding:5px 0; width:180px; display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} container a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} --> </style> </head> <body> <div id="container"> <ul> <li><A Href="01.html" Title="test">test1</A></li> <li><A Href="02.html" Title="test">test2</A></li> </ul> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- タブ式グローバルナビのブラウザ崩れの件で
はじめまして、タブ形式のグローバルナビを作成しており、以下スタイルシートを適用しております。 IE7.6だとタブを触った時にcurrent_page_item aの該当ページが背景色緑なのですが、その下に1ピクセルの隙間が生じてしまいます。 添付ご参照ください。 FireFOXだと大丈夫なのです。 ブラウザの崩れなので、どの様に修正すればよいか不明です。 どなたか教えてください。 宜しくお願い致します。 ----html------- <ul id="nav"> <li><a href="#">TOP</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">ACCESS</a></li> </ul> ----------- ---------css----------- #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 100px; text-decoration: none; color: #333333; } #nav li a:hover { display: block; width: 100px; color: #00645C; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #00645C; border-right-color: #00645C; border-left-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; }
- ベストアンサー
- HTML
- [CSS3] last-childについて
html5とcss3にてスマートフォンサイト制作をしております。 リスト要素を使いメニューを作っていますが、一番下の要素だけボーダーを削除したいと 思っていますが、うまくいきません。 詳しい方、ご教授いただけませんでしょうか。 よろしくお願い致します。 ---------------------------------------------------------- [HTML] <nav> <ul id="navi"> <a href="#"><li>メニュー1</li></a> <a href="#"><li>メニュー2</li></a> <a href="#"><li>メニュー3</li></a> <a href="#"><li>メニュー4</li></a> <a href="#"><li>メニュー5</li></a> </ul> </nav> [CSS] nav { display: block; width: 300px; margin-right: auto; margin-left: auto; margin-bottom: 18px; } #navi { border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #CCCCCC; background: -webkit-gradient(linear, left top,left bottom, from(#FFFFFF), to(#E7E7E7)); background-color: #FFFFFF; } #navi a { text-decoration: none; color: #646464; font-size: 1.31em; text-indent: 16px; height: 33px; line-height: 33px; } #navi li { border-bottom: 1px solid #CCCCCC; } #navi li:last-child { border-bottom-style: none; }
- ベストアンサー
- CSS
- IE以外で:hoverの内容が無視されてしまう
独学でCSSを勉強している者です。 ちょっと躓いてしまったのでどなたかお知恵を貸してください。 下記のように指定しています。 IE6ではちゃんとhover時に背景色が変わるのですが、 opera,firefoxで動作確認したところいずれもうまく動作しませんでした。 どこが間違っているのか分からず、困っています。 御指摘頂けると助かります。 ---------------- pagelist.htmlの内容 ---------------- <ul class="comout"> <li class="comrow compar">ページリスト <ul class="comin"> <li class="comrow"><a href="001.html">1</a></li> <li class="comrow"><a href="002.html">2</a></li> </ul> </li> </ul> ---------------- 001.htmlの内容 ---------------- <ul class="comout"> <li class="comrow compar">ページリスト <ul class="comin"> <li class="comrow comself"><a href="001.html">1</a></li> <li class="comrow"><a href="002.html">2</a></li> </ul> </li> </ul> ---------------- スタイルシート ---------------- ul.comout{ padding:0px; margin:0px 0px 20px 0px; } ul.comin{ padding:0px; margin:0px 0px 0px 10px; } li.compar{ display:block !important; padding:5px; margin:0px; } li.comrow{ display:inline; color:#395158; list-style-type:none; text-decoration:none; } li.comrow a:link{ background-color:#EFECE7; border:1px #D1C9BD solid; text-decoration:none; color:#395158; } li.comrow a:visited{ background-color:#EFECE7; border:1px #D1C9BD solid; text-decoration:none; color:#395158; } }li.comrow a:hover{ background-color:#D1C9BD; border:1px #EFECE7 solid; text-decoration:none; color:#395158; } li.comself a{ background-color:#D1C9BD !important; border:1px #EFECE7 solid !important; } --------------------------- 以上です。 いままでIEのみで動作確認をしてきたため、 今回のような自体にどう対応して良いのか分かりません。 よろしくお願いします。
- ベストアンサー
- HTML
- リスト項目でのメニュー作成
リスト項目を使いcssでメニューを作成しているのですが、下記のような記述でメニュー1の部分だけ違う色を指定したい場合、どのように記述すればよいのでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu li { list-style-type: none; float: left; padding: 0px; line-height: 22px;font-size:14px;width: 110px; margin-left: 2px;} ul#menu li a { text-decoration: none; display: block; / padding: 5px; color: #black; background-color: #8BCFDE } ul#menu li a:hover { background-color: #ff9999; color: #black; } </style> </head> <body> <ul id="menu"> <li><a href="#/">メニュー1</a></li> <li><a href="#/">メニュー2</a></li> <li><a href="#/">メニュー3</a></li> <li><a href="#/">メニュー4</a></li> <li><a href="#/">メニュー5</a></li> <li><a href="#/">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- CSSの添削をお願いします。リンク色が反映しません
閲覧ありがとうございます。下記CSSの 「.CLASS li a:link,a:visited{ color:red; text-decoration:none;」 の部分が反映されず、ブラウザの標準設定のままになってしまいます。 本来のstyleの全文はbodyや他のクラスの記述もしているのですが、それらが影響しているわけではないことを確認してあります。 <style> .CLASS ul{ padding:0; } .CLASS li{ border-top: solid pink 1px; list-style-type: none; } .CLASS li a:link,a:visited{ color:red; text-decoration:none; background-color:lightgray; display: block; } .CLASS li a:hover { background-color:gray; } </style> <div class="CLASS"> <ul> <li> <a href=""> 反映されてない…リンク文字色red、デコレーションnone</a> </li> <li> <a href="">反映されてる…リンク背景色lightgray、ホバー背景色gray</a> </li> </ul> </div> 宜しくお願いします
- 締切済み
- CSS
- xhtmlでページを作ったらcssのhoverの部分がFirefoxで
xhtmlでページを作ったらcssのhoverの部分がFirefoxでは動くのにIEでは上手く動きません。 どうしたらいいのでしょうか？ --xhtml-- <div class="menu"> <ul> <li><a href="#"target="content">link1</a><br/></li> <li><a href="#"target="content">link2</a><br/></li> <li><a href="#"target="content">link3</a><br/></li> </ul> </div> --css-- .menu{ width:100%; position:absolute; bottom:25%; font-weight:bolder; filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; } .menu ul{ margin:0; padding:0; } .menu li{ margin-bottom:1px; list-style-type:none; float:none; font-size:1.3em; line-height:0; } .menu li a{ display:block; width:100%; line-height:25px; background-color:#ba2029; color:#ffffff; text-align:center; text-decoration:none; border-left:solid 10px #880000; } .menu li a:hover{ background-color:#95195a; }
- ベストアンサー
- HTML
お礼
ありがとうございます 対応してほしいものですね