イメージマップの画像がIE6でリンクされません

このQ&Aのポイント
  • 依頼されたページを作成中ですが、イメージマップで作成した部分がIE6のみリンクされず困っております。
  • IEテスターにてIEの各バージョンで動作確認しましたが、バグなのか何なのか分からないので、どなたか詳しくご教示頂ければ幸いです。
  • CSSデータも添付致します。
回答を見る
  • ベストアンサー

イメージマップの画像がIE6でリンクされません

依頼されたページを作成中ですが、 イメージマップで作成した部分がIE6のみリンクされず困っております。 IEテスター(http://coliss.com/articles/browser/ie/928.html)にてIEの各バージョンで動作確認しました。 バグなのか何なのか分からないので、どなたか詳しくご教示頂ければ幸いです。 ■CSSデータ *{ margin:0px; padding:0px; } html { scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } body { margin:0 auto 0; background-color: #FFFFFF; font-family:sans-serif; font-size:8pt; } form { margin:0px; scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } #container { width:950px; margin:0 auto 0; background-color:#FEFBEE; } #logo{ margin-left:80px; height:150px; } #box1 { text-align:center; line-height:20px; height:100px; } #box2 { text-align:center; line-height:20px; height:150px; } #box3 { text-align:center; line-height:20px; height:70px; } #box4 { text-align:center; height:300px; background-image: url(../img/top_haikei.jpg); background-repeat: no-repeat; background-position: center bottom }

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

IE6で実験してみました。 ご提示のページは確かにリンクが効きません。 ソースのみをローカル保存の状態で再度試すと、きちんと円状のリンクが確認できます。 推測ですが(確認はしてません)、pngfix.jsが悪さをしていることはないでしょうか? 一時的にはずしてみて(画像は表示できなくなるかも知れませんが)リンクが生きるようになるようなら、そのへんが怪しそうですが…

popcube
質問者

お礼

fujillinさま ご回答ありがとうございます! 先程pngfix.jsを外してみたらご指摘通りリンクされたので、 ここが問題だったようです。 ただ、このタグ自体は外さないでほしいと会社から言われているので、 イメージマップ自体をやめることにしました。 アドバイス本当にありがとうございました!

その他の回答 (1)

回答No.1

http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html これでhtmlを修正してみてください。 個人的にはIE用の条件付きコメントが気になりました。7.っていう書き方で正常に読み込まれるかどうかよく知りません。

popcube
質問者

お礼

meametamu 様 ご回答ありがとうございました! お教え頂いたツールでHTMLの修正を行いましたが、 結果は変わりませんでした。 IE用の条件付きコメントは会社から依頼された通りに記述したので、 これが問題ではないような気がします。 7.という書き方以外だと、具体的にはどういった記述が良いのかお教え頂けると嬉しいです。

関連するQ&A

  • FORMのサイズがIEとFirefoxで違って困っています!

    依頼されて問合せフォームを作成しているのですが、 <input type="text">や<textarea>の部分がIEとFirefoxでサイズが違ってしまい、綺麗に表示されません。 IEで丁度いい大きさにsize指定すると、Firefoxでは大きすぎ、 Firefoxで丁度いい大きさにsize指定すると、IEでは小さすぎます。 初心者でよく分からず、大変困っております。 どなたかご教示頂きたく、よろしくお願い致します!! 【(1)のCSS】 html { scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } body { margin:0 auto 0; background-color: #FFFFFF; font-family:sans-serif; font-size:8pt; } form { margin:0px; scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } input { font-size:12px; } #container { width:957px; margin:0 auto 0; background-color:#FFFFFF; } #logo{ margin-left:80px; height:120px; } #box1{ text-align:center; line-height:20px; height:100px; } #nyuryoku{ margin:0 auto 0; width:418px; height:600px; background-image: url(../img/sinki_waku.gif); background-repeat: no-repeat; background-position: center center } #box2{ clear:both; text-align:center; line-height:20px; width:957px; height:250px; background-image: url(../img/top_haikei.jpg); background-repeat: no-repeat; background-position: center bottom } #button{ margin:0 auto 0; width:418px; }

  • CSSで背景画像を一番下にもってきたいのですが・・・

    依頼されたページを作成中ですが、 bodyに指定したbackground画像を一番下にもってくるにはどうしたら良いか分からず、困っております。 #loginの背景に指定した「top_haikei.jpg」は、 position: fixed ; bottom:0; と指定することで一番下にもってくることに成功しましたが、 bodyの背景に指定している「haikei_bottom.gif」を一番下に持ってくる方法が分かりません。 CSS初心者の為、詳細にご教示頂ける方のご回答をお待ちしております! よろしくお願い致しますm(u_u)m ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■CSS *{ margin:0px; padding:0px; } html { scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } body { margin:0 auto 0; background-color: #FFFFFF; font-family:sans-serif; font-size:8pt; background-image: url(../img/haikei_bottom.gif); background-repeat: repeat-x; background-position: center bottom; } form { margin:0px; scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } input { font-size:12px; } #container { width:950px; margin:0 auto 0; background-color:#FFFFFF; } #logo{ margin-left:80px; height:180px; } #box1{ text-align:center; line-height:20px; height:150px; } #login{ height:250px; background-image: url(../img/top_haikei.jpg); background-repeat: no-repeat; background-position: center bottom; position: fixed ; bottom:0; } #login_left{ float:left; margin-top:120px; margin-right:50px; line-height:20px; width:700px; } #login_right{ float:left; margin-top:100px; width:200px; }

  • HTML・CSSコーディングが上手く行きません

    お世話になります。 HTML・CSSコーディングを依頼されたのですが、 なかなか上手く表示されず、困っております。 外部CSSデータは下記の通りです。 html { height:100%; scrollbar-face-color: #00B7EE; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#00B7EE; scrollbar-3dlight-color: #00B7EE; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } body { height:100%; margin:0 auto 0; background-color: #FFFFFF; } form { margin:0px; scrollbar-face-color: #00B7EE; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#00B7EE; scrollbar-3dlight-color: #00B7EE; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } #container { width:100%; height:100%; margin:0 auto 0; background-color:#FFFFFF; font-family:sans-serif; background-image: url(../img/top_haikei.gif); background-repeat: no-repeat; background-position: center bottom } #logo{ float:left; margin-left:80px; height:180px; } #box1{ clear:both; text-align:center; line-height:20px; height:230px; } #login_left{ float:left; line-height:20px; width:700px; height:180px; } #login_right{ float:left; height:180px; } #footer { width:950px; clear:both; text-align:center; } ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ IEテスター(http://coliss.com/articles/browser/ie/928.html)で 表示確認しておりますが、 ブラウザのバージョンによって表示のされ方が違ってしまいます。 初心者の為、どなたか丁寧にご教示くださればと思います。 どうぞよろしくお願い致します!

    • ベストアンサー
    • HTML
  • Firefoxでの上部の余白について

    XHTMLとCSSでページを作成していまして、 ■XHTML部分 <div id="header"> </div> ■CSS部分 body{ scrollbar-arrow-color:#DDDDDD; scrollbar-base-color:#000000; scrollbar-shadow-color:#E9E9E9; scrollbar-face-color:#FFFFFF; scrollbar-track-color:#E5E5E5; scrollbar-highlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-3dlight-color:#C7C7C7; background:url(../images/bg_main.gif); background-position:center top; background-repeat: repeat-y; background-color:#ffffff; color:#ffffff; margin:0; padding:0; height:100%; } #header { font-size: 12px; color:#666666; text-align:left; width:800px; height:90px; background: url(../images/bg_header.gif) center top repeat-y; } としているのですが、Firefoxで見るとヘッダ画像(背景に指定)の 上に余白が出来てしまいます。 どうすれば無くなるのでしょうか? どうぞ宜しくお願い致します。

  • ブログでのスクロール枠の設置の仕方

    <div style="margin:0px;padding:0px;" align="left"><div style="margin:0px;padding:0px;line-height:1.3;width:200px;background-color:#FFFFFF;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 2px solid #66CCCC;font-family:'MS Pゴシック',Osaka,sans-serif;text-align:left;font-size:100%;height:5em;scrollbar-arrow-color:#66CCCC;scrollbar-3dlight-color:#66CCCC;scrollbar-darkshadow-color:#66CCCC;scrollbar-face-color:#FFFFFF;scrollbar-track-color:#FFFFFF;scrollbar-track-color:#FFFFFF;scrollbar-shadow-color:#FFFFFF;">文章挿入</div></div></div> スクロール枠です。 これをブログにはめ込んでるんですが、この枠をもう一つ横並びに貼り付けたいのですが、段落ちしてしまいます。 改行はしてないので、それでの段落ちではないです。 お分かりになる方、よろしくお願いします。 ライブドアブログです。

  • CSSでIE6だけ出る隙間をなくしたい

    お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • FC2のプラグインを左詰めにしたい

    <div style="height:150px; overflow:auto; border:1px solid #000000; background-color:#FFFFFF; color:#000000; padding:3px; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#000000; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#000000; scrollbar-shadow-color:#000000; scrollbar-track-color:#FFFFFF;">*ここにテキストや画像を入れて下さい。BOXの高さを超えないとスクロールバーは表示されません。またお洒落すクロースバーはIEのみです。*</div> 上記のプラグイン(スクロールバー付のBOX)を導入したいのですが、 表示がセンター表示になってしまうのですが、 これを左詰表示にしたいのですが、 タグをどう変更すればよいのか教えてくださいm(__)m。

  • <li>タグについて質問です。まずは添付した画像を見てください。当方は

    <li>タグについて質問です。まずは添付した画像を見てください。当方は以下のようなタグを入力し、FC2ブログへ記事を書いたのですが、丸ボッチの部分が枠の外へはみ出してしまいました。これを枠の内側へ揃えたいのですが、どうすればいいのでしょうか?尚、当方のブログ記事とスタイルシートは以下のとおりです *****ブログ記事*********************************** <ul><li>テスト1</li><!-- --><li>テスト2</li><!-- --><li>テスト3</li><!-- --><li>テスト4</li></ul> *****スタイルシート******************************* *{ margin:0px; padding:0px; } html { scrollbar-track-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-darkshadow-color:#000000; scrollbar-3dlight-color:#000000; scrollbar-arrow-color:#000000; } body { margin :15px; background-color :#FFFFFF; text-align :center; color :#000000; font-size :10pt; } table{ font-size :10pt; } img { border :0px; } form { margin :0px; } textarea,input,select { background-color :#FFFFFF; font-size :10pt; color :#000000; border :1px #000000 solid; } /* リンクの設定 ------------------------------------------------------------ */ a { text-decoration:none; color : #CC0000; } a:hover { text-decoration:underline; color : #FF0000; } /* 本文部分の設定 ------------------------------------------------------------ */ div#primary-column { float : right; width : 440px;/* コンテンツ幅 */ } div.section{ margin-bottom :15px; width : 440px;/* コンテンツ幅 */ background-color :#FFFFFF; border : 1px #000000 solid; } div.entry-date{ padding :3px 5px; background-color :#000000; text-align : right; font-weight :bold; color :#FFFFFF; } div.entry-date a{ color :#FFFFFF; } h1 { padding :3px 5px; border-bottom : 1px #000000 dotted; font-weight :bold; font-size :10pt; } .entry-body { padding :10px; line-height:1.3; } /* 追記部分 */ .entry-more{ margin :15px 0; } /* 拍手部分 */ .fc2_footer{ margin :10px 0; } /*タグ部分 */ div.tag_lnk{ margin :10px 0; } /* フッター部分 */ ul.entry-footer { list-style-position : inside; text-align:right; font-size :8pt; } ul.entry-footer li { display : inline; list-style-type : none; } (スタイルシートCSSから一部抜粋)

  • adressを一番下に表示させたい

    スタイルシート・スタンダード・デザインガイドという本を見ながらサイトを作っています。 サンプルを元にいろいろいじっていたらadressが一番下にくるはずなのに一番上に来てしまいます。 どうしたらいいでしょうか。 body { text-align:center; background-image:url(images/bg2.gif); background-color:#ffffff; } p.menu { border: 0; margin: 0; padding: 0; border:0; color:#ffffff; position:absolute; left:50px; top:50px; } p.menu img { margin:0; padding:0; } p.menu a{ padding:0; margin:0; background-color:#ffffff; } p.menu a:hover, p.menu a:active { background-color:#ffff99; } #menu2 { font-size:0.75em; margin-bottom:0; margin-top:50px; height:90%; width:197px; border:solid 1px #ff9999; position:absolute; left:50px; top:100px; background-color:#ffffff; } #menu2 a { color:#5e8eab; text-decoration:none; background-color:#ffffff; display:block; width:100%; line-height:2em } #menu2 a:hover { background-color:#c5e1ed } #menu2 span { color:#c5e1ed; display:none } .contents { width:580px; height:90%; margin-left:0; margin-right:0; margin-bottom:0; background-color:#ffffff; position:absolute; margin-top:20px; left:248px; top:130px; border:solid 1px #ff9999; } .section { margin-left:60px; margin-right:60px; text-align:left; margin-top:2em } address { font-size:0.625em; font-weight:bold; font-style:normal; color:#2d444f; position:absolute; text-align:center; text-valign:bottom; } address a { color:#2d444f; }

    • ベストアンサー
    • HTML
  • 100%ボックス・フッタ固定、IE6だけ左寄り…

    いつもお世話になっています。 画像のような構成で、100%ボックスの下にフッターを付けたページ なのですが、IE6だと左寄せになってしまいます。 いろんなCSS解説のHPを渡り歩いてみたのですが、どこが悪いのか 分からず。 どうぞよろしくお願いします。 /*100%ボックスとフッター画面の下固定のためのCSS-------------*/ html{ height: 100%; } body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ } * html div#container{ height: 100%; } div#container{ width: 800px; margin: 0 auto; background-color: #FFFFFF; position: relative; min-height: 100%;   text-align: left;/*ie6 centering*/ } body > #container { height: auto; } div#main{ padding: 0 0 60px 0; } div#main:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } /*\*/ * html #container { height: 1em; overflow: visible; } /**/ /*フッター---------------------------------------*/ #footer{ clear:both; background-color:#4682B4; position:absolute; bottom:0px; height:30px; width:100%; text-align:center; line-height:30px; font-size:80%; color:#FFFFFF; }

    • ベストアンサー
    • HTML

専門家に質問してみよう