ＩＥで表示場所がずれる問題の解決方法は？
- ＦＣ２ブログで３カラム(３段組)のレイアウトでボックスを配置したところ、ＩＥのみ表示がずれてしまいます。他のブラウザでは問題ありません。どうすれば解決できるでしょうか？
- 質問者はＦＣ２ブログで３カラム(３段組)のレイアウトにボックスを配置し、スクロールにあわせて追尾するようにしたいと考えています。しかし、ＩＥのみ表示場所がずれてしまいます。他のブラウザでは問題ありません。解決策を教えてください。
- ＦＣ２ブログで３カラム(３段組)のレイアウトにボックスを配置していると、ＩＥで表示場所がずれてしまいます。他のブラウザでは問題ありません。どのようにすれば解決できるでしょうか？
- ベストアンサー
IEのみ表示場所がずれる。
ＦＣ２ブログでテンプレートを編集しています。 ３カラム(３段組)のレイアウトで、一番左側の少し下のほうにボックスを配置、 スクロールにあわせて追尾するようにしたいと思っています。 chromeやFirefoxでは指定の場所に問題なく配置されるのですが、 ,ＩＥのみ表示がずれて困っています。(具体的には画面右側あたりに表示されてしまう) 他のブラウザで問題ないので、ＩＥだけずれる要因がさっぱり思いつきません。 どなたかわかる方いらっしゃいませんでしょうか。 ＊ブログのテンプレート自体は1200pxで固定 HTML部分 ********************************************** <div id="wrap"> <ul id="social_box"><br> <a href="■"><img src="●" border="0"></a> <br><br> <a href="■"><img src="●" border="0"></a></ul> <div id="main"></div> <div id="side"></div> </div> ********************************************** CSS部分 ********************************************** #wrap{ width:960px; margin:0px auto; } #social_box{ background:#fff; width:60px; padding:0px; margin-left:-110px; text-align:center; position:fixed; bottom:95px; list-style-type:none; } #main{ width:660px; float:left; } #side{ width:300px; float:left; } ***********************************************
- balanbajp2
- お礼率10% (86/797)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
FC2はわかりませんが、IEと他の標準ブラウザで差が出る場合、もっとも疑わなければならないのは、IEが互換モードで動作している可能性です。 IEは、かってユーザーの取り込みと他のブラウザを排斥するために独自の仕様を取り入れていました。その後IEもウェブ標準に倣うことになりますが、かってのIEのために作られたページを表示するために「互換モード」をもっています。 そのIEを標準モードで動作させるためには、DOCTYPEを適切に記述する必要があります。 [HTML4.01strict]でしたら、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> と書くことで、Mac用IEも含めて標準モードで動作します。 ⇒doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=doctype%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&hl=ja ) （現状ではHTML4.01strictがもっとも良いでしょう。transitinalではありません。） また、当然ですが、 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。( http://jigsaw.w3.org/css-validator/#validate_by_input )』 もとても重要です。正しく書かれていないHTMLの場合、ブラウザは何とか表示しようと適当に補完して表示を試みます。その方法はブラウザごとに異なるため、差が出てしまいます。 スタイルシートを書き始める前に ⇒Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) でチェックしておく癖をつけましょう。 ・<ul>内に<br>や<a>は入ることは出来ません。 <ul>内に存在しうるのは<li>のみです。 ⇒<!ELEMENT UL - - (LI)+ ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL ) と書かれているのは、--(前後のタグを省略できない、(LI)がひとつ以上 と書かれています。 また<br>は通常のHTML文書には登場しません。「ひとつの段落でありながら改行する」という強制改行です。間隔を広げるために使用するものではありませんし、段落を示すものではありません。 ※先日書いたサンプルが、こちら( http://okwave.jp/qa/q8246537.html )の回答No.2にあります。 DOCTYPEを上記に変更して、HTML4.01strictに変更し そこで示した示したスタイルシートを次に書き換えてみてください。 () div.header,div.section,div.footer{ width:90%;min-width:620px;max-width:1000px; margin:0 auto; padding:5px; } div.section{position:relative;min-height:400px;} div.section div.nav,div.section div.aside{/* 子孫セレクタ */ position:absolute;top:0; width:200px;height:100%; } /*div.section div.nav{left:0;}*/ div.section div.nav{height:200px;bottom:10px;position:fixed;top:auto;} div.section div.aside{right:0;} div.section h2,div.section div.section{ margin:0 210px; } div.section div.section{ width:auto;min-width:0;min-height:200px; margin:0 210px; } /* たったこれだけ!---おまけに分かりやすく色分け */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:silver;} div.section div.section{background-color:white} div.section div.nav{background-color:yellow;} div.section div.aside{background-color:lime;} div.footer{background-color:fuchsia;}
関連するQ&A
- ボーダースタイルがうまく表示できない
#content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。 どこが間違っておりますか？ アドバイスを宜しくお願いします。
- ベストアンサー
- HTML
- テキストの揃え方について
CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }
- ベストアンサー
- CSS
- ieとfirefoxでdiv枠に２pxのズレ
宜しくお願い致します。 現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。 何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div><!-- /header --> <div id="goods"> <div id="top-menu"> </div><!-- /top-menu --> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が 右に２pxにずれる。 どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div><!-- /goods --> <!-- ################################################################################## --> <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div><!-- /col_05 --> <br style="clear:both;"> </div><!-- /menu --> <br style="clear:both;"> <!-- ################################################################################## --> </div><!-- /wrap --> </body> </html>
- ベストアンサー
- CSS
- フロートするとメニューが落ちる IE6で不可
以下のようなhtmlを作成し、CSSを適用しました。 メニューを作成する為に、120×50のメニューボタンを横並びにする為、 フロートを使ったのですが、 FireFoxでは正常に表示されるのですが、 IE6だとメニューが一文字ずつ、落ちて表示されてしまいます。 どうすればいいのでしょうか。 ■html <div id="wrapper"> <div id="header"> <ul> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> </ul> </div> <div id="left"> </div> <div id="right"> </div> <div id="footer"> </div> </div> ■CSS body { text-align:center; font-size:small; } #wrapper { text-align:left; margin:0 auto; width:600px; } #header { } #left { float:left; width:200px; } #right { float:left; width:400px; } #footer { clear:both; } #header li a { display:block; float:left; width:120px; height:50px; }
- ベストアンサー
- HTML
- リスト表示を左に寄せたい
いつもお世話になります。 下記のようなCSSで縦並びのリスト表示をさせていますが、 どうしてもリスト（全体）が左に寄らないので困っています。 できたらボックス（id-=navi）の左から10ピクセルぐらいのところから リストを始めたいのですが・・・ （ちなみに3段組みの一番左のボックスです） 現在はおそらく30pxくらいのところから始まっていて、何をしてもうごきません。 よろしくお願いします。 ---------CSS------------------ #wrapper { width: 855px; background-color:#A96223; } #main{ float:left; width:675px; background-color:#EBE3BE; } #navi{ float:left; width:150px; background-color:#A96223; padding-top:20px; padding-left:10px; text-align:left; margin: 0px; } #advertisement{ float:right; width:30px; background-color:#A96223; } #footer{ clear:both; background-color:#804C2E; height:20px; } #navi ul{ list-style:none; margin:0px; padding:0px; } #navi li{ list-style:none; color:#FFFFFF; margin-left:0px; padding-left:10px; line-height:10px; background-image:url(img/common/yajirushi.gif); background-repeat:no-repeat; background-position:left center; } --------------html---------------------- <body> <div id="wrapper"> <div id="navi"> <ul> <li>TOP</li><br /> <li>新着情報</li><br /> <li>おすすめメニュー</li><br /> <li>ご宴会・パーティー</li><br /> <li>お店のご案内</li><br /> <li>イベントご案内</li><br /> <li>お得クーポン</li><br /> </ul> </div> <div id="main"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="advertisement"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="footer"> </div> </div> </body>
- ベストアンサー
- HTML
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- javascript cssの値を取得、変更
タイトルの通りですが、javascriptにてcssの値を取得することはできますでしょうか？ 考えている機能は、URLを指定するtextboxがあり、そこに入力したURLのボックスを解釈し、分解してmarginやpadding、border、width、height、合計縦幅、合計横幅…といった情報を出してくれる。その際できればcssで指定のないものも表示したい。いらない要素は破棄。 例： <html><style type="text/css"> #wrap{ width:250px; height:300px; margin:5px 10px; padding:10px 5px; } #hoge{ width:250px; height:50px; border:5px solid; } #moge{ width:100px; height:150px; margin:5px 10px; padding:10px 5px; } </style> <body> <div id="wrap"> <div id="hoge"> <ul> <li>aaa</li><li>bbb</li> </ul> </div> <div id="moge"> <img src="dammy1.gif" /> <img src="dammy2.gif" /> </div></div> </body></html> 適当ですけど、こんな感じだったら、 <html><style type="text/css"> #wrap{ background:#333; width:250px; height:300px; } #hoge{ background:#666; width:250px; height:50px;} #moge{ background:#999; width:100px; height:150px; } </style> <body> id名<br /> #wrap<br /> #hoge<br /> #moge<br /> … <div id="wrap"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="hoge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="moge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> </body></html> こんな感じにしてhtmlを吐き出す。 そんなことは可能でしょうか？少し大変になっても可能なら頑張って作ろうと思っています。よろしければ教えていただけないでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
- お世話になっております。fc2でblogを運営しているものです。
お世話になっております。fc2でblogを運営しているものです。 テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。 以下ソースになります。 HTML： <!--navi--> <div id="navi"> <div class="navi01"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン トップ" border="0" width="120" height="30" /></a> </div> <div class="navi02"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン イラスト" border="0" width="120" height="30" /></a> </div> <div class="navi03"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン マンガ" border="0" width="120" height="30" /></a> </div> <div class="navi04"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン その他" border="0" width="120" height="30" /></a> </div> <div class="navi05"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン 掲示板" border="0" width="120" height="30" /></a> </div> <div class="navi06"> <a href="○○○○○○"><img src="○○○○○○" alt="blog ボタン メール" border="0" width="120" height="30" /></a> </div> </div> <!--navi--> CSS： #navi { margin : 0 auto; margin-top : 5px; width : 800px; } .navi01 { float : left; margin-left: 15px; } .navi02 { float : left; margin-left: 10px; } .navi03 { float : left; margin-left: 10px; } .navi04 { float : left; margin-left: 10px; } .navi05 { float : left; margin-left: 10px; } .navi06 { float : left; margin-left: 10px; } です。navi01～navi06までがボタン。それをnaviでグループ化しているイメージです。 ○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。 どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。
- ベストアンサー
- ブログ
- IE6で見るとメニューバーが崩れてしまいます
ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。 〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }
- ベストアンサー
- ネットトラブル
- コンテンツとコンテンツの詰まり
Windows XP あるいは8 HTML 4.01 コピー ～ TOP.html copyTOP.css あああああ と いいいいいの間隔はあいているのに いいいいい と うううううの間隔はなぜか詰ってしまっています。 間隔を空けるにはどうしたらいいでしょうか？ コードは以下の通りです。 [ HTML 側 ] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Transitional.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="～"> <title>aaaaaaaaaa</title> <link rel="stylesheet" href="copyTOP.css" type="text/css"> </head> <body> <div id="zentai"> <div id="part"> <p class="title">あああああ</p> <div id="partnerwaku"> <div id="partnerimage"> <a href="" alt="のロゴ" class=""></a> <a href="" alt="のロゴ" class=""></a> <a href=""><img src=".gif" alt="のロゴ" class=""></a> <a href=""><img src=".jpg" alt="のロゴ" class="A"></a> <a href=""><img src=".jpg" alt="のロゴ" class=""></a> </div> </div> </div> <div id="PR"> <PR> <br> <div id="PRsection"> <br> <a href=""> <img src="" alt="" class="PRimage01"></a> </div> </div> <div id="PR2"> <br> <PR> <br> <div id="PRsection2"> <br> <a href=""> <img src="" alt="" class="PRimage02"></a> </div> </div> <div id="columnwaku"> <div id="columnbun"> <p class="title">いいいいい</p> <div id="columncontents"> <p><a href=""><img src =".jpg" class="columnarticle01"></a></p> </div> </div> </div> <br> <br> <br> <br> <div id="PR3"> <br> <PR> <br> <div id="PRsection3"> <br> <a href=""><img src="" alt="" class="PRimage03"></a> </div> </div> <br> <br> <br> <br> <br> <div id="questionnairesection"> <div id="questionnaire"> <p class="title">ううううう</p> <div id="questionnairecontents">えええええ</div> </div> </div> <div id="PR4"> <br> <ddd> <br> <div id="PRsection4"> <br> <a href=""> <img src="" alt="" class="PRimage04"></a> </div> </div> <div id="pagetop"> <br> <br> <a href="#logoimage">ページの先頭へ▲</a> </div> <hr class="beforefooter"> <div id="aboutus"> <div id="aboutussection"> <p class="aboutustitle">管理会社</p> <p><a href="Aboutus.html"><img src ="Aboutus.jpg" class="aboutusimage"></a></p> </div> </div> <br> <br> <hr class="beforefooter"> </div> <!--全体のdiv--> </body> </html> [ css側] @charset "Shift_Jis"; body { overflow-y:auto overflow-x:auto text-align:center; cursor:url("images/.png"); } #allitem{ cursor:url("images/.png"); } #zentai{ width:1000px; margin-left:auto; margin-right:auto; } .title{ margin-top:0px; margin-bottom:0px; font-size : 20px; border-style:solid; width:592px; background-color:#FFFF99; padding:3px; } #part{ clear:left; float:left; height:180px; width:642px; padding-right:147px; font-size : 20px; } #partnerwaku{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR{ float:left; width:180px; height:120px; } #PRsection{ border-style:solid; border-color: #000099; } #PR2{ float:left; width:185px; height:150px; } #PRsection2{ border-style:solid; border-color: #000099; } .PRimage01{ width:170px; height:80px; } .PRimage02{ width:165px; height:100px; } #kuhaku{ clear:left; height:20px; } #columnwaku{ float:left; clear:left; height:130px; width:790px; } #columnbun{ height:120px; width:600px; } #columncontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } .columnarticle01{ height:70px; width:400px; background-color:#CC99CC; } #PR3{ float:left; width:185px; height:150px; } #PRsection3{ border-style:solid; border-color: #000099; } .PRimage03{ width:165px; height:100px; } #questionnairesection{ clear:left; float:left; height:130px; width:1050px; } #questionnaire{ width:600px; border-radius: 20px; } #questionnairecontents{ height:140px; width:600px; border-style:solid; border-color: #000099; } #PR4{ float:left; width:185px; height:150px; } #PRsection4{ border-style:solid; border-color: #000099; } .PRimage04{ width:165px; height:100px; } 文字制限のため省略
- ベストアンサー
- HTML
お礼
ありがとうございます。質問後、自分でいろいろ調べ、ＣＳＳハックでIEのバージョン別に個別で指定したところ解決しました。