- ベストアンサー
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; } になります。 よろしくお願いいたします。
- pink_kimera
- お礼率73% (127/172)
- HTML
- 回答数8
- ありがとう数7
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
ちょっと自信があったんですが残念です。 となると#7さんの言う通りちょっとした間違いが違うところにあるのかもしれませんね。断言はできませんが… ちなみにIEとFF（Firefox）での表示の違いは背景の色だけですか？IEではCSSが全て効いていて、FFではCSSが全く効いていないといった状態ですか？
その他の回答 (7)
- koutarou504
- ベストアンサー率44% (182/407)
横から失礼します。 ＃５の礼文の件は＃６の通り <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test0003</title> <style type="text/css" media="handheld,screen,projection,tv,tty,print"> <!-- .box{ background-color: #99ccff; margin: 0px auto 0px auto; border: 3px solid #ffffcc; width: 480px; text-align: left; padding: 10px; letter-spacing: 1.5px; font-size: 12px; line-height: auto; } H2{ font-size: 36px; } P{ font-size: 18px; } // --> </style> </head> <body> <div class="box"> <h2>ここに小見出しです。</h2> <p>ここに普通に文章がきます。 </p> </div> </body> </html> 以上で適切に動作する様ですが。 と言っても firefox の環境が無いので、 WindowsXP SP2 でのIE6.0 Sleipnir1.66 Opera7.54u2 Mozilla1.7.5 での確認ですが・・・。 一応、1box での不適切な動作の再現は Mozilla にて出来ました。 しかし、CSS の記述と属性値を共に 1box から box に変えた後は、いずれも適切に表示され・・・。 それでも表示が不適切なら、 CSS なり HTML なりをほぼ全て提示しないと判らないかもしれませんね。 どこかに書かれた本人も意識していない記述があり 予想外の処が影響している可能性もあるかも・・・。
- ao_
- ベストアンサー率33% (15/45)
クラス名が数字から始まっていますね。 多分コレが原因でしょう。 半角英字から始まるクラス名を付けてみてくださ。
- ao_
- ベストアンサー率33% (15/45)
ao_です。 backgroundにカラーを指定してるんですよね？ ちょっとCSSのソースを見ないとわかりません… 出来ればHTMLの問題の部分もあれば何かわかるかもしれません。
お礼
ao_さん、有難うございます。 すみませんCSSを付けるのを忘れておりました。 以下が問題のCSSになります。 CSSです。 +++++++++++++++++++++++++++ .1box{ background-color: #99ccff; margin: 0px auto 0px auto; border: 3px solid #ffffcc; width: 480px; text-align: left; padding: 10px; letter-spacing: 1.5px; font-size: 12px; line-height: auto; } になります。HTML部分には普通に文章を少し書いているだけです。一応・・・ <div class="1box"> <h2>ここに小見出しです。</h2> <p>ここに普通に文章がきます。 </p> </div> これだけです。<h2>と<p>には文字サイズの指定を行っているだけです。なぜbackground-color: #99ccff; だけの色がfirefoxで反映されないのでしょうか？よろしくお願いいたします。
- ao_
- ベストアンサー率33% (15/45)
IEは幅500pxと指定してもその中に500pxを超える要素があると勝手に幅を広げて表示します。 箱とおっしゃっている要素自体（.box）はIEでもFirefox同じ幅で表示さてれいますか？ それと、＃2の方が言われてるとおり、半角英数字スペース無しで親要素を超えるくらい長く打ち込むと、それが一つの単語とみなされてはみ出します。（禁則処理）しかもletter-spacingも入っているのでなおさら一単語の長さが拡張しているはずです。まず、letter-spacingを消してみて、ダメならHTMLの.box部分をください。ちょっと興味のある現象なんで自分も勉強になります。
お礼
ao_さん有難うございます。 >IEは幅500pxと指定してもその中に500pxを超える要素があると勝手に幅を広げて表示します。 ビンゴでした！paddingの関係もあって内容物がはみ出る形となっていました、大変ご迷惑をおかけしました。感謝です。 すみません、ついでにもう1つ問題が・・・、IEではボックス内のカラーはブルーに近い色を指定しているため、もちろんその色で表示されるのですが、firefoxの場合ボックス内の色が白になってしまいます。 これも私の記述しているCSSに関係しますでしょうか？ 作れば作るほど問題が増えてきて、困ってしまいます。
- pingu98
- ベストアンサー率62% (17/27)
んー、実際の症状が確認できるソースを見ないと断定はできませんが、おそらくwidthに関するIEのバグが問題点になっているように思います。 通常、ボックスの幅が指定された場合、内容物がテキスト等の幅が決まっていない(折り返し可能な)ものであれば指定された幅に収まるように表示されます。 また、内容物が、指定した幅より大きいひとかたまりの場合、ボックスの幅をはみ出して表示されます。 ところがIEの場合、内容物がボックスの幅より大きいと、内容物に合わせて勝手にボックスの幅が広がって表示されます。 更に、IEの後方互換モードではwidthの計算方法が異なり、例えば今回の例では左右のpaddingも含めて460pxとして計算されます。よって実際のwidthは440pxとなります。 ということで、解決の糸口になればと思います。 キーワード：css width ボックス バグ IE Mozilla 標準モード 互換モード
お礼
pingu98さん、有難うございます。 >更に、IEの後方互換モードではwidthの計算方法が異なり、例えば今回の例では左右のpaddingも含めて460pxとして計算されます。よって実際のwidthは440pxとなります。 うっ・・・、何かこの辺にもやもやと感じる部分があります、調べてみたいと思います。
こんにちは！ 動作確認の環境はMacでしょうか？ こちらWinXPで確認しましたが、そのような症状はでませんでした。 強いてあげるなら、半角英数字をスペースを入れずに460pxより長くなるまで記述しますとfirefoxでは飛び出します。 IEですと、飛び出しはしませんが、460pxを超えて幅が大きくなります。 .boxを指定する側の文章はどうなっていますか？
お礼
すみません、情報不足でした。 当方WinXP環境です。 >強いてあげるなら、半角英数字をスペースを入れずに460pxより長くなるまで記述しますとfirefoxでは飛び出します。 これは以前に頭を抱えた問題ですたが、全角で入力した場合解決ました。今回も全角で入力しています。
- 2NN
- ベストアンサー率40% (143/353)
margin:auto とかブラウザによってはバグが出そうで 私は使ったことないのですが、クサいとすればmargin でしょうか…。 自信ないですが。 ここらへんで探してみては。 http://pc8.2ch.net/test/read.cgi/hp/1078463560/
お礼
2NNさん、有難うございます。 >margin:auto とかブラウザによってはバグが出そうで ほかの物ではautoを使っても問題なく表示できます。 URLも参考にさせていただきます。
関連するQ&A
- 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
- 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
- HP全体を左寄せ配置するCSSの記述について。
HP全体を左寄せ配置するCSSの記述について。 CSS付きで中央表示の無料テンプレートを頂きました。 これを左寄せ配置で表示させる方法を教えて下さい。 (base.css) @charset "Shift_JIS"; /* 基本設定 */ *{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Helvetica, sans-serif; } body{ color:#333; text-align:center; } br{ letter-spacing:normal; } a{ color:#333;text-decoration:none; } a:hover{ color:#fff;text-decoration:none; } img{ border:0px; } /* テンプレート */ #temp{ width:500px; text-align:center; line-height:18px; letter-spacing:1px; margin:10px auto; } #header{ background:#fff url(img/cat.gif) no-repeat 0px 0px; width:500px;height:120px; text-align:left; border:1px solid #333; } #menu{ background-color:#333; width:500px;height:24px; color:#fff; margin:10px 0px; border:1px solid #333; } #main{ background:#fff; width:480px; text-align:left; padding:10px; border:1px solid #333; } #footer{ background:#fff; width:500px;height:30px; color:#333; line-height:30px; margin:10px 0px; border:1px solid #333; } /* タイトル部分 */ #header h1{ padding:30px 0px 0px 190px; } /* メニュー部分 */ #menu ul{ list-style-type:none; height:24px; margin-left:30px; } #menu li{ display:inline; padding:0px } #menu a{ color:#fff; line-height:24px; float:left; text-decoration:none; padding:0px 5px; } #menu a:hover{ color:#DB9400; text-decoration:none; } /* メインコンテンツの見出し */ #main h2{ background:url("img/mark.gif") no-repeat; padding:1px 0px 3px 25px; color:#DB9400; よろしくお願いします。
- ベストアンサー
- HTML
- CSSでバックグラウントカラーの途切れを直したい
CSS初心者です。 CSSでfloatを利用してプロックを左右に並べています。 その際、左のブロックにbackground-colorを指定していますが、右のブロックの情報が多かった場合に、background-colorが途中で終わってしまいます。 どのようにしたらよいでしょうか。 下記のCSSもおかいしところがあるかも・・・指摘をお願いします。 #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; } div.blocka{ float: left; background-color: #FFC556; width: 150px; margin:0px 0px 0px 0px; padding:5px ; border-right:1px solid #666666 ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px ; width: 550px; }
- ベストアンサー
- 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による配置の計算が合いません
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>
- ベストアンサー
- その他（インターネット・Webサービス）
- ＣＳＳのフッター部分について
ＣＳＳ初心者です 今回外部ＣＳＳで作成したのですが途中まではうまくいきました しかし最後のフッターを入れるとレイアウトが崩れるのです。 今回の形状はページに上から「ページ(ホームページタイトル)」「ヘッダー(サブタイトル)」「同域上に左右に分けて「submanu」「main」」として最後にfootで「コピーライトなどを書いて」閉めたいのです 作ったCSSは以下の通り(どこが悪いのでしょう(foot入れるまで理想に近づいていたのですが)) *{ margin: 0px; padding: 0px; } div#page { text-align: left; border: 1px solid #333333; background: #66FFFF; width: 720px; margin: 0px; } div#head { width: 720px; padding: 5px 5px 0px 0px; margin: 0px; background: #FF00FF; } div#main { margin: 0px; border-left: 1px solid #FF; padding: 20px 0px; background: #00CCFF; width: 560px; height: 5000px; float: left; } div#submenu { width: 160px; height: 5000px; margin: 0px; padding: 20px 0px; float: left; background: #00FF33; } div#foot{ clear:both; text-align:center; font-size:10px; background:#FFFFFF; width:720px; height:20px; }
- 締切済み
- CSS
- cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくい
cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。 ［css］ <div id="main"> border: solid 2px #d3d3d3; margin-left:auto; margin-right:auto; width:780px; <div id="waku1"> width:170px; border: solid 3px #d3d3d3; padding-left:0px; padding-top:3px; padding-bottom:3px; margin-top:3px; margin-bottom:0px; background-color:#ccffff; <div id="waku2"> width:600px; border: solid 3px #d3d3d3; text-align:right; margin-left:auto; margin-right:0px; float:left; } 私としては780pxで作成した枠の中に、左側に170pxの枠を作成して、その右側に、600pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします
- ベストアンサー
- HTML
- CSSでレイアウトが崩れます
CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }
- 締切済み
- HTML
- 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
お礼
ao_さん有難うございます。 先ほど半角英字から始まる名前にしたのですが 一向に反映されませんでした・・・。 一体何が原因なのでしょうか不思議です？