• ベストアンサー

Firefoxで、tableに指定したmargin-leftがスクロールバーで×(ソース記載にて長文です)

HTMLにて質問してましたが、回答ありませんでしたので、カテゴリを変えて質問させていただきます。 bodyをmargin、paddingともに0にして、tableを配置してmargin-left:15pxを指定したのですが、スクロールバーが出た時にFireFox2.0でずれます(他、IE6、safari3は問題無)。 どうも、marginがきかなくなるようですが、原因がお分かりになれば教えていただけないでしょうか? また、回避策は何かあるでしょうか? divに設定したmarginは問題無です。 tableをdivで括って、marginはdivに設定すれば問題ありません。でも、できればシンプルにbodyの直下にtable配置したいと思っているのですが…。 どうぞよろしくお願いします! 以下にサンプルソースを記述します↓ ------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テーブル</title> <style> <!-- body{ margin:0; padding:0; } --> </style> </head> <body> <div style="width:500px; background-color:#00FF00; margin-left:14px;">div</div> <table width="500" border="0" cellspacing="0" cellpadding="0" style="margin-left:14px;"> <tr> <td bgcolor="#0099FF">テーブル</td> </tr> </table> </body> </html>

  • CSS
  • 回答数3
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

>tableはblock要素じゃないのでfirefoxがあっているのでは? 試してみたら 実はFirefox 2.0.0.14と http://releases.mozilla.org/pub/mozilla.org/firefox/releases/2.0.0.14/win32/ Minefield 3.1a1pre http://ftp.mozilla.org/pub/mozilla.org/firefox/tinderbox-builds/mozilla-central-win32/ でテストしてみたら結果が違うのよ。 どっかで修正入っているはずなのでBugzilla漁ればあるはずなんだけど 面倒くさいので放置してます

uuu77uuu
質問者

お礼

情報、ありがとうございます! Firefox 3 Candidateを早速インストールして見てみました。 問題の現象が起こりませんでした! Bugzilla、恥ずかしながら英語が得意でなくて詳細を追うのは容易ではないのですが、きっとFirefox 3では修正されるのですね。

その他の回答 (2)

  • ran_2323
  • ベストアンサー率43% (32/73)
回答No.3

table{display:block;} にすれば回避できるかと思いますが…。

uuu77uuu
質問者

お礼

ご回答、ありがとうございます。 試したら、現象が出なくなりました! ちょっと見てみたところ、 display:block; にするとtableにwidthを設定しないとblock要素なので、横幅いっぱいに広がる、という所が違ってくるでしょうか。 他のブラウザでも問題無さそうですが、 他に、何か懸念されること、おわかりになったら教えていただけると嬉しいです。 引き続き、検証したいと思います!

uuu77uuu
質問者

補足

ご報告です。 Firefox3では問題が解消される見通しで、Firefox3の正式リリースが間近なようなので、今回は回避策を取らないことにいたしました。 みなさん、ご回答どうもありがとうございました。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

tableはblock要素じゃないのでfirefoxがあっているのでは? 単純な左揃えということであれば、イチイチdivとtableに marginを設定するより、bodyをleft-padding:15px;とする方が はやくないですか?

uuu77uuu
質問者

お礼

ご回答、ありがとうございます! 確かに、bodyにmarginを設定すれば早いですよね。 実は、ナビゲーションやコンテンツなど、モノによってmarginを変えるので、個別の設定にしたく質問させてもらいました。

関連するQ&A

  • body要素

    body要素のCSSをうまく反映させることができません。 table_testを画面中央に表示させて、全体の背景色を赤にしたいのですができません。 どこが違うのでしょうか? ご教授ください。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"><TITLE></TITLE> <style type="text/css"> <!-- .body { text-align:center; margin-right:auto; margin-left:auto; bgcolor:red; } .table_test { width:700px; border-style:solid; border-color:blue; border-width:1px; margin-right:auto; margin-left:auto; //--> </style> </head> <body> <table class="table_test"> <tr> <td> </td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • はみ出た部分が切れるように表示したいのですが

    以下のHTMLですと、2個目のliの123…が2行目に表示されてしまいますが、 これを上と同じ行に表示し、divからはみ出た部分は切れるようにできないでしょうか? 実際には1個目のliの長さが可変なため、HTMLと文字列(123…)を変えるのでなく CSSでなんとかしたいのです。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> div.d310 { width:310px; padding:0px; margin:0px; text-align:center; vertical-align:top; background-color:#ffffff; } ul { width:310px; height:20px; float:left; line-height:20px; font-size:13px; margin:20px 0px 0px 0px; padding:0px ; background:#f1f1f1; border-top:solid 1px #a9a394; } li.li1 { float:left; text-indent:12px; display:inline; margin:0px 10px 0px 10px; padding:0px 0px 0px 0px; } li.li2 { float:left; text-indent:19px; display:inline; margin:0px 10px 0px 0px; padding:0px 0px 0px 0px; } </style> </head> <body> <div class="d310"><ul> <li class="li1"><a href="">1234567890</a></li> <li class="li2"><strong>12345678901234567890</strong></li> </ul></div> </body> </html>

    • ベストアンサー
    • CSS
  • 枠線でメイン部分を囲み、フッターを一番下にもってくるには?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#flame { width: 1000px; height:100%; margin-top: 10px; margin-left: 10px; padding: 20px; border-color: #999999; border-style: solid; border-width: 1px; } div#header { background-color:#999999; color:white; } div#container { background-color:#ffffee; } div#left { background-color: #cccccc; width: 200px; left: 0px; top: 0px; } div#content_right { background-color: #cccccc; margin-left: 210px; font-size: 10pt; line-height: 140%; left: 0px; } div#footer { width:100%; background-color:666666; color:white; } --> </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>

    • ベストアンサー
    • HTML
  • フォントと文字サイズの指定方法

    HTML初心者です。 どなたか助言ください。 以下のソースのようなテンプレ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-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title><?=$item_title?></title> </head> <body> <div style="width:100%;text-align:center"> <div id="wrapper" style="margin:0px auto;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#000;text-align:left;"> %IMAGES% <div class="sub_tit" style="padding-left:5px;height:25px;line-height:25px;border-left:solid 20px;color:#2214ff;font-size:25px;font-weight:bold;"> PRODUCT DETAILS </div>   ****以下で出力される文字のフォントと文字サイズを指定したい。 <p class="sub_text" style="padding-left:10px;padding-right:20px;"> %DESCRIPTION% </p>   **** ......同じような内容が続く </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSでテーブルを中央にする方法

    CSSでテーブルを中央にする方法を教えてください いろいろなサイトで見た通りにしたのですが、どうしてもFirefoxではテーブルが中央によりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content=""> <meta name="keywords" content=""> <title>テーブル</title> <style type="text/css"> <!-- .tableley { margin-left: auto; margin-right: auto; text-align: center; } //--> </style> </head> <body> <div class="tableley"> <table cellpadding="0" cellspacing="0" summary="テスト" border="1"> <caption style="font-weight: bolder;">てすと</caption> <tbody> <tr> <td>てすと1</td> <td>てすと2</td> <td>てすと3</td> <td>てすと4</td> </tr> <tr> <td>てすと5</td> </tr> </tbody> </table> </div> </body> </html> 何が悪いのでしょうか? <div align="center">にするしか方法がないのでしょうか? 文法検証すると<div align="center">はあまりよくない使い方と指摘されてしまいます よろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部CSSと HEAD内のCSSの違い

    現在、macで Dreamweaver8を使用してHPを作っています。 外部のcssがうまく反映されません。 そこで、head内に同じcssを入れたところ、きちんと反映されました。 どうして違いがでるのか教えてください。 『head内に入れた時』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。 誰かお答えくださいませ。

    • ベストアンサー
    • Mac
  • cssによる配置の計算が合いません

    cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>

  • 枠線でメイン部分を囲み、フッターを一番下にもってくるには?

    お世話になります。 標準モードで1pxの枠線を作り、一番下にフッターがくるようにしたいのですが、どうにも出来ません。 また、左メニューとメインの部分がズレてしまう事も修復できず悩んでいます。 なにかいい方法がないか、ご教授いただけると幸いです。 尚、テーブルは使わない方法でお願いします。 以下が途中までのソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#flame { width: 1000px; height:100%; margin-top: 10px; margin-left: 10px; padding: 20px; border-color: #999999; border-style: solid; border-width: 1px; } div#header { background-color:#999999; color:white; } div#container { background-color:#ffffee; } div#left { background-color: #cccccc; width: 200px; left: 0px; top: 0px; } div#content_right { background-color: #cccccc; margin-left: 210px; font-size: 10pt; line-height: 140%; left: 0px; } div#footer { width:100%; background-color:666666; color:white; } --> </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>

    • ベストアンサー
    • HTML
  • スタイルシートで上手く段組が出来ません。

    スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。 下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:200px; float:left; background-color:#cc6600; } #tops { width:300px; height:200px; float:left; background-color:#cc5555; } #left { width:250px; height:600px; clear: both; background-color:#ff9933; } #right { width:500px; height:600px; float:left; background-color:#ffcc66; } #under { width:750px; height:10px; clear: both; background-color:#ff9955; } --> </style> </head> <body> <div id="top"></div> <div id="tops"></div> <div id="left"></div> <div id="right"></div> <div id="under"></div> </body> </html> というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。 どうしたらちゃんと5つに分割出来るのでしょうか? よろしくお願いしますm(_ _)m

  • Firefoxのみborderが消える現象

    お世話になっております。 以下のソースのように、ページを左カラムと右カラムに分けて上から下までカラムをheight:100%にしているます。右カラムの左にボーダーをドットで入れているのですが、IEでは表示されるborderがFirefoxでは表示されません。解決方法をご教授お願いいたします。 <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:'Georgia', Verdana, Osaka, 'MS P Gothic'; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1001px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; overflow: show; } body > #wrapper { height:auto; } /*左カラムの設定*/ #left { width: 340px; margin: 0px; float: left; height: 100%; min-height: 100%; padding-bottom: 32768px; margin-bottom: -32768px; background-color:#00FF00 } /*右カラムの設定・IEバグ対策*/ #right { width: 660px; margin: 0px; float: right; height: 100%; min-height: 100%; border-left-width: 1px; border-left-style: dotted; border-left-color: #000; padding-bottom: 32768px; margin-bottom: -32768px; position:relative; } --> </style> </head> <body> <div id="wrapper"> <div id="left"> aaa </div> <div id="right"> aaa </div> </div> </body> </html>