- ベストアンサー
IEだとうまく表示できません。ソースのどこが悪いのでしょうか
画像はIEのものです。Firefoxだとうまく表示されるのですが、IEだと大きく崩れます。 いろいろとデバックしてみましたが、どうしてもわかりません。ソースのどこが悪いのでしょうか？本当に困っています。 問題点は以下の二つです。 (1)タイトルの右の画像が下に落ちる。 (2)画面中段の「Jan」という画像が下に落ちる。 特に困っているのが、reset.cssでブラウザデフォルトのスタイルを修正しているはずなのにうまくいかない、という点です。以前、ホームページ・ビルダーを使ったことがあり、自動的にソースが修正されてしまいました。その後、表示がおかしくなってしまったのです。 以下、ソースです。 html↓ --------------------------------------------------------- <?xml version="1.0" encoding="UTF-8"?> <!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-Style-Type" content="text/css" /> <meta name="description" content="製品化するサイトです" /> <meta name="keywords" content="製品化" /> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>タイトル</title> <style type="text/css"> body { background-image:url(image/back.gif);background-repeat:repeat-x; } </style> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/index.css" rel="stylesheet" type="text/css" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <div id="header"><a href="index.html"><img id="title" src="image/title.gif" width="614" height="160" alt="タイトル" /></a> <img id="title image" src="image/title image.gif" width="160" height="160" alt=" バナー" /></div> <div id="contents"> <div id="sidebar"> <a id="_HPB_ROLLOVER4" onmouseout="HpbImgSwap('_HPB_ROLLOVER4', 'image/down.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER4', 'image/down click.gif');" href="#"><img id="down" src="image/down.gif" width="140" height="130" alt="欲しい人" name="_HPB_ROLLOVER4" /></a> <a id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'image/sidebar site.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'image/sidebar site clilck.gif');" href="about this site.html"><img src="image/sidebar site.gif" </div> </div> </div> </body> </html> --------------------------------------------------------- reset.css↓ --------------------------------------------------------- @charset "UTF-8"; body,h1,h2,h3,h4,h5,h6,div,p,ul,ol,li,dl,dt,dd,form,input,textarea,pre{margin:0;padding:0;} ul,li{list-style-type:none;} table,img{border:0px;} body,h1,h2,h3,h4,h5,h6,td,th,p,div,input,textarea,pre,ul,ol{ font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo, Verdana,'ＭＳ Ｐゴシック',sans-serif; font-weight:normal; } a:focus {outline:none} em{font-style:normal;} hr{display:none;} address{font-style:normal;} *{line-height:1.0;} ---------------------------------------------------------
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- KI401
- ベストアンサー率53% (44/82)
reset.cssとかの問題でないのでは？そりゃ単にHPBが悪さをしたんでしょう。 どのみち、index.css, main.cssの内容が分からないとこれ以上は何も分からないので……。 明らかにHPBが改悪したと思われる個所を一度全て削除してみてください。 例えば_HPB云々と書いてある下のa要素の部分など。 <a id="_HPB_ROLLOVER4" onmouseout="HpbImgSwap('_HPB_ROLLOVER4', 'image/down.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER4', 'image/down click.gif');" href="#"> どうも 1. 画像(img要素)などをまず並べてレイアウト 2. その後HPBでロールオーバー機能をつけた(a要素が追加された) 3. imgがaの子要素になったことが原因で、元々のレイアウトが崩れた のではないかと思いますが、如何でせう？
お礼
#headerの部分を修正したところ、うまくいきました。imgの周辺で改行をすると、IEが余白を入れてしまうようでした。 また、#mainが落ちている件（＝Janが落ちている件）もwidthの修正で対応できました！ HPBのせいではなかったようです。しかし、勝手に説明もなく修正してしまったので、どうなっていたのか戻せない、という状態でした。
関連するQ&A
- ロールオーバー効果にならない。
ロールオーバー効果にならない。 宜しくお願いします。 ホームページビルダー10にてホームページを作成中です。 リンクメニューのボタンでロールオーバー効果を使おうと定番手順(参考書の記載通り)に やっているのですが、うまくいきません。 同手順でこのページはできて、このページはできない！？って感じです。 HTMLで確認してもよく分かりません(ほど素人ですが・・・)。 ご教授宜しくお願いします。 ちなみに・・・ ＜ならないパターン＞ <td height="37"><a href="http://ブログID.fc2.com/" id="_HPB_ROLLOVER8" onmouseout="HpbImgSwap('_HPB_ROLLOVER8', 'xxxx.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER8', 'xxxx.gif');" target="_blank"><img src="xxxx.gif" width="190" height="37" border="0" name="_HPB_ROLLOVER8" /></a><a href="#"> </a></td> ＜なるパターン＞ <DIV style="top : 183px;left : 498px; position : absolute; z-index : 3; " id="Layer3"><A href="home.html" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'xxxx.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'xxxx.gif');"><IMG src="xxxx" width="172" height="139" border="0" name="_HPB_ROLLOVER1"></A></DIV> どちらとも 挿入→画像効果→ロールオーバー効果の手順にて作成しました。 宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ロールオーバーとOnclickで
A href="javascript:;"target="_top" onclick="MM_nbGroup('down','group1','～.gif','detail','～.jpg',1)" id="_HPB_ROLLOVER1" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', '～.gif'); HpbImgSwap('_HPB_ROLLOVER2', '～.jpg');" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', '～.gif'); HpbImgSwap('_HPB_ROLLOVER2', '～.jpg');"><IMG src="～.gif" width="51" height="50" border="0" name="_HPB_ROLLOVER1"></A> 上のようにホームページビルダーを使って、ロールオーバーでサムネイルと大きな画像が切り替わるようにしています。 しかしサムネイルをクリックしたら、他のサムネイルをクリックするまで大きい画像が固定される方法がイマイチわかりません。 分かる方いらっしゃいましたら教えて下さい。 あまり詳しくなくて旨く説明できずにすみません。 http://irving.jp/rwr/discography.html のような 感じにしたいんです。
- 締切済み
- JavaScript
- 記述の仕方を教えて下さい。
以下のHTMLをdocument.writeを使って記述しているのですが、エラーになって動きません。 多分”と’の使い方が原因だと思います。 記述の仕方を教えて下さい。 <A id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1','hina_n_image.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','hina_m_image.gif');"><IMG src="hina_n_image.gif" width="364" height="203" border="0" name="_HPB_ROLLOVER1"></A>
- ベストアンサー
- JavaScript
- ロールオーバー効果でエラーが出ます。
ホームページビルダーの９を使用してます。 マウスロールオーバー効果の設定をしたところ、エラーが出てしまいます。 「オブジェクトを指定してください」というエラーでマウスを乗せると2回もそのエラーが出てきます。 ソフトの指示通りに設定してるのに何故エラーが出るのかわかりません。 ちなみにソース表示は、下記です。 <A onmouseout="HpbImgSwap('_HPB_ROLLOVER1','menu1.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','menu1-2.gif');" href="×××.html" id="_HPB_ROLLOVER1"><IMG src="menu1.gif" width="79" height="54" border="0" alt="×××" name="_HPB_ROLLOVER1"></A> 何がいけないのでしょうか？ このソースの前に何か記述すべきなのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダー１６のMETAタグの質問
metaタグのdiscripionの入力はしましたが、ヤフーやグーグルでタイトルの下の文章が、反映されません。前はこの設定をしていなかったので、ｈ１の文章を検索エンジンは拾って表示していました。 keywordの入力もしたのですが、今いち上手くいっているか解りません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>有限会社エムエヌ大和産業-中古建設機械/中古重機/買取・販売・リース（九州/熊本）</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.1.0 for Windows"> <META name="description" content="九州・熊本を拠点に全国的に建設機械中古販売・買取・ダブルリースを昭和58年創業以来営業致しております。中古建設機械の中古バケット・中古ブレーカー・中古エキステーションアームも各種多数取り揃えております。まずはお気軽にお問い合わせ下さい。" /> <META name="keywords" content="建設機械,中古建機,中古重機,重機買取,建機販売,レンタル,リース "/> <META name="robots"content="index,follow"> <STYLE type="text/css"></STYLE> <SCRIPT language="JavaScript"> <!--HPB_SCRIPT_ROV_50 // // Licensed Materials - Property of IBM // 5724I83 // (C) Copyright IBM Corp. 1995, 2005 All Rights Reserved. // // HpbImgPreload: // function HpbImgPreload() { var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC||isN6||isIE) { if (document.images) { var imgName = HpbImgPreload.arguments[0]; var cnt; swImg[imgName] = new Array; for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++) { swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image(); swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt]; } } } } // HpbImgFind: // function HpbImgFind(doc, imgName) { for (var i=0; i < doc.layers.length; i++) { var img = doc.layers[i].document.images[imgName]; if (!img) img = HpbImgFind(doc.layers[i], imgName); if (img) return img; } return null; } // HpbImgSwap: // function HpbImgSwap(imgName, imgSrc) { var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC||isN6||isIE) { if (document.images) { var img = document.images[imgName]; if (!img) img = HpbImgFind(document, imgName); if (img) img.src = imgSrc; } } } var swImg; swImg=new Array; //--> </SCRIPT><SCRIPT language="JavaScript"> <!--HPB_SCRIPT_PLD_50 HpbImgPreload('_HPB_ROLLOVER1', 'img/n_image161.jpg', 'm_image161'); HpbImgPreload('_HPB_ROLLOVER2', 'img/n_image18.gif', 'img/m_image18.gif'); HpbImgPreload('_HPB_ROLLOVER3', 'img/n_image19.gif', 'img/m_image19.gif'); HpbImgPreload('HPB_ROLLOVER1', 'n_image12.gif', 'm_image12.gif'); HpbImgPreload('HPB_ROLLOVER4', 'n_image16.gif', 'm_image16.gif'); HpbImgPreload('HPB_ROLLOVER6', 'n_image18.gif', 'm_image18.gif'); HpbImgPreload('HPB_ROLLOVER8', 'n_image201.gif', 'm_image201.gif'); HpbImgPreload('HPB_ROLLOVER2', 'n_image22.gif', 'm_image22.gif'); HpbImgPreload('HPB_ROLLOVER3', 'n_image23.gif', 'm_image23.gif'); HpbImgPreload('HPB_ROLLOVER7', 'n_image4.gif', 'm_image4.gif'); HpbImgPreload('HPB_ROLLOVER5', 'n_image11.gif', 'm_image11.gif'); //--> </SCRIPT> <STYLE type="text/css"> <!-- FONT{ line-height : 15px; } #FONT{ line-height : 20px; font-size : 15px; } --> </STYLE> <LINK rel="stylesheet" href="table.css" type="text/css" id="_HPB_TABLE_CSS_ID_"> </HEAD> <BODY background="blue_p8b.gif"style="margin-top : 0px;margin-left : 0px;margin-right : 0px;margin-bottom : 0px;"> <CENTER> <TABLE cellspacing="0" cellpadding="2" bgcolor="#ffffff" style="margin-top : 0px;margin-left : 0px;margin-right : 0px;margin-bottom : 0px;"> <COL span="1" width="11"> <COL span="1" width="880"> <COL span="1" width="11"> <TBODY> <TR> <TH bgcolor="#ffffff"></TH> <TH align="left" valign="middle" style="line-height : 10px;"> <H1 align="ce
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSで設定した背景画像がFirefoxだとズレて表示されます
以下のように、CSSを設定しました。 -- CSSの内容(抜粋) ------------------------------- H2{ color:#333333; background-image:url(img/title-01.jpg); background-repeat:repeat-x; padding:3px 25px; font-family:"Lucida Sans"; font-size:medium; } -- HTMLの指定 ------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>タイトル</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="info-area"> <h2>いろはにほへと</h2> ←問題なくタイトル文字の後ろに背景画像title-01.jpgが表示されている <div></div> <div></div> </div> <div id="main-area"> <h2>ちりぬるをわか</h2> ←大幅に上方にズレて表示される <div></div> <div></div> </div> …以下省略… CSSは外部読込にしてあり、HTML内には幅や高さ，色などを指定するタグは一切ありません。 問題の部分に到達するまでのタグは なお、上記の指定方法でInternetExplorer6.02とSleipnir2.8.5では 問題なく表示されています。 表示が崩れたFirefoxは3.0.11です。 Firefoxでも意図したように表示される方法はありますか？
- ベストアンサー
- CSS
- ホームページビルダー15 メニュー作成について
いつもお世話になっております。 以下のような、どなたかのご回答をもとに、ホームページビルダー15で同じような折りたたみ式のメニューを作成したいと考えおります。 参考にしたいメニューはこちらです↓ http://okwave.xrea.jp/jquery/test6797636/e.html ですが、自分の作ろうとしているメニューはCSSプロフェッショナルテンプレートの「企業」から作ったものであり、なかなかうまくいきません。 以下、自分の記述を記載いたしますが、以下のようにしたいと思います。 通常は、 メニューA メニューB メニューC というように、なっており、メニューBをクリックしたときにだけ メニューA メニューB B-1 B-2 B-3 メニューC と、サブメニューが表れ、メニューBをクリックするまでサブメニューも表示されたままにしておきたいと思います。（もちろん、メニューA～Cも、どのページでも表示されるようにする） どこに、どのように記述を入れれば、ボタンのデザインなども崩さず、思い通りのメニューになるのか、ご教示いただければと思います。 どうぞよろしくお願いいたします。 *********自分の記述（ヘッダー情報も含まれていますが無視してください）*********** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 15.0.8.0 for Windows"> <title>TOP</title> <link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts"> <link rel="stylesheet" href="container_1A_2c_left.css" type="text/css" id="hpbcontainer"> <link rel="stylesheet" href="main_1A_2c.css" type="text/css" id="hpbmain"> <link rel="stylesheet" href="user.css" type="text/css" id="hpbuser"> </head> <body id="hpb-template-01-01-02" class="hpb-layoutset-02" bgcolor="#ffffff" background="blue_p7b.gif"> <div style="top : 2px;left : 100px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"> <div id="hpb-container"> <!-- header --><br> <!-- header end --><!-- inner --> <div id="hpb-inner"> <!-- wrapper --> <div id="hpb-wrapper"><!-- main end --> </div> <!-- wrapper end --><!-- navi --> <div id="hpb-nav"> <h3 class="hpb-c-index"></h3> <ul> <li id="nav-toppage"><a href="a.html"><span class="ja">メニューA</span><span class="en">TOP PAGE</span></a> <li id="nav-concept"><a href="b.html"><span class="ja">メニューB</span><span class="en">CONCEPT</span></a> <li id="nav-service"><a href="c.html"><span class="ja">メニューC</span><span class="en">SERVICE&PRODUCTS</span></a> </ul> </div> </div> </div> </div> </body> </html>
- ベストアンサー
- その他（ビジネス・キャリア）
- IEとFirefoxの表示の違い
テーブルを使わずCSSで枠を作り、中に画像を入れてその右側に文章を表示させたいのですが、ブラウザによって表示が異なり困っています。 外部スタイルシートに以下を記載して、 body {width:600px;} .img{float:left;} div.box { border: 1px solid #000 ; padding:10px; margin:10px; } 以下のHTMLをブラウザで表示すると、枠が重なって表示されます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>test</title> </head> <body> <div class="box"> <h4>title</h4> <div class="img"> <img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> <div class="box"> <h4>title</h4> <div class="img"><img src="img1.gif" width="200" height="400" alt="img" /></div> text text text text text text<br /> </div> </body> </html> そこで、 スタイルシートのdiv.boxに height:100% ; を追加すると、IEでは画像の高さまで枠が広がりますが、Firefoxでは重なったままで変化しません。 画像の高さをpxで指定してやれば両方表示できますが、高さの設定を特にしないでIEとFirefoxで同じように表示する方法がありましたら教えてください。 よろしくお願いします。
- ベストアンサー
- CSS
- CSS : IEとFirefoxの表示差異を改善したい
grandswellと申します。 よろしくお願いいたします。 サンプルをIE、Firefoxそれぞれで見ていただけると わかっていただけると思うのですが、Firefox側が 意図した通りのレイアウトになっていません。 サンプルをIEで表示したレイアウトを Firefoxでも同じCSSで実現するにはどのような 工夫が必要でしょうか。 ぜひご教示くださいますよう、お願いいたします。 以下、サンプルのCSSとHTMLとなります。 *cssサンプル(style2.css) ---------- div.main { border-style : dashed; width : 100%; } div.main div.contents{ border-style : dashed; width : 75%; float : left; } div.contents div.contentsmain{ border-style : dashed; width : 100%; } div.contentsmain div.sidebar{ border-style : solid; float : left; width : 32%; } div.contentsmain div.entry{ border-style : solid; float : right; width : 66%; } div.main div.subspace { border-style : dashed; float : right; width : 23%; } div.footer { border-style : dashed; } ---------- *htmlサンプル ---------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style2.css" type="text/css"> </head> <body> <div class="main"> <p>main</p> <div class="contents"> <p>contents</p> <div class="contentsmain"> <p>contentsmain</p> <div class="sidebar"> <p>sidebar</p> </div> <div class="entry"> <p>entry</p> </div> </div> </div> <div class="subspace"> <p>subspace</p> </div> </div> <div class="footer"> <p>footer</p> </div> <body> </html> ----------
- ベストアンサー
- CSS
- もう一度onclickを利用した伸縮メニューの作成方法を教えてください
もう一度onclickを利用した伸縮メニューの作成方法を教えてください。 以前"onclickを利用した伸縮メニューの作成方法を教えてください。"と質問に教えていただき思ったように動きとても感謝しているですが、自分の作成しているHPにソースを書き込んでみたら伸縮メニューが開いたまま閉じませんでした。たぶん自分のページに、教えていただいたソース以外に他のサンプルから引用したスクリプトがあるので上手く行かないのではないかと思ったので再度質問させてください。 作成したページのソースが長くなるので全部書き込めないのですが、おおまかには、メインメニューが５つありロールオーバー効果を持たせています。その各メニューはonmouseoverとoutでポップアップメニュを表示させるようにしています。 作成しているソフトはホームページビルバーV14です。 別なサンプルから引用したスクリプトは、 <SCRIPT language="JavaScript"> <!-- var tid,pm_no=""; function pm_op(sel){ if(pm_no!=""&&pm_no!=document.getElementById(sel)){pm_no.style.overflow='hidden';} pm_no=document.getElementById(sel); clearTimeout(tid); pm_no.style.overflow='visible'; } function pm_cl(sel){ pm_no=document.getElementById(sel); clearTimeout(tid); tid=setTimeout("pm_no.style.overflow='hidden';",500); } //--> </SCRIPT> ソースは、 <DIV id="cont" align="center"> <TABLE width="870" border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD align="center"> <CENTER> <DIV style="width : 850px;position : relative;top : 0px;left : 0px;"> <DIV class="menu" style="left:0;" id="f1" onmouseover="pm_op(this.id);" onmouseout="pm_cl(this.id);"> <CENTER> <DIV style="text-align : center;border-style : none;width : 170px;height : 32px;bottom : auto;"><A href="#" id="HPB_ROLLOVER4" name="HPB_ROLLOVER4" onmouseout="HpbImgSwap('HPB_ROLLOVER4', 'image/n_image1.gif');" onmouseover="HpbImgSwap('HPB_ROLLOVER4', 'image/m_image1.gif');"><IMG src="image/n_image1.gif" width="170" height="32" border="0" name="HPB_ROLLOVER4"></A></DIV> <TABLE style="font-size:12px;"> <TR> . . . </TBODY> </TABLE> でid="f1"から"f5"で5つのメニューが動くようにしています。 先日教えていただいたソースと現在自分の作成したページのソースは別々なページとしては動くのですが同一ページに記述してプレビューすると先日教えていただいた"onclick"は開いたままで、動作的には"onclick"のメニューをマウスでクリックすると開いたままのメニューが一度閉じて再度開く動作をしてしまいます。 CSSがまだまだ未熟でわかり難いところも多々ありますが、わかればで結構です。 どなたか教えてください。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。修正できました。 ＞paddingを使わないでレイアウトしてみてください。（ブラウザによる違いが分からない内は） パディングが悪さをすることが多いのですね。