• 締切済み

4つの内２つのブラウザ（ＩＥとGC）で動作しない。

html, javascript(jQuery)の初歩を使って超小型ウェブサイトを作成致しました。 作りたいのは、index.htmlファイルにホームページ(HP)を記述し、必要に応じてサブのhtmlファイル（a.html, b.htmlなど）を読み出し、HPの所望の場所にその内容を表示する仕組みです。 具体的には、ホームページをＴ字型に分割し、Tの上部にタイトルを表示、左側（左コラム）に項目を表示して、項目のどれかをクリックすると別のhtmlファイル(a.htmlやb.htmlなど)に記載された記事の内容を右側（右コラム）に表示したいのです。HPのｊｐｇ図を添付させて頂きましたのでご参照頂ければ幸いです。 以下のお示し致しましたプログラムをローカルで動かしてみましたところ、Firefox(v7.0.1)とSafari(v5.1.7)では所望の動作を致しました。一方、InternetExplorer(IE) (v11.0.x)とGoogleChrome(33.0.x)では、項目の表示までは所望の動作を致しましたが、項目をクリックしても、別htmlファイルの内容を右コラムに表示できませんでした。 このウェブを少なくとも上の4つのブラウザで動作させたいのですが、いわゆるクロスブラウザの問題なのか、あるいはもっと初歩的な誤りを犯しているのか、初心者ですので全くと云っていいほど見当がつきません。 まことにお手数ですが、誤りをご指摘頂き、正しい記述方法をご教示頂きたくお願い申し上げます。また併せて、この辺りのことについて筋道だった説明があるサイト、あるいは書籍をご紹介頂ければ幸いです。 以下はindex.htmlとサブの.htmlファイルの概要とプログラムのリストです。ご多忙中のところ本当に申し訳ありませんがどうぞよろしくお願い申し上げます。 ファイルの概要です。 １）index.htmlファイル ・ホームページ。 ・DOCTYPE宣言はhtml4.0Transitionalの互換モード。 ・<scripttype="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> 　はjQueryライブラリーのアクセス宣言。 ・$(document).ready(function(){　から }) がjavascript (jQuery) ２）pagesフォルダ ・today.html, tomorrow.html, space.htmlのファイルを格納。 ・それぞれ項目の表題と記事を記述するファイル。 ３）ファイルのディレクトリ ・上の２つのファイルとフォルダはローカルのディスクの一つのフォルダに格納。 ・ディレクトリはそれぞれ 　/index.html, /index.html/pages, プログラムのリストです。cssは簡単なので別ファイルにせず直接htmlに書き込みました。 １）index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="keywords" content="HTML5,Web Audio API" /> <meta name="description" content="勉強会です。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>試験</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ //初期状態でのロードファイルを指定 $('#contentsBox').load('pages/today.html'); //クリックで各コンテンツを切り替え $('.switchButton').click(function(){ var loadContents = $(this).attr('title'); $('#contentsBox').load('pages/'+loadContents+'.html'); }); }); </script> </head> <body style="font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;"> <style type="text/css"> * { margin:0; padding:0;} ul {margin-left:35px; margin-top: 10px;} ul li {font-size:4mm; color:maroon; margin-top:1px; margin-bottom:1px;} ul a {color:maroon; } div.left-column{float:left; align:left; border-right:medium solid #800000; width:24.7%; height:100%; background-color:#f8dce0;}ul {margin-left:35px; margin-top: 10px;} </style> <div style="width:100%; background-color:#800000;"> <h1 align="center" style="padding-top:15px; padding-bottom:15px; color:white;"> ここにサイト名<br> </h1> </div> <div class="left-column"> <ul> <li class="switchButton" title="today">今日のできごと</li> <li class="switchButton" title="tomorrow">明日のお天気</li> <li class="switchButton" title="space">宇宙のはじまり</li> </ul> </div> <div id="contentsBox" style="float:right; border-left: medium solid #800000;　width:74.5%; height:100%; background-color:#f8dce0;"> </div> </body> </html> 上のjQuery の部分はhttp://blog.nico0927.net/20111103/jquery/316 さんの 「jQueryでdiv要素の中身にＨＴＭＬファイルを読み込みボタンで切り替え」から拝借しています。 ２）pagesフォルダの例えばtomorrow.htmlファイルのリストは <h3 style="margin-left:10px;">明日のお天気</h3> <p style="margin:0px 10px;">平成26年3月7日10時50分 気象庁予報部発表... 明日…となる所があるでしょう。</p> です。 today.html, space.htmlも同様です。 以上長々と書き連ねました。まことにお手数ですがよろしくご教授頂きますようお願い申し上げます。

画像を拡大する
noname#192598
noname#192598

みんなの回答

  • t_ohta
  • ベストアンサー率38% (5085/13293)
回答No.1

サーバにアップするか、ローカルでhttpdを動かしてテストすると正常に動作すると思います。 セキュリティー等の問題で、ローカルファイルへのAjax通信が制限されているブラウザではjQueryのloadでローカルファイルを読み込めない場合があります。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryの働きがブラウザにより異なる。

    html, javascript(jQuery)の初歩を使ってウェブサイトのひな型を作成致しました。 目的は、index.htmlファイルにホームページ(HP)を記述し、必要に応じてサブのhtmlファイル（a.html, b.htmlなど）を読み出し、HPの所望の場所にその内容を表示するサイトを作ることです。 具体的には、ホームページをＴ字型に分割し、Tの上部にタイトルを表示、左側（左コラム）に項目を表示して、項目のどれかをクリックすると別のhtmlファイル(a.htmlやb.htmlなど)に記載された記事の内容を右側（右コラム）に表示させたいわけです。このＨＰのイメージ画像を添付させて頂きました。 下のプログラムをローカルで動かしてみましたところ、Firefox(v7.0.1)とSafari(v5.1.7)では所望の動作を致しました。一方、InternetExplorer(IE) (v11.0.x)とGoogleChrome(33.0.x)では、項目の表示までは所望の動作を致しましたが、項目をクリックしても、別htmlファイルの内容を右コラムに表示できませんでした。 このウェブを少なくとも上の4つのブラウザで動作させたいのですが、いわゆるクロスブラウザの問題なのか、あるいはもっと初歩的な誤りを犯しているのか、初心者ですので全くと云っていいほど見当がつきません。 まことにお手数ですが、誤りをご指摘頂き、正しい方法をご教示頂きたくお願い申し上げます。また併せて、この辺りのことについて分かり易い説明があるサイト、あるいは書籍をご紹介頂ければ幸いです。 以下はindex.htmlと関連プログラムの概要です。 １）index.htmlファイル ・ホームページ。 ・DOCTYPE宣言はhtml4.0Transitionalの互換モード。 ・<scripttype="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> 　はjQueryライブラリーのアクセス宣言。 ・$(document).ready(function(){　から }) がjavascript (jQuery) ２）pagesフォルダ ・today.html, tomorrow.html, space.htmlのファイルを格納。 ・それぞれ項目の表題と記事を記述するファイル。 ３）ファイルのディレクトリ ・上の２つのファイルとフォルダはローカルのディスクの一つのフォルダに格納。 ・ディレクトリはそれぞれ 　/index.html, /index.html/pages, 以下はそれぞれのコードです。cssは別ファイルにせず直接htmlに書き込みました。 １）index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="keywords" content="HTML5,Web Audio API" /> <meta name="description" content="勉強会です。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>試験</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ //初期状態でのロードファイルを指定 $('#contentsBox').load('pages/today.html'); //クリックで各コンテンツを切り替え $('.switchButton').click(function(){ var loadContents = $(this).attr('title'); $('#contentsBox').load('pages/'+loadContents+'.html'); }); }); </script> </head> <body style="font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;"> <style type="text/css"> * { margin:0; padding:0;} ul {margin-left:35px; margin-top: 10px;} ul li {font-size:4mm; color:maroon; margin-top:1px; margin-bottom:1px;} ul a {color:maroon; } div.left-column{float:left; align:left; border-right:medium solid #800000; width:24.7%; height:100%; background-color:#f8dce0;}ul {margin-left:35px; margin-top: 10px;} </style> <div style="width:100%; background-color:#800000;"> <h1 align="center" style="padding-top:15px; padding-bottom:15px; color:white;"> ここにサイト名<br> </h1> </div> <div class="left-column"> <ul> <li class="switchButton" title="today">今日のできごと</li> <li class="switchButton" title="tomorrow">明日のお天気</li> <li class="switchButton" title="space">宇宙のはじまり</li> </ul> </div> <div id="contentsBox" style="float:right; border-left: medium solid #800000;　width:74.5%; height:100%; background-color:#f8dce0;"> </div> </body> </html> 上のjQuery の部分はhttp://blog.nico0927.net/20111103/jquery/316 さんの 「jQueryでdiv要素の中身にＨＴＭＬファイルを読み込みボタンで切り替え」から拝借しています。 ２）pagesフォルダの例えばtomorrow.htmlの中身は <h3 style="margin-left:10px;">明日のお天気</h3> <p style="margin:0px 10px;">平成26年3月7日10時50分 気象庁予報部発表... 明日…となる所があるでしょう。</p> です。 today.html, space.htmlも同様です。 以上です。 まことにお手数ですがよろしくご教授頂きますようお願い申し上げます。

  • IE6でli間に出来る隙間を無くす方法について

    下記のソースをIE6で閲覧すると「リンクあり２」と「リンクあり３」の間に隙間ができてしまい、この隙間を除きたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、Firefox等では隙間は出来ませんでした。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } ul, li { margin:0; padding:0; } li { list-style: none; } #mainlinkbox { width:100px; } #mainlinkbox li.nolink, #mainlinkbox li.link a { width:97px; border-bottom: 1px dotted blue; padding-bottom: 3px; padding-left: 3px; padding-top: 4px; background-color:red; } #mainlinkbox li.link { position:relative; } #mainlinkbox li.link a { display:block; } #mainlinkbox li.link a:hover { background-color: #c2f4a3; } #mainlinkbox li.link .submainlinkbox { left: 100px; position: absolute; width: 100px; background: yellow; } --> </style> </head> <body> <ul id="mainlinkbox"> <li class="link"><a href="#">リンクあり１</a></li> <li class="nolink">リンクなし</li> <li class="link"><a href="#">リンクあり２</a><div class="submainlinkbox">サブ項目</div></li> <li class="link"><a href="#">リンクあり３</a></li> </ul> </body> </html>

    • ベストアンサー
    • CSS
  • はみ出た部分が切れるように表示したいのですが

    以下のHTMLですと、2個目のliの１２３…が2行目に表示されてしまいますが、 これを上と同じ行に表示し、divからはみ出た部分は切れるようにできないでしょうか？ 実際には1個目のliの長さが可変なため、HTMLと文字列（１２３…）を変えるのでなく CSSでなんとかしたいのです。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> div.d310 { width:310px; padding:0px; margin:0px; text-align:center; vertical-align:top; background-color:#ffffff; } ul { width:310px; height:20px; float:left; line-height:20px; font-size:13px; margin:20px 0px 0px 0px; padding:0px ; background:#f1f1f1; border-top:solid 1px #a9a394; } li.li1 { float:left; text-indent:12px; display:inline; margin:0px 10px 0px 10px; padding:0px 0px 0px 0px; } li.li2 { float:left; text-indent:19px; display:inline; margin:0px 10px 0px 0px; padding:0px 0px 0px 0px; } </style> </head> <body> <div class="d310"><ul> <li class="li1"><a href="">１２３４５６７８９０</a></li> <li class="li2"><strong>１２３４５６７８９０１２３４５６７８９０</strong></li> </ul></div> </body> </html>

    • ベストアンサー
    • CSS
  • ホームページの質問です。

    ホームページの質問です。 50音表を作りたいのですが、こんな感じのタグで大丈夫でしょうか？ ちょっと自信ありません。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #iti { height: 25px; width: 300px; background-color: #FCF; float: left; clear: both; } #iti p { margin: 0px; } .ni { background-color: #9CF; height: 300px; width: 300px; float: left; clear: both; } ul { padding: 0px; margin: 0px; } ul li { width: 80px; float: left; height: 30px; background-color: #090; } --> </style> </head> <body> <div id="iti"> <p>あ行</p> </div> <div class="ni"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <div id="iti">か行 </div> <div class="ni"> <ul> <li>か</li> <li>き</li> <li>く</li> </ul> </div> </body> </html> 問題点等ありましたら、指摘願います。また、修正点があれば教えてください。

    • ベストアンサー
    • HTML
  • CSS・IEでボーダーを表示したい

    お世話になります。 ホームページ構築(CSS)に関する質問です。 よろしくお願いします。 フリーのCSSサンプルサイトより、ソースをいただいて、 ページを作ってみたのですが。 ナビゲーションリストの部分で、 FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、 表示されているのですが、なぜかIEでは表示されません。 まだ理解が足らないのですが、 「#navigation li a」の 「border-right: 1px double#fff;」あたりかなと思い、 線種を変えてみたりと、いろいろしているのですが 変化がありません。 変更すべき点をどうかご教授ください。 以下は実際のソースです。 「index.html」 --------------------------------------------------------------------------------------------------------------------------- <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>テストサイト</title> </head> <body> <div id="container"> <div id="header"> <h1>タイトル「テストサイト」 </h1> </div> <div id="navigation"> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="menu2.html">メニュー２</a></li> <li><a href="menu3.html">メニュー３</a></li> <li><a href="menu4.html">メニュー４</a></li> </ul> </div> <div id="content"> <p>テストののページです。</p> <p>上記メニューよりご利用ください。</p> </div> <div id="footer"> Copyright テスト著作権, 2012 </div> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------------- common.css --------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; font-size: 120%;} #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px double#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #content h3 { font-size: 110%; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } -------------------------------------------------------------------------- 以上が内容になります。 どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • IE用CSSが適用されない

    通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]--> <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？ 宜しくお願いします。

    • ベストアンサー
    • HTML
  • DIVタグの背景に画像を配置できない

    <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。 パスは間違っていませんが。どこが違うのでしょうか？ 宜しくお願いします。

    • ベストアンサー
    • HTML
  • IE6,IE7だとメニューが写真の裏に表示される

    こんばんは。コーディング作業をしており、ヘッダーにドロップメニュー(多階層のメニューバー)を設置し、その下に写真を置いたのですが、メニューをマウスオーバーし、2階層目のカテゴリが出てきた時に、IE6.IE7だと写真の裏に隠れてしまいます。 ※ＩＥ8、ＦＦ、Ｍａｃだと写真の前にちゃんと表示されます。 ソースを添付しますので、どこがいけないかご指摘していただけないでしょうか。 よろしくお願いいたします。 [HTMLソース] <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.5.2.js"></script> <script type="text/javascript" src="superfish.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('ul#nav').superfish(); }); </script> </head> <body> <div id="container"> <div id="header" class="clearfix"> <div id="menuBottom" class="clear"> <ul id="nav" class="clearfix"> <li><a href="#"><img src="" alt="" width="88" height="29" /></a> <ul> <li><a href="#aa">menu item that is quite long</a></li> <li class="current"><a href="#ab">menu item</a> <ul> <li><a href="#">menu item</a> <ul> <li><a href="#">short</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> </ul> </li> </ul> </div><!--#menuBottom END--> </div> </div><!--#header END--> <br /><br /><br /><br /> <div id="contents"> <div id="slide" class="fltL"> <div id="slide_body"> <ul> <li style="margin-left:300px;"><img src="" width="622" height="461" alt="" /></li> </ul> </div><!--#slide_body END--> </div> <!--#slide END--> </div><!--#container END--> </body> </html> [上のhtmlに読み込まれているＣＳＳ（style.css）] #header { width:950px; margin:0 auto; padding-top:19px; z-index:100; } #menuBottom { float:right; z-index:0; } #container { width:100%; text-align: left; } /*** ドロップメニュのＣＳＳ ***/ ul li { margin:0; padding:0; } #nav ul { position:absolute; top:-999em; width:10em; /* left offset of submenus need to match (see below) */ } #nav ul li { width:100%; height:100%; } #nav li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ } #nav li { float:left; position:relative; } #nav li:hover ul, #nav li.sfHover ul { left:0; top:2.5em; /* match top ul list item height */ z-index:99; _z-index:0; } ul#nav li:hover li ul, ul#nav li.sfHover li ul { top:-999em; } ul#nav li li:hover ul, ul#nav li li.sfHover ul { left:10em; /* match ul width */ top:0; } ul#nav li li:hover li ul, ul#nav li li.sfHover li ul { top:-999em; } ul#nav li li li:hover ul, ul#nav li li li.sfHover ul { left:10em; /* match ul width */ top:0; } /*** DEMO SKIN ***/ #nav { float:left; } #nav ul li a { display:block; position:relative; padding:0.75em 1em; border-left:1px solid #fff; border-top: 1px solid #CFDEFF; text-decoration:none; height: 100%; z-index:15; } #nav a, #nav a:visited { /* visited pseudo selector so IE6 applies text colour*/ color:#13a; } #nav li li{ background:#AABDE6; } /*** 画像部分のＣＳＳ ***/ #slide { width:624px; position:relative; } #slide_header { position:absolute; top:0px; left:0px; width:624px; height:7px; z-index:2; background: url(slide_header.png) no-repeat; } #slide_body { background: url(slide_body.gif) repeat-y 0px 0px; width:624px; margin:auto; } #slide_body img { margin:auto; }

  • 外部CSSがIEで無反映

    Web制作初心者です。 ポートフォリオとしてサイトを2つくらい作ったのですが、2つとも Google Chromeで表示確認をしていて、出来上がってから Internet Explorerでも表示確認をしてみたら、IEでは 外部CSSが全く反映されていない状態でした。 何がダメなのか全くわかりません。 お手数ですがご助言お願い致します。 ------------HTML----------------- <!doctype html> <html> <head> <meta charset="text/html; charset=utf-8"> <meta name="descrption" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/style" href="common.css"> <link rel="stylesheet" type="text/style" href="index.css"> <title> Profile-TOP- </title> </head> <body> <div id="wrapper"> <!--*************ヘッダー部分*************--> <div id="header"> <h1>My Profile Site</h1> <!--ナビゲーション部分--> <div class="navi"> <ul> <li class="top">TOP</li> <li><a href="profile.html">Profile</a></li> <li><a href="design.html">Design</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!--/navi--> </div><!--/header--> <!--************コンテンツ部分************--> <div id="content"> 　<a href="profile.html"><img src="images/NY.png" alt="ny"></a> 　<p class="please">↑<br>Please click the image!</p> 　<p class="site">当サイトは私のプロフィールやポートフォリオを掲載しています。</p> </div><!--/content--> <!--*************フッター部分*************--> <div id="footer"> <p>Copyright &copy; 2013 nnn All Rights Reserved.</p> </div><!--/fotter--> </div><!--/wrapper--> </body> </html> --------------CSS----------------- -----common----- /*----------body部分---------*/ * { font-family: serif; } body,html { background: url("images/wood_texture4.jpg") ; color: #ffffcc; margin: 0; padding: 0; line-height: 20px; height: 100%; } img { border: none; } /*--------wrapper--------*/ #wrapper { width: 900px; margin: 0 auto; padding: 0; } /*---------header---------*/ #header { background-color: #000000; margin: 0; height: 120px; padding-top: 1px; } h1 { float: left; font-size: 40pt; padding-top: 10px; padding-left: 30px; padding-right: 60px; width: 440px; margin-top: 0; margin-right: 30px; } .navi ul { margin-top: 0; } .navi ul li { list-style-type: none; float: left; width: 80px; margin-top: 28px; margin-right: 2px; padding: 6px 10px; text-align: center; background-color: #151515; font-weight: bold; } a:link { color: #cccccc; text-decoration: none; } a:visited { color: #cccccc; } a:hover { color: #ff6600; } /*------------content---------------*/ #content { background-color: #6e6e3c; clear: left; color: #000000; margin: 0; height: auto; } /*-------footer-------*/ #footer { background-color: #000000; height: 40px; padding: 10px; clear: both; padding-right: 20px; margin-top: 0; margin-bottom: 0; } #footer p { text-align: right; vertical-align: middle; } --------index.css--------- /*content*/ #content img { position: relative; left: 50px; } p { text-align: center; margin-bottom: 0; } .please { color: #ffffff; font-weight: bold; font-size: 15pt; } .site { padding-bottom: 20px; } /*現在のページナビ*/ .top { color: #990000; }

    • ベストアンサー
    • CSS
  • IEとその他のブラウザの表示

    よろしくお願いします 現在、2段落の段組をCSSで行っています 但し、1段落目と2段落目にはマージンを指定しています そこで質問なのですが どこかのサイトでfloatとmarginは一緒に指定しないほうが良いというのを見たので --------------------------------- style.css --------------------------------- div.box_left_outer{ width: 300px; background-color: #FFF9E5; float: left; } div.box_left{ width: 260px; margin: 20px 20px 20px 20px; } div.box_right_outer{ width: 310px; float: left; } div.box_right_outer2{ width: 300px; margin-left: 10px; background-color: #FFF9E5; } div.box_right{ width: 260px; margin: 20px 20px 20px 20px; } --------------------------------- test.html --------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div class="box_left_outer"> <div class="box_left"> テキスト </div> </div> <div class="box_right_outer"> <div class="box_right_outer2"> <div class="box_right"> テキスト </div> </div> <body> </html> という風に書いているのですが IEだと意図した表示になるのですが Firefoxやその他のブラウザだと右側の段組のマージンの箇所が 1つ上のdivについている感じになります Firefoxなどでも同じ表示にするにはどうしたらいいでしょうか？ よろしくお願いします

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する