- ベストアンサー
IEでclear指定された属性の上の空行
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IEのfloat動作には、いくつかバグがあります。回避する方法はありません。 また、固定サイズのブロックを４つ並べるのなら、clearを使わず、すべてfloatで並べたほうが良いですね。そうすると、ウィンドウサイズに関わらない、配置も出来ます。 画面が小さいと３つになっり４つになったり・・その方が望ましい。 もしくは、floatを使わない。relativeで配置する。
関連するQ&A
- CSSでのレイアウトについて
現在、table、flameタグを使わず、CSSだけでレイアウトを組んでいるのですが、その際、BOX同士が離れてしまってどうしてもBOX同士をくっつけれません。。Illustratorで作った画像をスライスしてそれをつなげたいのですが。。。marginも0にしてるのに、どうもBoxの底辺にわずかな隙間ができてしまうのです。。 css body { width:800px; margin:0; padding:0; border:0; } #outline { width:800px; margin:0; padding:0; border:0; } <!-- endheader --> <div class="center-free1"> <div class="main"> メインスペース </div> <div class="free1"> </div> <br class="clear"> </div> <div class="free2"> 灰色back </div> <div class="clear"> </div> <div class="under"> </div> </div> </BODY> 一応ソースも載せてみました。。周りでcssを使ってる人がいないので、誰にも聞けず、途方に暮れています。。どうかご教授願います。。
- ベストアンサー
- CSS
- CSSの左右よせのマージン、IEとFirefoxで表示が違う
CSSの左右よせのマージンについて、どうしても原因が分からない事があるので質問します。 下記ファイル（マージンが分かるようにボーダー設定してます） -----------htmlファイル-------------- <html> <head> <title>CSSテスト</title> <link href="test1.css" rel="stylesheet" type="text/css"> </head> <body> <div class="sotowaku"> <div class="main_l"> 左側の写真です。 </div><!--end main_l--> <div class="main_r"> 右側の本文です。 </div><!--end main_r--> <div class="clear"><br></div><!--clear--> フッター </div><!--end sotowaku--> </body> </html> ------------------------------------- -------------cssファイル------------- body { text-align: center; margin: 0px; } .sotowaku { width: 700px; margin: 0 auto; border: solid 1px #999999; } .main_l { width: 150px; float: left; margin-top: 0px; margin-left: 25px; border: solid 1px #999999; } .main_r { width: 490px; float: right; margin-top: 0px; margin-right: 10px; border: solid 1px #999999; } .clear { clear: both; } ------------------------------------- をIEとFirefoxでプレビューすると 中央700pxの幅の中に ｜25px｜写真150px｜25px｜本文490px｜10px｜ となるはずなのに、 IE６では左25pxと右10pxのマージンが大きく(倍くらいになってます）、左右のメインが重なってしまいます。 Firefoxではちゃんと表示されます。 どこか記述がおかしいのでしょうか。 マージン設定はしないほうがいいのでしょうか。 どうすればIEでもちゃんと表示されるようになるでしょうか。 いろいろいじりましたが分からないので、お教えいただければありがたいです。よろしくお願いします。
- ベストアンサー
- HTML
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
- CSSでの横位置指定：IE6の表示について
初心者です。宜しくお願い致します。 テーブルを使わず、画像の下にテキストが入った2つのboxを、中央に表示させたいのですが、IE6だけうまくいきません。 ソースは以下です。 ■HTML ---------------------------------- <div id="list"> <div class="list_top"> <div class="list_title">タイトル</div> </div> <div class="list_cont"> <div class="list_photo"> <img src="g"width="130" height="150" border="0" /></a> <a href="">ＡＡＡＡＡＡＡＡ</a> </div> <div class="list_photo"> <img src="g"width="130" height="150" border="0" /></a> <a href="">ＡＡＡＡＡＡＡＡ</a> </div> </div> </div> ■CSS ---------------------------------- #list { FLOAT: right; MARGIN: 5px 4px 5px 6px; WIDTH: 315px; HEIGHT: 300px; BORDER: #000000 1px solid; } .list_top { PADDING-RIGHT: 0px; PADDING-LEFT: 5px; BACKGROUND: url() left top; PADDING-BOTTOM: 0px; PADDING-TOP: 9px; HEIGHT: 24px; } .list_cont { padding:0px 0px 0px 25px; BACKGROUND: url() left top; } .list_photo { FLOAT: left; MARGIN: 7px; WIDTH: 130px; } 以上です。 CSS側の 【.list_cont { padding:0px 0px 0px 25px;】 上記の指定で、Firefoxと、IE7では中央に表示できるのですが、 IE6のみずれてしまいます。 長くなり申し訳ありません。宜しくお願い申し上げます。
- ベストアンサー
- HTML
- IE6のレイアウト崩れ
お世話になります。 下記の内容でレイアウトをしております。 firefox3.08ではほぼ思い通りですが、 IE6では、menuがmainの左下に入り込んでしまい、 mainが真ん中より少し左にずれてしまうのです。 解決策を教えてください。 情報が足らないようでしたら、ご連絡下さい、宜しくお願い致します。 body { font-size : medium; } div#container { width : 730px; } div#header { font-size : 12px; width : 725px; } div#navi { width : 725px; clear : both; font-size : 12px; } .topicpath{ clear : both; width : 725px; margin : 3px 0 3px 0; } div#main{ float : right; width : 540px; } div#menu{ float : left; width : 170px; font-size : 12px; } div#footer { width : 725px; clear : both; font-size : 75%; } <div id="container"> <div id="header"> </div> <div id="navi"> </div> <div class="topicpath"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div>
- ベストアンサー
- HTML
- cssのclear:both;を利用した場合の余白が・・・
いまXHTML+CSSでサイトを作っています。 CSSで「clear:both;」を使うとFirefoxでは上にIEでは下に余分な余白が出来てしまいす。 また「clear:both;」を使わないとカラム落ちをしてしまいます。 XHTMソース ■http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?Stat=on&ViewSource=on&Method=URL&URL=http%3A%2F%2Flabo.fesly.net%2Ftest2%2Findex.php CSSソース ■http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Flabo.fesly.net%2Ftest2%2Findex.php 「clear:both;」はXHTMLソースの44行目のdivです。 44行目のdivを入れないとカラム落ちしてしまい、入れると余分な余白ができてしまいす。 回避方法や間違っている場合はご指摘をお願いします。 ご指導のほど宜しくお願いします。
- ベストアンサー
- HTML
- どう変更してもＩＥ６だけＣＳＳレイアウトが崩れてしまいます。
ＣＳＳレイアウトで、サイトを作成していたのですが、 最近になってＩＥ６で確認してみると、レイアウトが崩れまくっていました。。。 ３カラムレイアウトなのですが、Ｆｉｒｅｆｏｘ等他のブラウザではきちんと表示されるので、なぜかＩＥ６だけ縦１列になってしまいます。。 こちらのサイトでもＩＥ６はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら１日かけてがんばってのですが、できませんでした。もう限界です（涙） 現在のＣＳＳは、 * { margin:0; padding:0; } .wrapper { width: 740px; margin: 0 auto; } .header { width: 740px; } .main { width: 740 px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */ } .menu {display: inline; float: left; width: 205px; } .contents {display: inline; float: left; width: 385px; } .affiliate {display: inline; float: left; width: 150px; } .footer { clear: both; width: 740px; } というような状態です。 どなたかアドバイスいただけますと大変幸いです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- [CSS]Firefox2では横表示・IE6では縦表示
CSSについて質問させてください。 contentsというDIVの中に、con-leftというDIVとcon-rightというDIVを横に並べて表示したい場合に、以下のタグを書きました。 [CSS] #contents { width:910px; padding:20px; } #contents #con-left , #contents #con-right { width:453px; float:left; border:solid 1px red; } [HTML] <div id="contents"> <div id="con-left"></div> <div id="con-right"></div> </div> 理論上では、con-left及びcon-rightの横幅は453px+ボーダーの2pxで、合計455px、それが二つで910pxで、横に表示されるはず。 しかしIEでは縦に並んで表示されてしまいます。 この解釈の違いがよく分かりません…。 分かる方は教えていただけませんか？
- ベストアンサー
- HTML
- IEの印刷でcssが無効になう
宜しくお願いします。 CSSを使って、DIVタグでレイアウトしています。TABLEでなくDIVだけで組むのは初チャレンジです。外部CSSを使用しています。 IE（Ver6)では、問題なくCSSが有効となって見えるのですが、印刷プレビュー及び印刷では、CSSが無効となりレイアウトが崩れてしまいます。DIV関係に限らず全てのCSSが無効です。 こんな経験は初めてで、何が悪いのかわかりません。 どこをチェックすれば良いのでしょうか？
- ベストアンサー
- HTML
- CSSレイアウトについて
はじめまして。 個人用サイトを趣味で制作しています。 下記のようなイメージを、html×cssで組みたいのですが、 うまくいきません。 なんとかsafariで、再現したいのですが、問題点がわかりません。 ※IE6は、きっと無理ですよね。 どなたか原因分かる方教えていただけると幸いです。 ■イメージ http://www.turn.jp/design.jpg ■現状サイト http://www.turn.jp/ ■htmlソース <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright©2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> </html> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; }
- 締切済み
- その他([技術者向] コンピューター)
お礼
ご返答、誠にありがとうございます。 Clearを使わずに、という形も実は考えましたが、実は下記のサイトで同様にClearを入れているにもかかわらず、空白が出ない動作が確認されているのです。 http://sample.cart.fc2.com/?style=green FC2のショッピングカートテンプレートなのですが、こちらでは空行やマージンがIE上でも入らずに表示されています。またこちらと同様のスタイルを試すことも行いましたが、どうしてもこの空白を回避することができませんでした。 IEのエラーは本当に難しいものですね(汗)