- 締切済み
IEだとディスプレーによって表示が違います
理由があって、全画面表示で左に110pxの余白、続いてcontainerの770pxを表示したいのですが無理でしょうか？ Firefoxだと大丈夫なのですが！IEは無理なのでしょうか？ IEで観ると17インチディスプレーの場合、上手く左に100pxの余白、続いてcontainerの770pxが表示されるのですが、15インチディスプレーだと左に110pxの余白、containerの770pxがセンターリングされてしまいます。 見た目では110pxの余白+150pxの余白+770pxといった感じです。 #container { width :770px; line-height: 140%; text-align: left; margin-left: 110px; margin-right: auto; padding: 0; } #blog { width: 540px; padding: 0; float: right; overflow: hidden; } #links { width: 190px; float: left; margin: 0 0 10px 0; padding: 0; font-family: verdana; font-size: 12px; text-align: left; }
- masu4649
- お礼率57% (11/19)
- ブログ
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
CSSだけでは何とも言えない 様々な要因が加わってもくろみ通りに行っていないとしか。 >上手く左に100pxの余白 少なくとも containerはmarginが110pxになってるから100pxって誤入力？ とりあえず containerのmargin-right:auto を消してみたら良いんじゃないかな。
関連するQ&A
- IEでテンプレートの表示が変です
理由があって、全画面表示で左に110pxの余白、続いてcontainerの770pxを表示したいのですが無理でしょうか？ Firefoxだと大丈夫なのですが！IEだと表示が異なります。 IEで観ると左に110pxの余白、containerの770pxがセンターリングされてしまいます。見た目では110pxの余白+150pxの余白+770pxといった感じです。 ディスプレーのサイズによっても違うようです。15インチ、17インチともにＩＥでは思い通り表示されませんが、19インチだと表示されます。 #container { width :770px; line-height: 140%; text-align: left; margin-left: 110px; margin-right: auto;（削除すると19インチもセンターリングされてしまいました） padding: 0; } #blog { width: 540px; padding: 0; float: right; overflow: hidden; } #links { width: 190px; float: left; margin: 0 0 10px 0; padding: 0; font-family: verdana; font-size: 12px; text-align: left; }
- ベストアンサー
- ブログ
- ■IE表示 位置ずれ
■IE表示 位置ずれ お世話になっております。あるサイトから無料のテンプレートを入手しましたが IEでは「left」が画面の中央に表示されてしまいますが解決方法はありますでしょうか？ body{ min-width: 412px; width:985px; margin:0 auto; font-family:Tahoma; font-size:11px; color:#565656; position:relative #container { padding-left: 172px; padding-right: 238px; height:100% #left { width: 172px; right: 172px; margin-left: -100%; #right { width: 238px; margin-right: -238px; 初心者で申し訳ございませんが宜しくお願いいたします。
- ベストアンサー
- HTML
- css: IEでsidebarが表示されない
cssで2カラムのページを左右を両方floatさせて作っています。 firefoxでは表示されるsidebar（背景、画像、テキストを含むすべて）がIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。 どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。 ちなみにCSSの主要部分は以下のとおりです。 /*--- container ---*/ #container {position: relative; background:url(images/background.jpg) repeat-y; width: 800px; hight: 600px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; border: 0; } /*--- header ---*/ #header {width: 800px; height: 107px; margin:0;} /*--- side-bar ---*/ #side-bar{position:absolute; background: transparent url(images/menu_bckgrnd.png) center center no-repeat; width: 150px; padding:0; float:left;} #side-bar ul { margin: 0; padding: 50px 50px 50px 50px; ist-style: none; width:30px;} #side-bar li { margin: 0; padding: 0;} #side-bar li a{ display:block;} #side-bar a:hover{position: relative; top: 1px; left: 1px;} /*--- main-nav: content area ---*/ #main-nav {background: url(images/design.png) top left no-repeat; width: 610px; margin-top: 0 0 0 150px; padding: 0 10px 0 30px; float:right;} #main-nav a:hover {position: relative; top: 1px; left: 1px; } #content1{ float:left; width:200px; margin: 0 2px 20px -20px; background:#fff;} #content2{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} #content3{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} /*--- footer ---*/ #footer {width: 800px; height: 100px; background: transparent; margin: -100px 0 0 0; clear: both; text-align:center; padding-top:50px;} /* -- clearfix -- */ .clearfix{ zoom:1; } .clearfix:after{content:'.'; display:block; visibility:hidden; height:0; clear:both;}
- ベストアンサー
- CSS
- IE6での表示がうまくいかず困っています
すみません！先ほど同様の質問をしたのですが、文字数オーバーで途中で切れてしまっていたので本当に恐縮ですが再度お願いいたします。 コーディングを勉強中なのですが、どうしてもIE6での表示がうまくいかず、大変困っています。色々ググって調べてみたのですが、決定的な原因がわからず本当にどうすればよいのかわかりません・・・。どなたかご教示いただけませんでしょうか。 他のFireFOX,Safari,IE8では多少のズレはあるものの普通に表示されました。IE6では背景画像とフッターのみしか表示されない。という状況です。 CSSは以下です。 /* generated by csscreator.com */ html{ height:100%; } body{ margin:0; padding:0; text-align:center; color: #fff; background: #000000 url("../images/back-right.gif") repeat-x; position: relative; text-decoration: none; height:100%; } body > #pagewidth { height: auto; } img { border-style:none; } ul{ margin:0; padding:0; text-align:left; } li{ list-style-type: none; line-height:100%; } p{ margin:0; padding:0; text-align:right; } #bg_wrap { height: 423px; width: 50%; top: 0px; background: url(../images/back-left.gif) repeat-x; position: absolute; } #pagewidth{ width: 918px; height: 100%; min-height: 100%; text-align:left; margin: 0px auto; position: relative; background: url(../images/left-col.gif) left repeat-y; } #left-container{ width: 130px; height: 100%; float:left; position:relative; padding-left: 23px; } #header{ width: 100%; height: 266px; color: #000; background-color: #fff; } #navigation{ width: 100%; color: #fff; padding-bottom: 5em; } #main-container{ width: 764px; float: right; display:inline; position: relative; } #maincontents{ padding-right: 21px; } #footer{ height: 50px; width: 100%; text-align:left; padding-left: 95px; clear: both; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} } 以上です、よろしくお願いいたします。
- ベストアンサー
- HTML
- DreamweaverMXのデザインビューが一部表示されなくなる
DreamweaverMXのデザインビューが一部表示されなくなってしまい困っています。 どうして表示されなくなったのか具体的に言うと、 3カラムのレイアウトをdivを使いCSSで作成していました。firefoxで見るとフッターがメインコンテンツの上部にきてしまっていたので、高さを指定してあった「右メニュー」や「左メニュー」、また「メインコンテンツ」の部分のdivの高さをすべて「auto」にし、フッター部分のCSSに「clear: both;」を記入し、修正を図りました。 これでその問題は解決されましたが、その後、DreamweaverMXのデザインビューの一部（メインコンテンツ、3カラムの真ん中部分です。）が途中から真っ白になってしまっていて、そこに書かれていたテキストや画像等すべて真っ白で、デザインビューで作業できなくなってしまいました。 真っ白でも、その部分に書いたテキストはマウスで反転させたりすると黒くその部分が反転するので、テキスト等はそこにあるようですが、真っ白ですから、作業ができません。 コードビューで作業できますが、それではDreamweaverMXを使う意味がありません。デザインビューで作業できれば、非常にスピーディーに出来るので、こうなってしまい非常に困っています。 「すべてのビジュアルエイドを非表示」にしたら直ったこともあり、そうして見ましたが、今回は駄目です。 CSSコードの書き方に問題があるかもしれません。 以下が、そのCSSコードです。 /* container */ #container { width: 900px; margin-right: auto; margin-left: auto; text-align: left; height: auto; } #incontainer { width: 700px; float: left; height: auto; } /* メイン */ #main { float: right; width: 480px; padding: 10px; height: auto; } /* 左メニュー */ #ml { float: left; width: 200px; height: auto; } #box-ml { padding: 0px 0px 10px; width: 200px; float: left; height: auto; } #ul-ml { margin: 0px; padding: 0px; display: inline; text-indent: 0px; list-style-type: none; text-align: left; } #li-ml-kg { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 26px; background-image: none; text-indent: 20px; background-color: #66CC00; border: 1px solid #CCCCCC; color: #FFFFFF; font-size: 13px; } #li-ml a { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 25px; background-image: url(buttons/li-bg.gif); text-indent: 20px; font-size: 13px; } #li-ml a:hover { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 25px; background-image: url(buttons/li-bg-m.gif); text-indent: 20px; color: #FF0000; font-size: 13px; } /* 右メニュー */ #mr { width: 200px; float: right; text-align: left; height: auto; } #box-pick { width: 180px; padding: 10px; border: 1px solid #CCCCCC; margin: 0px 0px 5px; display: block; float: right; height: auto; } #box-koshin { display: block; width: 180px; padding: 10px; border: 1px solid #CCCCCC; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-saishin { display: block; width: 180px; border: 1px solid #CCCCCC; padding: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-toiawase { display: block; width: 180px; border: 1px solid #CCCCCC; padding: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-counter { display: block; width: 180px; padding: 10px; text-align: center; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } /* フッター */ #footer { background-color: #66CC00; height: 50px; width: 900px; margin-right: auto; margin-left: auto; color: #FFFFFF; padding-top: 18px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; clear: both; } 何が原因なんでしょうか？ 宜しくお願いいたします！
- ベストアンサー
- CSS
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"（下記ソース）がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ 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 : 403px; height : 240px; float : left; display : inline; } #b{ 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 : 144px; height : 240px; float : left; display : inline; } #c{ 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 : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- HTML
- xml宣言をするとIE6で右サイドがカラム落ちしてしまいます。
http://www.infofx.jp/ 上記のサイトをアップしたばかりなのですが、 xml宣言をすると右サイドがカラム落ちしてしまいます。 SEOを考えてxml宣言は外したくないのですが、良い方法があればどなたか教えて頂けますでしょうか？宜しくお願い致します。ちなみに以下がcssです。 @charset "shift_jis"; body { color: #666666; margin: 0px; padding: 0px; text-align: center; font: 75%/1.8 "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; background: #e9f3ff url(images/kabe.gif) repeat-x top; } h1,h2,h3,p,ul,li{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } img { border: none; vertical-align: bottom; } #container { background-image: url(images/container_bg.gif); width: 896px; text-align: left; background-repeat: repeat-y; background-position: center; margin-top: 0px; margin-right: auto; margin-left: auto; padding-right: 4px; padding-left: 4px; } *.float { float: left; margin-right: 1em; } /*コンテンツ ----------------------------------------------------------------*/ #contents { float: left; width: 706px; } /*メイン ----------------------------------------------------------------*/ #main { float: right; width: 498px; margin-right: 9px; margin-left: 9px; display: inline; } #main h2 { background-image: url(images/midashi_bg.gif); background-repeat: no-repeat; background-position: left top; font-size: 100%; padding-left: 10px; height: 30px; padding-top: 4px; padding-right: 5px; color: #FFFFFF; letter-spacing: 0.5em; } #main p { padding-right: 10px; padding-left: 10px; padding-bottom: 15px; } /*右側 ----------------------------------------------------------------*/ #side { float: right; width: 181px ; display: inline; margin-right: 4px; margin-left: 5px; font-size: 90%; text-align:center; } #side p { margin-bottom: 10px; color: #666666; } .side-table { border: 1px solid #cccccc; padding: 2px; line-height: 2; text-align: center; background: #f7faff; } .side-table h3 { background-color: #ffffff; padding-top: 3px; padding-bottom: 2px; color: #666666; text-align: center; font-weight: normal; font-size: 100%; letter-spacing: 0.5em; margin-bottom: 10px; border: 1px solid #cccccc; } /*メニュー他 ----------------------------------------------------------------*/ #sub { float: left; width: 181px; display: inline; margin-right: 5px; margin-left: 4px; color: #666666; } #sub li { background-image: url(images/menu_arrow.gif); background-repeat: no-repeat; background-position: left center; padding-left: 25px; } #sub ul { margin-bottom: 20px; } #sub li a { color: #666666; text-decoration: none; display: block; width: 100%; } #sub li a:hover { color: #FF3B33; } .arrow-last { background-image: url(images/menu_arrow_last.gif) !important; background-repeat: no-repeat; background-position: left center; } .menu-midashi { border: 1px solid #cccccc; background-image: none !important; background-color: #ffffff; color: #666666; padding-top: 3px; padding-bottom: 2px; } /*clearfix ------------------------------------------------------------------*/ #container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #container { display: inline-block; } /* Hides from IE-mac \*/ *html #container { height: 1%; } #container { display: block; } /* End hide from IE-mac */*/
- 締切済み
- XML
- ＩＥ6とＩＥ７での表示の違いについて
CSSでリストメニューを作成しています。 IE7では正常に表示できて、IE6ではリスト欄が 正常に表示できない現象に陥っており 原因はhoverにあるのではないかと、 csshover.htcをbehavior:url(csshover.htc);で取り込んでみたのですが改善されませんでした。 csshoverの絶対パスや相対パスについてはいずれも試してみたのですが やはり思うようにはいきませんでした。 下記にスタイルシート内容を添記します。 ie7では使用できて、ie6では使用できない部分など お気づきの点ありましたら、お力添え願います。 /* CSS Document */ body{ padding: 0px; } /* 背景 */ .nav-container-outer{ background: green; padding: 0px; height: 26px; background: url(images/menubg.png); } /* 幅寄せ左 */ .float-left{ float: left; } /* 幅寄せ右 */ .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:left; width:0px; display: none; } .nav-container .item-secondary-title{ display:block; cursor:default; white-space:nowrap; } .clear{ font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none; } .nav-container{ position:relative; zoom:1; margin: 0 auto; } .nav-container a, .nav-container li{ float:left; display:block; white-space:nowrap; } .nav-container div a, .nav-container ul a, .nav-container ul li{ float:none; } .nav-container ul{ left:-10000px; position:absolute; } .nav-container, .nav-container ul{ list-style:none; padding:0px; margin:0px; } .nav-container li a{ float:none } .nav-container li{ position:relative; } .nav-container ul{ z-index:10; } .nav-container ul ul{ z-index:20; } .nav-container ul ul ul{ z-index:30; } .nav-container ul ul ul ul{ z-index:40; } .nav-container ul ul ul ul ul{ z-index:50; } li:hover>ul{ left:auto; } #nav-container ul { top:100%; } #nav-container ul li:hover>ul{ top:0px; left:100%; } /* メニュー */ #nav-container a{ padding:7px 0px 5px 0px; margin: 0px 0px 0px 0px; width: 130px; color: #FFFFFF; font-size:10px; font-family: 'HG丸ゴシックM-PRO'; text-decoration: none; background: url(images/menu.png); background-repeat: no-repeat; background-position: top; font-weight: none; } /* メニュー選択時 */ #nav-container a:hover{ color: #FFFFFF; background: url(images/menu-sel.png); background-position: center; } /* サブメニュー */ #nav-container div, #nav-container ul{ padding:0px 4px 10px 0px; margin:0px 0px 0px 0px; width: 175px; background: url(images/menusub.png); background-repeat: repeat-y; background-position: -1px 1px; border-bottom: 1px solid black; } /* サブメニュー項目 */ #nav-container div a, #nav-container ul a{ padding:2px 2px 2px 2px; margin: 4px 0px 0px 0px; width: 174px; background-color: #FFFFFF; background: url(images/menusub-sel.png); background-repeat: no-repeat; background-position: 0px 22px; font-size:10px; border-width:0px; border-style:none; color: #000000; } /* サブメニュー選択時 */ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF; background: url(images/menusub-sel.png); background-repeat: no-repeat; color: #000000; } /* サブメニュー内見出し */ #nav-container .item-secondary-title{ cursor:default; padding: 4px 0px 8px 7px; color: brue; font-family: 'HG丸ゴシックM-PRO'; font-size:10px; width: 172px; background: url(images/menusub-t.png); background-repeat: no-repeat; background-position: -1px 0px; font-weight: bold; } /* 罫線 */ #nav-container .divider-horiz{ border-top-width:1px; margin:5px 5px; border-color: #C16100; } /* メニュー項目間 境界*/ #nav-container .divider-vert{ border-left-width:1px; height:15px; margin:4px 2px 0px 2px; border-color:#AAAAAA; }
- 締切済み
- CSS
- 3カラム IE 右落ち
現在幅固定３カラムでサイトを作っているのですが、私のマック環境（safari&Firefox）ではちゃんとレイアウトが整うのにwindowsのIE 7,6,5ではどれも右のボックスが左下に落ちてしまいます。 CSSはもともと #container { margin:0px auto; width:1000px; text-align:left; } .wrapper { width:800px; float:left; } /* 左 */ .left { float: right; width:200px; } /* 中央 */ .main { float: right; width:600px; } /* 右 */ .right { float: left; width:200px; } /* フッター */ .footer { width:100%; clear:left; } で、これに左右にmargin-left:15px;などを入れていたので、それが原因かと思いdisplay: inline;を足してみたり外してみたのですが変わらず、 左右のボックスの中に<div></div>で囲ったフレーム素材の中にカテゴリーなどをいれているので、そこにmarginやpaddingが発生しているので今度は上記のwidthをちょっと変えてみました。 現在wrapperは780px 左190px 中央580px、右181pxとしてかなり右に余裕を持たせて、尚かつ右で使用していたフレーム素材を全て取り外し１行文字のみだけで試してみたのですが、全然右に上がってきてくれません。 またwidthに余裕を持たせてborderを使ってそれぞれの位置を確認したのですが、右にはかなりのスペースがあいているのに、右に上がってきてくれないのです。 一体何がいけないのでしょうか？？ どうかお力をお貸しください。宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
補足
左に100pxは誤入力です。 containerのmargin-right:autoは最初記入していなかったのですが、 これを記述する事によって17インチのほうだけ上手くいったのです。 素人なので想像で数字を入れ替えてみた箇所が悪さしているのでしょうか・・・