IEとFirefoxでの表示の違い
- 質問者はCSSを使用してテーブルを作成し、画像と文章を並べて表示したいが、IEとFirefoxで表示が異なる問題に直面している。
- 外部スタイルシートにwidth、float、border、padding、marginを指定しているが、表示が重なってしまう。
- IEではheight:100%を指定すると画像の高さまで枠が広がるが、Firefoxでは変化しない。高さを特に指定せずに両方のブラウザで同じ表示をする方法を知りたい。
- ベストアンサー
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で同じように表示する方法がありましたら教えてください。 よろしくお願いします。
- A-10TB
- お礼率80% (21/26)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。 すみません、HTML部分のコードが間違っておりました。 下記に訂正いたします。 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 class="clear"></div> ←コレを追加してください <!-- /回り込み解除部分 --> </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>
その他の回答 (1)
- gonagona
- ベストアンサー率80% (12/15)
こんにちは。 恐らくfloatを解除していないので、ブラウザがずっと回り込みしてると解釈して、 高さが反映されてないんだと思います。 回り込みを解除させたい場所にclearを指定すれば大丈夫です。 CSS ================================================== body {width:600px;} .img{float:left;} div.box { border: 1px solid #000 ; padding:10px; margin:10px; } .clear {clear:both;} ←コレを追加してください 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 style="clear:left;"></div> ←コレを追加してください <!-- /回り込み解除部分 --> </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>
関連するQ&A
- firefoxで
会社のHPをHPビルダーで作成しています、 <div class="content">要素の中に２つのBOX「左配置<div class="text09">・右配置<div class="text10">」を作成して左右に並べてみたのですがIE6,7,8では希望通り表示されるのですがfirefoxでは左text09のBOX下にtext10が配置されてしまいます、CSS初心者ですが右配置text10のwidth幅を指定しなければfirefixでも左右ならんで表示されるのですが、右配置text10の記字が左text09の下側に廻り込んでしまうのです？ どうしたら良いでしょうか？どなたかご指導いただけませんでしょうか、宜しくお願いします。 ※サイドメニューの右側にcontentを配置 ※<?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"> ＜ソース記述＞ <div class="content"> <div class="text09"> <img src="img/industria01.jpg" width="331" height="272" alt="工業団地" title="工業団地" /><br /> Partnershipの工業団地</div> <div class="text10"><a href="01.html"><img src="img/industria02.jpg" width="220" height="142" alt="（写真をクリックすると拡大できます）" title="（写真をクリックすると拡大できます）" /></a><br /> Texas A&M Park<br /> （写真をクリックすると拡大できます）<br /> <a href="02.html"><img src="img/industria04.jpg" width="220" height="88" alt="（写真をクリックすると拡大できます）" title="（写真をクリックすると拡大できます）" /></a><br /> Business Park<br /> （写真をクリックすると拡大できます） </div> </div> 以下CSS記述 .content{ background-color : #ffffff; margin-left : 0px; margin-bottom : 0px; padding-left : 0px; width : 682px; float : right; padding-top : 0px; padding-right : 0px; } .text09{ float : left; font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.6; color : #000000; padding-left : 0px; margin-left : 50px; margin-right : 20px; width : 331px; display:inline; } .text09 a img{border-width : 0px 0px 0px 0px; } .text10{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.6; color : #000000; margin-left : 15px; width : 220px; } .text10 a img{border-width : 0px 0px 0px 0px;} この質問内容で解りますでしょうか？
- 締切済み
- HTML
- css初心者です。プラウザの表示について
以下のような記述を行い、確認為にプラウザに表示させようとしましたが、なぜかsafariではうまくいかずに、googlecromeでは表示されました。どのような事が原因なのでしょうか？ よろしくお願いします。 //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-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" href="box1.css" type="text/css"> </head> <body> <div class="box">箱の表示を作ろうと思います。</div> <p class="box2">こちらはどうなのでしょうか？</p> </body> </html> //css @charset "UTF-8"; /* CSS Document */ .box{ border:4px solid #9C3; width:50px; height:60px; padding:15px 15px; margin:50px 0px 0px 50px } .box2{ width:300; height:200; border:3px solid #F33; padding:10px; } よろしくお願いします。
- ベストアンサー
- HTML
- IE6で表示がずれて困っています。
IE6で表示がずれて困っています。 firefox・IE８では表示されるのに、IE6ではずれてしまいます。 質問したい事が２つあるのですが、 １つ目は インラインフレームでIE６だけサイズが大きくなる。 原因とサイズの揃え方を教えて下さいm(__)m 画像添付とソースをはります。 <!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="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <p><img src="images/news.gif" width="490" height="29" /></p> <iframe src="news.html" id="newsi" frameborder="0" scrolling="auto"></iframe> </div> </body> </html> ●CSS● *{ margin: 0; padding: 0; } div{ width:490; height:200; } #newsi{ width: 486px; height: 150px; border: 2px #F96 solid; } --------------------------------------------------------- 一つ目は以上です。 二つ目もここにで質問したかったのですが、文字数が足りないためもう一度質問させていただきますm(__)m 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いいたしますm(__)m
- ベストアンサー
- 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
- 6で表示がずれて困っています。２つ目です。
6で表示がずれて困っています。２つ目です。 firefoxとIE8ではちゃんと表示されているのに、IE6ではずれてしまいます。 IE6で画像が下にずれて切れ、スクロールバーが表示されてしまいます。 原因とfirefoxとIE8と同じように表示させる方法を教えて下さいm(__)m 画像添付とソースを貼ります。 <!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="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div id="header"> <div id="header_line"> </div> <div id="logo"> <img src="A_22.gif" width="142" height="69" /> </div> <div id="cn"> <img src="A_33.gif" width="459" height="158" /> </div> </div> </div> </body> </html> ●css● *{ margin: 0; padding: 0; } img{ border: 0; vertical-align: bottom; } #main{ background: url(images/back_shadow.jpg) repeat-y; margin: 0 auto; width: 820px; height: 300px; } #header{ width: 800px; height: 181px; margin: 0 auto; overflow: auto; } #header_line{ background:url(images/header_1.gif) repeat-x; margin: 0 auto; width: 800px; height: 13px; } #logo{ width: 152px; height: 69px; margin: 10px 0 0 10px; float: left; display: inline; } #cn{ width: 459px; height: 158px; margin:10px 0 0 0; float: left; } 以上です。 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いしますm(__)m
- ベストアンサー
- 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-Type" content="text/html; charset=utf-8" /> <title>安心</title> <meta name="keyword" content="," /> <meta name="discription" content="" /> <link rel="stylesheet" type="text/css" href="styles.css" media="all" /> </head> <body> <div id="top_main"> <div class="title_top"> <div id="sub_title"> <img src="images/main_top_left.jpg" width="484" height="609" alt="サブ" /> </div> <div id="main_title"> <img src="images/main_top.jpg" width="900" height="322" alt="メイン" /> </div> <div id="sub_title_b"> <img src="images/main_top_right.jpg" width="532" height="609" alt="サブ" /> </div> </div> </div> </body> </html> /* reset css */ html,body,div,h1,h2,h4,h5,h6,p,a,span,em,storng,table,tr,td,th,dl,dd,dt,object,embed,ul,li,ol,img{ margin : 0; padding : 0; /* font-family:Helvetica, "MS Pゴシック", "メイリオ", Osaka, "ヒラギノ角ゴ Pro W3", serif;*/ } a img{border : none;} div#top_main{ width:auto; } div.title_top{ width:2000px; margin:0px auto; } div#main_title{ width:900px; height:382px; position:relative; margin:0px auto; margin-top:0px; float:left; } div#sub_title{ width:484px; height:609px; position:relative; margin-top:0px; float:left; } div#sub_title_b{ width:532px; height:609px; position:relative; margin-top:0px; float:left; }
- 締切済み
- HTML
- 外部CSSの入れ子によるWEBページ作成について
私はWEBページ作成に関しては初心者です。 現在私は、外部CSS入力による入れ子というBOXを用いたWEBページを作成しています。 まず上部に、三つ入れ子を用意し、左右の入れ子にロゴマークのようなものを入れて、中央の入れ子に題名を入れようと思い、一つ目の入れ子に画像を入れ、その隣に新しい入れ子が回ってくるようにしようとしましたが、真下に回るばかりで全く隣に回りません。どうするば良いのでしょうか? そのCSSの内容とプログラムは以下の通りです。 ↓ CSS body{ background-color:#ffebcd; width:1000px;height:900px; } .box1{ padding-top:2%;padding-left:2%; padding-right:2%;padding-bottom:2%; background-color:#7cfc00; width:100px;height:100px; } .box2{ padding-top:3%; background-color:red;color:white; width:800px;height:100px; text-align:center;font:large; } プログラム <?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" type="text/css" href="css/index.css" /> <body> <div class="box1"> <p> <img src="./images/○○○.jpg" width="103" height="103" alt="○○○.jpg"> </p> </div> <div class="box2"> <h1>a</h1> <p> </p> </div> </body> </head> </html> よろしくお願いします。
- ベストアンサー
- CSS
- CSSでIEとFirefoxでの表示の違い
IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常（希望通り）に表示されるようにするには どのような記述にすれば良いのでしょうか？ 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- FireFoxでのレイアウト表示崩れについて
現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。 よろしくお願いします。 以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。 宜しくお願いします。
- ベストアンサー
- HTML
- IE5*でもCSSで画像を横に並べる方法を・・・
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?xml version="1.0" encoding="Shift_JIS" ?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head><style type="text/css"> <!-- .box_a{ } .box_b{ } .box_c{ float:left; width:80px; background-color:#c8ffdb; } .box_d{ float:left; width:10px; background-color:#c8ffdb; } --> </style> </head> <body> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> <div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div> </body> </html> 上記のコードをブラウザで見るとIE6では隙間なく並んでいるのですが、IE5.01,IE5.5で見ると画像の間に隙間が空いてしまっています。 IE5*でもCSSで画像を横に並べる方法をご存じの方、教えてください。 お願いします (_ _)人。
- 締切済み
- HTML
お礼
教えていただいた方法で解決できました。 たいへん参考になりました。 ありがとうございました。