- 締切済み
CSSのボックスのブラウザごとの解釈の違いについて
見出し（h3）と内容をそれぞれ罫線で囲んだものをCSSで作るため、以下のCSSを作りました。 IEでもFirefoxでも思ったように表示されました。 見出しと内容部分のwidthとborderとpaddingを足した数値を同じにしたので、IEで見出しと内容部分の幅が同じに表示されるのはいいのですが、Firefoxでも幅が同じにに表示されるのはなぜでしょうか？widthだけの幅は違うので、見出し(h3）の方が2px狭く表示されると思ったのですが・・・ そもそもの考え方が間違っているのでしょうか。 ご教授のほど宜しくお願い致します。 h3 { font-size: 13px; padding: 3px 3px 3px 5px; border-top: 1px solid #009933; border-right: 1px solid #009933; border-left: 5px solid #009933; margin: 0px; width: 286px; } p { font-size: 11px; border: 1px solid #009933; margin: 0px; padding: 5px; width: 288px; line-height:130%; }
- apple_bananana
- お礼率90% (49/54)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- izumi1226
- ベストアンサー率57% (4/7)
ブラウザやOSによって解釈が違います。たとえば、同じIEでもWindowsとMacでは表示が天と地程に違う場合があります。 以下のサイトは以前別の質問に載っていた物ですが、参考になると思います。
関連するQ&A
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し２</h2> <h2 class="sample1">見出し２</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
- FireFoxでCSSのボーダーが反映されません
FireFoxでのCSS表示について教えて下さい。 現在、IEでは見れるものがFireFoxで反映されておりません。 どこかに原因があるとは思うのですが、見つからないのです。。。涙 Bodyとページ全体のCSS、及び問題箇所のCSSを記述します。 #body { margin: 0px; width: 100%; padding: 0px; border: 0px; height: auto;} #page { background-color: #ffffff; width: 746px; height: auto; margin: 0px; padding: 0px; border-collapse:collapse; border: 0px; border-spacing:0px;} #page td {line-height: 120%; font-size: 12px; color: #000000;} #contents1 {width: 746px; border-collapse:collapse; border-spacing:0px; margin:0px 0px 5px 0px;} border: 1px solid #666633; #contents td {font-size: 12px; line-height: 120%; color: #000000; padding-top: 2px; padding-bottom: 2px;} #contents2 {width: 350px; height: 45px;} #contents2 td { border: 1px solid #999999; font-size: 12px;} ※contents1は外枠のみボーダーカラーをつけたいと思います。 contents2では、tdのみ枠をつけて、外枠は表示させたくありません。 (大枠の中にいくつか枠付きの行が表示される状態にしたいです) idではなくclassにする方が良いのでしょうか？ CSSについては独学なので、記述もほとんどDW頼りです。 参考サイトなどご存知でしたら教えて下さい。。。 以上、よろしくお願いいたします。
- ベストアンサー
- CSS
- IEのずれ(CSSについて)
firefoxでは正常に表示されてくれるのですがどうしてもIEで表示されません。 具体的には幅600の真ん中に545pxのBoxを綺麗に配置したいのですがどうにもうまくいきません。 CSSハックを使用してもうまくいかずです。 下のCSSだとIEだと左によってしまいます。(Firefoxだとちゃんと真ん中に配置できるのですが…) 素人ですがご教授願いますm(__)m {font-family: "ＭＳ 明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size: 10pt; line-height: 180%; width: 545px; background-color: #ffffcc; margin: 0px 21px; padding: 0px 5px; border: solid 2px #0a50ff; text-align: left; color: #000000;}
- ベストアンサー
- HTML
- Opera、ネスケでcssが崩れます
DreamWeaverMXで作業しています。 ブラウザはLunascape（Netscapeから生まれたもの？）とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて！から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…！ ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------
- ベストアンサー
- HTML
- CSSを使うと文字が飛び出てしまいます・・・(T_T)
ホームページをCSSというものを使用して何とかかんとか作ったのですが、IEだと普通に表示されますが、firefoxだと箱を飛び出して文字が、つき抜けてしまいます。 色々調べるのですが、具体的な問題点が把握できません。以下にソース？？(でしょうか)を記載しますのでご指摘の方よろしくお願いいたします。 ----CSS----- .box{ margin: 0px auto 0px auto; border: 1px solid #3953a4; width: 460px; text-align: left; padding: 10px; letter-spacing: 1.5px; font-size: 12px; line-height: auto; } になります。 よろしくお願いいたします。
- ベストアンサー
- HTML
- Safariでheight:100%のボックスを表示したいのです
Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。 以下、記述したCSSとHTMLです。 HTML--------- <body> <div id="main"> <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 </div> </body> </html> CSS--- /* \*/ html{ height:100%; } /* \*/ body{ height:100%; width:80%; margin:0px auto; padding:0px; } div#main{ background-image:url(../images/contents_bg.gif); border:solid 1px #760014; border-width:0px 1px; height:100%; min-height: 100%; margin:0px auto; padding:0px; border:1px solid #ff0000; } body > #main{ height: auto; } h1{ margin:0px auto; padding:0
- ベストアンサー
- HTML
- CSSでページ作成、Firefoxでうまく表示できません
ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header"> ヘッダー </div> <div class="left"> メニュー </div> <div class="right"> 内容 </div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- CSS
- cssでtableを指定したい
教えてください。 cssでテーブルを指定しているのですが、別の幅のテーブルを指定したいときはどうすればよいのでしょうか。 現在はこういうふうに書いています。ちょっと汚いですが。。。 ----------------------------- #content #main p{ margin:10px 18px 25px; font-size:12px; } #content #main table { border-collapse: collapse; background-color: #FFFFFF; width: 480px; margin:0px padding; border: 0px #000000: 1px; } #content #main caption{ text-align: right; padding-right: 5px; font-size:12px; } #content #main th { border: #999999 1px solid; font-size:12px; font-weight: normal; background-color: #D8EAFC; padding: 5px; } #content #main td{ border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; font-size:12px; text-align: left; padding: 5px; } ----------------------------- 実際にタグを書くときは、こう書いています。 ----------------------------- <table> <tr> <th>aaaa</th> <td>5555555555555555555555555555</td> </tr> </table> ----------------------------- これをmaintable subtable というふうに幅が違うものにしたいのですが、cssにmaintableを追加して、<table class=maintable">と指定しても、maintableではなく、tableで表示されます。 こういう場合はどうすればよいのでしょうか？
- ベストアンサー
- XML
- CSSで文法エラーが出ました
CSS素人です、 CSS Validator検証結果で下記エラーが出ました、IE6・IE7・IE8・firefoxでは表示は崩れませんが 下記エラーを無くしたいのですがどなたかご指導いただけませんでしょうか？ #mnu1 img 文法解析エラーが発生しました @vertical-align:text-bottom; #mnu1 img Parse error - Unrecognized } .td01 文法解析エラーが発生しました @border-width : 1px 1px 1px 1px; 文法解析エラーが発生しました : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a CSS記述は以下の通りです ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; padding: 0px; } ul#menu li{ list-style-type : none; } ul#menu li a{display: block; text-decoration: none; outline: none; } #mnu1 a{ background-image : url(menu/menu1.gif); text-decoration : none; background-repeat : no-repeat; outline: none; display : block; width : 108px; height : 40px; } #mnu1 a:hover{ background-position : left bottom;} #mnu1{ margin-top : 0px; margin-bottom : 0px; } #mnu1 img{border-width : 0px 0px 0px 0px; vertical-align:text-bottom; } .td01{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #dce6f4; padding-top : 2px; padding-bottom : 2px; padding-left : 2px; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} .td01a{ font-size : 13px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; background-color : #c1cdde; padding-top : 2px; padding-bottom : 2px; padding-left : 2px; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #999999 #999999 #999999 #999999;border-width : 1px 1px 1px 1px;} ※ #mnu1 img内の vertical-align:text-bottom;は 縦にメニューを並べているのですが各上下に隙間が入るので vertical-align:text-bottom;を入れたら隙間が無くなったので 使用した次第です。 以上、宜しくお願いします。
- ベストアンサー
- C・C++・C#
- CSSで1つのボックスの中に2つのボックスを横に並べて両サイドをピッタリ表示したい
CSSをちょこっと勉強している者です。 どうしてもうまくいかないところがあるので質問させてください。 先に参考イメージを載せておきます。 http://www.geocities.jp/shinopo/sample.gif 一番外枠になる１つのボックス(Aとする)の中に２つのボックス (左をB、右をCとする)を横に並べてAの横幅一杯ぴったりに表示 されるようにしたいと思っています。(参考イメージの下を参照) 参考イメージ下のようにAのborderを無くすとBとCが横に並んで ぴったりと表示されるのですが、Aに1pxのborderを設定すると CがBの下段に表示されてしまい、Cの右側とAのborderの間に 少しの隙間ができてしまいます。（参考イメージ上参照） この隙間を無くすにはどのようにすれば良いのでしょうか？ この隙間がなくなればBとCは横にぴったりと表示されると思うのすが。 自分なりにCのmargin-rightやpadding-rightに0pxなどを設定して 試してみましたがうまくいきません。 以下にコードを載せておきます。 ご教授よろしくお願い致します。 ============== index.html ============== <html> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" href="./css/style.css" type="text/css"> </head> <body> <div id="centermain"> <div id="container"> <div id="banner"> <h1>見出し1</h1> </div> <div id="content"> <br> <h2>見出し2</h2> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="menu"> <br> <dl> <dt>メニュー</dt> <dd>カテゴリ１</dd> <dd>カテゴリ２</dd> <dd>カテゴリ３</dd> </dl> </div> <div id="foot"><p>Copyright (C) 2009 Test All Right Reserved.</p></div> </div> </div> </body> </html> ============== style.css ============== body{ margin:0px; } #centermain{ text-align:center; } #container{ width:780px; margin-left:auto; margin-right:auto; text-align:justify; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; } #banner{ background-image:url(../img/sima.gif); width:780px; height:60px; } #banner h1{ margin-top:0px; margin-bottom:0px; padding-top:15px; padding-left:20px; } #content{ float:left; background-color:#cccccc; width:540px; height:100px; padding-left:20px; } #menu{ float:right; background-color:#999; width:240px; height:100px; padding-left:10px; } #foot{ clear:both; text-align:center; font-size:12px; color:#ffffff; background-color:#cccccc; width:780px; height:25px; padding-top:7px; }
- ベストアンサー
- HTML
お礼
ありがとうございます。 現在勉強中ですが、まだまだ先は遠い！と実感します(^_^.)が、早速教えていただいたサイトを拝見させていただきます。ありがとうございました。