- ベストアンサー
IEに対応するCSSの記述について
tanukikkuの回答
- tanukikku
- ベストアンサー率53% (14/26)
私も詳しくは解りませんが、Firefox3.0.1とIE7.0で見てみましたが変わりなく表示されるようですよ。キャッシュが残ってるとか・・・？ IEでメニューバーの表示にある更新を押しても変わりないですか？ あとa:activeを消して、 a:hover { position:relative; top:1px; left:1px; } だけにしてみてはどうでしょう。a:hoverだけでも表示されます。 解決できなかったらごめんなさい。
関連するQ&A
- CSSについて
カーソルがルンク先文字にふれた時に色が変わり、 リンクしたあとリンク済みになるCSS( スタイルシート)はこれでいいでしょうか？ リンク済みの色が変わりません。 <!-- <style type="text/css"> --><!--A:HOVER{position : relative;top:2px; left:2px;} </style> --> <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style>
- ベストアンサー
- HTML
- マウスをのせると画像が動くcssについて
マウスをのせると画像が動くCSSについて質問します。 http://kumacrow.blog111.fc2.com/blog-entry-486.html このページに書いてあることをやりたいです。 通常ですと、<head>内にCSSを記入して、html内でclassで呼び出すと思うのですが、html内に全て書く場合はどうすればいいのでしょうか？ <a href="http://～" style=" a:hover { position: relative; top: 5px; left: 5px;}"><img src="（画像のある場所）" /></a> このような書き方では上手くいきません。 どのように書けばいいのか教えてください。
- 締切済み
- HTML
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- CSSに関する質問です
CSSで下記のように設定したとします。 A:HOVER{ color #好きな色; position:relative; top:1px; left:1px; } こうするとリンクにマウスを乗せた時に文字が斜め下に移動するように出来ますが、 これをテキストのみに適用させたいのです。 画像は動くと不格好なところも多いので、画像だけ適応させないような方法はないのでしょうか？ 難しいような場合には、 個別に画像に対してCSSをかぶせる予定です。 よろしくお願いいたします。
- ベストアンサー
- CSS
- IE9でのCSSスプライト
*****html***** <div id="head"> <ul> <li id="scope1"><a href="index.html">トップ</a></li> </ul> </div> ************* *****css***** div#head ul { position:absolute; top:10px; left:10px; width:600px; height:30px; overflow:hidden; } div#head ul li { list-style-type:none; display:inline; } div#head ul li#scope1 a{ background: url('test.png') 0px 0px; width:100px; height:50px; text-indent:-9999px; display:block; position:absolute; top:0px; left:0px; } div#head ul li#scope1 a:hover { background:url('test.png') 0px -50px; } ************** 上記のような記述で、IE9で表示させたところ、もちろんうまく動作します。 ところが、「display」の部分を2ヶ所両方ともはずしても、なんら問題なく動作しています。 block属性にするのは、<a>で指定したリンクを文字部分だけでなくを画像部分全体に 適用するためだと思っていたのですが、指定しないとまずいものなのでしょうか？
- ベストアンサー
- CSS
- CSSでの記述についてです。
CSS初心者で独学でいろいろ試しているのですが、分からないことがあるので質問させてください。 １、スタイルシートの定義を個別にして、文章を書いたページのスタイルを一括で統一する方法を取っています。 ２、ページの下の部分に「戻る」「次へ」のリンクを作って、リンクを張りました。 ３、同じフォルダ内のページに対してリンクを貼ったとき、「戻る」と「次へ」の間にわずかに間隔があります。（それを保ちたいのです） ４、しかしひとつ階層が上の（フォルダ外）のページに対してリンクを貼ったとき、何故か「戻る」と「次へ」の間の間隔が狭くなってしまいます。 スタイルシートを文書の記述とは別に作って一括で処理しているので、その文書ページの記述に問題があるのだと思うのですが、どこが問題なのか分かりません。参考までに、以下にページの記述を記載します。 ---------------------------------------- ＜間隔がきちんとある方＞ <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago2</title> </head> <body><br> <p> 文書<br> </p> <br><br> <a href="torikago1.html">戻る</a> <a href="torikago3.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------- ＜間隔が狭くなる方＞ <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago1</title> </head> <body><br> <p> 文書<br> </p> <br><br> <a href="../toppage.html">戻る</a> <a href="torikago2.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------ ちなみに、スタイルシート＞文書フォルダ となっていて、 間隔の狭くなってしまう方のページもその文書フォルダの中にあります。 スタイルシートのリンクに対しての記述も必要でしょうか？ 以下のようなものです。 ------------------------------------------------ a {position:relative; right: -43%; bottom: 40px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} a.01 {position:relative; bottom: 10px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} どなたか教えて頂けると嬉しいです。
- ベストアンサー
- その他（インターネット・Webサービス）
- 外部CSSと HEAD内のCSSの違い
現在、macで Dreamweaver8を使用してHPを作っています。 外部のcssがうまく反映されません。 そこで、head内に同じcssを入れたところ、きちんと反映されました。 どうして違いがでるのか教えてください。 『head内に入れた時』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。 誰かお答えくださいませ。
- ベストアンサー
- Mac
- CSSについてです。回答よろしくお願いします！
現在外部リンクでCSSを使っているのですが、リンク設定を a:hover {text-decoration: none; color: #1E90FF; position: relative; top:2px; left:0px;} という風に使っています。 しかし、同じページにリンクを２つ作ると上記内容に２つともなってしまいます。 １つだけ上記内容のリンク設定にしたいのですが、どうすればよろしいでしょうか？ 質問の内容がわからないようでしたら、説明しますので、回答よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- 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
- Mac IE5.2 のCSS対応
これまでコーディングはテーブルレイアウトばかりでやってきまして、 急いでフルCSSサイト作りの勉強をしているものです。 Windows Firefox、IE6 Macのsafari ではほぼ意図した通りに表示できるようになったのですが、Mac IE5.2ではどうもうまくいかない箇所があります。 listタグにスタイルを指定している部分がまったく効いてないのです。 ブラウザの対応など問題はあると思うのですが、これくらいはできるハズですよね？（汗）できるものと思ってアレコレ試しているのですが。 初歩的な質問でお恥ずかしいのですが、よろしくお願いします。 CSSはこんな感じです。 =========================================================== #header { padding-top: 0px; margin-bottom:20px; position:relative; width:800px; height: 78px; background-color:#575757; } #header #logo { position: absolute; top: 0px; } #header ul { margin: 0; padding: 0 20px 0 20px; list-style: none; float:right; width:550px; background-color:#676767; vertical-align:bottom; } #header li { display: inline; font-size:x-small; line-height:25px; height:25px; list-style-type: none; padding-left: 2.8em; vertical-align:middle; float:left; } #header li a { color:#ffffff; text-decoration: none; padding-left:15px; background:url(../images/arrow_bl2.gif) left no-repeat; } #header li a:visited { color:#ffffff; } #header li a:hover { color:#12A0ED; } =========================================================== htmlのほうはこちらです。 <div id="header"> <a href="../index.html" title="tabi-memo" id="logo"><img src="../images/title_s.gif" width="250" height="78"></a> <ul> <li><a href="../index.html">HOME</a></li> <li><a href=".html">●●</a></li>
- ベストアンサー
- HTML
お礼
hoverイベントだけでは残念ながらボタンを押したような感覚を得ることができませんでした。 今回はactiveのpositionをstaticにしてIEでも沈むように見せて解決させてもらいました。 ありがとうございました。