- 締切済み
どなたか！IEでのみ表示が異なります。
いつもお世話になります。 前回質問させていただきhttp://oshiete1.goo.ne.jp/qa4513912.html よい回答いただき、少し前進したのですが、ここでまた問題が！ 自己解決はとても難しくお手上げ状態なのです！ どなたかお知恵を貸してください。 1枚画像でmap、reserve、manu、aboutという横並びリンクバーを作成し、 (1)デフォルト(2)カーソルを合わせた時(3)現在のページはココですよ～ の状態（4×3）を1枚の画像で作り、htmlに、ページの現在位置を表すためのバーのスタイルをclass指定し（3）、 ulをposition指定にし、liをfloat:left;で作ったところ、 operaとfirefoxでは意図通りに表示されるのですが IE（6.0）でのみ(3)の部分が、一番左（about）の画像で表示されるのです。 （1）（2）は大丈夫です。 （というか、operaとfirefoxは（3）の表示の場合は a:hoverは表示されないですね・・） 長くなってすいませんが、navbarのところのみですが記載しますので どなたかご確認くださいませんか？ よろしくお願いいたします。 ■html <ul id="navbar"> <li><a href="map.html" class="map selected"><span>地図</span></a></li> <li><a href="#" class="res"><span>ご予約・貸切</span></a></li> <li><a href="#" class="manu"><span>メニュー＆料金</span></a></li> <li><a href="#" class="about"><span>樹海について</span></a></li> </ul></div> ------------------------------------------------------------ ■css ul#navbar { position: absolute; top: 100px; left: 300px; width: 476px; height:50px; } ul#navbar li{ float:left; width:119px; height:50px; } ul#navbar a{ display:block; width:119px; height:50px; background-image:url(bar_all.gif); background-repeat: no-repeat; } ul#navbar li a span{ display: none; / } /* 初期状態 -------------------------------------------*/ a.map{ background-position: 0px 0px; } a.res{ background-position: -119px 0px; } a.manu{ background-position: -238px 0px; } a.about{ background-position: -357px 0px; } /* オンマウス ------------------------------------------ */ a:hover.map{ background-position: 0px -50PX; } a:hover.res{ background-position: -119px -50px ; } a:hover.manu{ background-position: -238px -50px; } a:hover.about{ background-position: -357px -50px; } /* selected -------------------------------------------*/ a.map.selected{ background-position: 0px -100px; } a.res.selected{ background-position: -119px -100px; } a.manu.selected{ background-position: -238px -100px; } a.about.selected{ background-position: -357px -100px; }
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- nori_007
- ベストアンサー率35% (369/1048)
#No2 です。 xhtml ですので、<!DOCTYPE>の上に、XML 宣言が入っているでしょうか？ もし、入っているので有れば、削除して試してみてください。 下記のページを参考にしてみてください。 http://css-happylife.com/log/html/000091.shtml
- nori_007
- ベストアンサー率35% (369/1048)
<!DOCTYPE>はどうしていますか？ IE の互換モード、標準モードは意識していますか？ 標準モードで制作するば、CSS をブラウザ毎に分ける必要はないと思います。
補足
回答ありがとうございます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> と記載してます。 です。urlをはずしてみたりしましたが、変化無かったです。
- cipher_roy
- ベストアンサー率46% (411/893)
ＩＥとＦＦ／ＯＰＥＲＡとで表示位置が一致しないのはＩＥが margin要素が効いている環境下で効果を発揮するのに対して、 ＦＦ／ＯＰＥＲＡではpadding要素が効いている環境下で効果を 発揮する性質の違いがあるからです。 これを防ぐには、ＩＥとＦＦ／ＯＰＥＲＡとで違うcssを拾うように ヘッダ内に仕掛けるか、デメリット表示でどのブラウザ（バージョン） に最適化されているか（表示のずれが出るか）を公示するなどの手段があります。 同じhtmlタグやcss要素があっても、ブラウザやバージョンによって 反応が異なることがあるので、これらにも注意してページ構成を 考える必要があります。
お礼
回答ありがとうございました！ 各ブラウザにおけるmarginやpadding要素の解釈の違いがあることは やんわりですが理解しております。 自分なりに調べて試しても限界が来たので（笑） 質問させて頂きました！ あと、 >デメリット表示でどのブラウザ（バージョン） ＞に最適化されているか（表示のずれが出るか）を公示するなどの手段があります。 上記の意味がよくく分からなかったのですが．． もし良かったら、教えて頂けますか？ ありがとうございました！ まだ試して無いこともあるので
補足
再度の回答ありがとうございます。 こちらのサイトは良くお世話になってますが このページはみたことなかったです。 勉強になります！ありがとうございます。 ん～しかしXML 宣言はしてないです。 文字コードもokですね。 cssのほうにも「UTF-8」を指定してた気がしますけど 関係ないですよね・・ シンプルなサイトなのですが、その他の箇所も、許容範囲内ではありますが各ブラウザ（というかIEとその他ですね） marginとpaddingがやはり微妙にことなって表示 されてるような気がしてきました。 バグ？についてはいろいろ調べて試行してはいるのですが 思った様な結果が得れない状態です・・ ちょっと今チェック出来る環境にいないのですが 後ほど、また探ってみます。 ちょっとあきらめムードです。