IEのバグに詳しい方、お願いします。
- IEのバグに詳しい方、お願いします。ナビゲーション(画像をクリックすると別ページへリンク)の位置設定がIEだけ上手くいかない（Page1）。同じCSS(CSS1)を使っているのに、Page1のみヘッダーに20pxほどの余白ができる。Dreamweaver CS6を使って作成しています。W3C、書籍などでHTMLのバグについて調べたのですが解決できませんでした。
- ナビゲーション(画像をクリックすると別ページへリンク)の位置設定がIEだけ上手くいかない（Page1）。同じCSS(CSS1)を使っているのに、Page1のみヘッダーに20pxほどの余白ができる。
- IEのバグに詳しい方、お願いします。同じCSS(CSS1)を使っているのに、Page1のみヘッダーに20pxほどの余白ができる。
- ベストアンサー
IEのバグに詳しい方、お願いします。
質問したい事は2点あります。 1：ナビゲーション(画像をクリックすると別ページへリンク)の位置設定が IEだけ上手くいかない（Page1） ※firefox、Google Chromeでは正常の位置になる 2：同じCSS(CSS1)を使っているのに、 Page1のみヘッダーに20pxほどの余白ができる ※上記3つのどのブラウザにも余白ができる Dreamweaver CS6を使って作成しています。 1の質問に関してですが、W3C、書籍などでHTMLのバグについて調べたのですが（理解力不足もあるかもしれません）解決できませんでした。以下に、直したい部分のXHTMLとCSSを載せますので、わかる方いらっしゃったらお願い致します。 2の質問についてですが、PAGE2は余白が出ないので比較として載せます。 ※CSSはCSS1を使用しています。 よろしくお願いします。 --------------<page1 XHTML>-----------------------<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" /> <title>整骨院</title> <link href="base.css" rel="stylesheet" type="text/css" media="all" /> <link href="top.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="header"> <h1><img src="../k.page1/page1-2.png" alt="整骨院" /></a></h1> </div> <ul id="contens-nav"> <li id="dousagaku"><a href="dousagaku.html">動作学"</a></li> </ul> </body> </html> --------------<page1 css1>----------------------- @charset "UTF-8"; * { padding:0; margin:0; } img { border: 0 none; } body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: left; line-height: 1.5; } #header{ text-align:center; margin-left:auto;margin-right:auto; background-color:#000; } #h1{ margin: 0px; padding: 0px; } --------------<page1 css2>----------------------- @charset "UTF-8"; #contens-nav{ position: absolute; float: left; height: 200px; margin-top: 30px; margin-right: 23px; margin-left: 10px; list-style: none; top: 427px; left: 743px; display:inline; } #contens-nav li a{ display: block; height: 0; padding-top: 214px; overflow: hidden; background-image:url(../k.page1/dousagaku2.fw.png); background-repeat:no-repeat; } #dousagaku{ left:0px; } #dousagaku, #dousagaku a{ width: 214px; } #dousagaku a{ background-position: 0 0px; } #dousagaku.current a, #dousagaku a:hover { background-position: 0 -220px; } --------------<page2 XHTML>----------------------- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" /> <title>動作学</title> <link href="base.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="header"> <h1><img src="../page2.dousagaku.png" alt="動作学" /></h1> </div> </div> </body> </html>
- ami6149
- お礼率100% (3/3)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
Firebugを使ってみるのが一番手っ取り早いかと思います。 今後の為にも、是非一度お試しください。 ちなみに、IEの場合はFirebug Liteが使えます。 http://getfirebug.com/firebuglite#Stable ここの「Firebug Lite」をお気に入りに入れ、デバッグするページを開いた状態でこのお気に入りページを開いて下さい。 デバッグ用のJavascriptが動作します。
その他の回答 (1)
- outbrave
- ベストアンサー率60% (231/380)
Page1 □□□□<link href="base.css" rel="stylesheet" type="text/css" media="all" /> 全角スペースを削除。 IE のバージョンは何？ IE9 だと違いがわかりませんでした。
お礼
outbrave様 Page1の余白ですが、教えて頂いた通り行ったら解決できました。 ありがとうございます。 IEは、IE7だと思います。 調べて頂きありがとうございます。
関連するQ&A
- XHTML+CSS IE5.5で見ると崩れる
皆様こんにちは、XHTML+CSSで初歩を勉強してる者ですがどうして判らない事があるので教えていただければ助かります。 判らないことは XHMLのソースに <!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> <link href="oooo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="a"> <div id="b"> id "b" </div> <div id="c"> id "c"</div> <div id="d"> id "d"</div> <div id="e"> id "e"</div> </div> </body> </html> と記入しております CSSのソースは @charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px; padding: 0px; } #a { background-color: #999999; width: 400px; border: 1px solid #66FF00; } #a #b { background-color: #006699; width: 400px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #996600; } #a #c { background-color: #00CC99; margin: 5px; float: left; width: 100px; display: inline; } #a #d { background-color: #99FF66; width: 285px; float: left; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; display: inline; } #a #e { clear: both; background-color: #0000FF; height: 20px; } と記入しております。 IE8,7,6では自分の描いたイメージどうり表示されるものの、 IE5.5では崩れてしまいます。 作成ソフトはAdobe Dreamweaver CS3で作成しております。 ブラウザーの互換性チェックしても何も問題は無いのですがどうしてでしよう？わかる方おしていただけると助かります。
- ベストアンサー
- CSS
- 背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を 位置指定したいのですが、うまく反映されませんでした。 「 background-position: center center; 」「 background-position: center center; 」 がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。 「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが 画面サイズを１０２４×７６８から１２８０×１０２４に変更すると 中央から左寄りにずれてしまいます。 下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら アドバイスの程宜しくお願いいたします。 － 画面サイズを変更すると位置がずれてしまうソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- － HTML － <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" /> <img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- － 検索でヒットした位置指定のソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- － HTMLは上記と同じ －
- ベストアンサー
- HTML
- 自作ＨＰのレイアウトがセンターにきません！＞＜。。
サイトのレイアウト構成は、『ヘッダー・２段組み・フッダー』をそれぞれ分かりやすく色づけしたのですが、なぜか２段組みのとろだけ、センターにきません。 また、３つの構成に上下に隙間が出来てしまいます。 誰かどこがオカシイのか教えてください。 下記にXHTML、CSSを入力しました、メモ帳等にコピペして見て頂けないでしょうか？ ご回答お待ちしております。 【XHTML】 <?xml version="1.0" encoding="shift_jis"?> <!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> <title> Ｌｉｓｔ </title> <link rel="stylesheet" href="style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div class="box_header"> </div> <hr /> <div class="box_a"> </div> <div class="box_b"> </div> <hr /> <div class="box_footer"> </div> </body> </html> 【CSS】 @charset "shift_jis"; body { background-color: #ffffff; margin-left: auto; margin-right: auto; font-family: Osaka, "ヒラノギ角ゴ Pro W3","小塚ゴシック Std B","ＭＳ Ｐゴシック",; } hr { height: 1px; width: 100%; background-color: #000000; } div.box_header { background-color: #ff0000; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; } div.box_a { background-color: #808080; float: left; width: 800px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_b { background-color: #0000ff; float: left; width: 400px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_footer { background-color: #008000; clear: left; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; }
- ベストアンサー
- レンタルサーバ・ASP
- CSSが反映されない！ソース公開
なぜかCSSが表示されずに困っています。 解決方法をご指導願います。 CSS↓（ファイル名screen.css） * { margin: 0; padding: 0; list-style: none; text-decoration: none; } body { margin: 25px 0 25px 0; font: normal 11px Trebuchet MS, Sans-serif; background: #000; color: #999; text-align: center; } #container { width: 320px; margin-left: auto; margin-right: auto; border: 1px solid #666; padding: 250px 25px 25px 25px; background: url("../images/top.jpg") no-repeat; text-align: left; } h1 { font: normal 20px Georgia, Sans-serif; margin-left: 45px; margin-bottom: 20px; } h1 span.highlight { color: #efefef; } h1 span.small { font-size: 11px; color: #333; } h2 { margin-top: 15px; margin-left: -25px; padding-left: 20px; border-left: 5px solid #666; font: bold 11px Trebuchet MS, Sans-serif; } INDEX.HTML↓（前半部分のみです） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen"> </head> <body> はじめてのHP作成です。凡ミス等ご指導よろしくお願いします。
- ベストアンサー
- HTML
- 画像の貼り方教えてほしいです
CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px ｝ 画像の部分のCSSはこんな感じです。 htmlは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。 ここまで何が間違っているかわかりません。 初心者ですがどなたかわかる方よろしくお願いします。
- 締切済み
- HTML
- CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、 突然CSSが読み込まれなくなりました。 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" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。 どちらもエンコーディングはUTF-8です。 ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、 プレビューまたはサーバーにアップすると反映されません。 なにが原因なのでしょう。。。 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************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=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- IE6 で余分な border が表示されてしまいます。
CSS と XHTML で FAQ を作っているのですが、IE6 で表示した場合に余分な border が入ってしまいます。 FireFox ではきちんと表示されます。 IE7 では確認していません。 ソースは以下の通りです。 <!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> <style type="text/css"> <!-- div.qa { font-size: 15px; letter-spacing: 1px; line-height: 130%; padding: 10px 2px; margin: 10px 0; border: 3px #46a double; } div.qa_left { float: left; width: 8%; text-align: right; } div.qa_right {} --> </style> </head> <body> <div class="qa"> <div class="qa_left"> Ｑ：<br /> Ａ： </div> <div class="qa_right"> 質問です。<br /> 答えです。 </div> <div class="clear"> </div> <div class="qa_left"> Ｑ：<br /> Ａ： </div> <div class="qa_right"> 質問です。<br /> 答えです。 </div> </div> </body></html> 何か方法はありますでしょうか？ よろしくお願いします。
- 締切済み
- CSS
- CSSの外部参照について。
XHTMLの内部にCSSを記述すると認識されますが、CSSを外部参照で指定すると、認識されずここでいうindex.htmlに記述した構文しか表示されません。 初心者です。 いくらXHTML,CSSの本や検索をしても中々理解がはかどらず、思うようにいきません。初歩的な間違いだと思いますが、どうぞよろしくお願い致します。ｍ（＿ ＿）ｍ index.html,works.htmlとCSSの記述場所を外部参照にし、HPをつくろうとしています。 XHTMLファイルはindex.html,works.htmlで （biography.htmlやaccess.htmlは後でつくります。）、 CSSはcssというファイルに、中にはstyle.cssがあります。画像はimgのフォルダにあります。 この回答にある４つの方法も参考にしてみたのですが、外部参照CSSは認識されませんでした。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1120846271 (次にCSSが置いてあるディレクトリ内に新規フォルダを作りその中にHTMLがある場合 <link href="../○○.css" rel="stylesheet" type="text/css">とあったので、今はこう記述しています。<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />） *XHTMLソース <?xml version="1.0" encoding"utf=8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.dtd"> <html xmlns=http://www.w3.org./1999/xhtml" xml:lang="ja" lang="ja"> <?xml version="1.0" encoding"utf=8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.dtd"> <html xmlns=http://www.w3.org./1999/xhtml" xml:lang="ja" lang="ja"> <head profile=""> <title>***</title> <meta http-equiv="content-language" content="ja" /> <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" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> </head> <div id="wrapper"> <div id="header"> <h1>***</h1> </div> <div id="main"> <ul> <li class="biography"><a href="#">>> Biography</a></li> <li class="works"><a href="works.html#works">>> Works</a></li> <li class="access"><a href="#">>> Access</a></li> </ul> </div><div id="footer"> <ul> <li><a href="#">sitemap</a></li> </ul> </div> </div> *CSS body,div,ul,ol,li,h1,p{margin:0; padding:0;} body{ text-align:center; min-width:780px; background:#f5f5f1; coler:#666666; fontfamily:Tahoma,"Lucida Geande", Arial,sans-serif; font-size;62.5%; } h1{display:none;}h1 #wrapper{width:740px; margin:0 auto; text-align:left;} #main a {height:100px; color:#ffffff; font-size:1.8em; text-tramsform: uppercase; text-decoration: none; display: block;} #main a:hover,a:active{color: #cccccc;} #main ul{list-style:none;} #main ul li{padding:5px 0px 5px 0px;} #header{height:115px; margin:15% 0 0 0; background:url(.img/image/blue.gif) no-repeat left center;} .biography{background:url("blue.gif") no-repeat left center;} .works{background-image:url(./img/works.gif) no-repeat left center;} .access{background-image:url(./img/access.gif) no-repeat left center;} #footer ul li {padding:10px; display:inline;} #footer ul {text-align:right;} #footer p {text-align:center;} どうぞよろしくお願い致します。
- ベストアンサー
- その他（インターネット・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
お礼
utun01様 ご回答ありがとうございます。 Firebugですが、Firebug Liteを使ってみました。 ですが、開くことができましたが、使い方がいまいちよくわからず解決には至っておりません・・・ もう少し勉強してみたいと思います。 ありがとうございました。