- ベストアンサー
cssの指定の横幅よりテキストがはみ出てしまう
cssの指定の横幅よりテキストがはみ出てしまう 下記のとおり指定したのですが、winIE6.0だとwidthに収まるのに、FirefoxやNetscape 7.0 だと外にはみ出てしまい、横幅内に改行してくれません。 すみませんが、教えて下さい。 tate.css--------------------- #question { margin: 10px; padding: 3px; width: 560px; } #question dl{ margin: 10px; } #question dt{ color: #90B77F; font: 0.8em "MS ゴシック", Osaka, sans-serif; } #question dd{ font: 0.8em "MS ゴシック", Osaka, sans-serif; margin-left: 30px; } #question p { margin-bottom: 1em; font: 0.8em "MS ゴシック", Osaka, sans-serif; } --------------------------------- test.htm--------------------------------- <!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=shift_jis" /> <title>試し</title> <link href="tate.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="question"> <dl> <dt>質問：○○○○○○○○○○○○○○○○○○○○</dt> <dd>回答：○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○</dd> </dl> </div> </body> </html>
- tobana
- お礼率96% (57/59)
- HTML
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 私の経験では、今回の質問に関しては、HTMLの問題ではないと思います。 「○」を入れているのが問題で、「あ」とか「い」や普通の文章を入れておけば、FirefoxやNetscapeもIEと同じような表示になると思います。
その他の回答 (1)
- 3o-clock
- ベストアンサー率33% (233/689)
word-break: break-all; を追加してみる。 http://www.htmq.com/style/word-break.shtml http://www5e.biglobe.ne.jp/～access_r/hp/css/css_text_012.html
お礼
さっそく教えていただきありがとうございます！ urlを拝見したのですが、どうやらIE独自なのですね・・・、残念ながらIEでは表示できましたがFireFoxやNetscapeではそのままでした・・・。
関連するQ&A
- CSSで背景色のwidthが指定できません。
WebサイトのQ&Aのページを<dl>要素を使って作成しています。 質問項目には、background-imageだけを使い、 回答項目には、background-imageとbackground-colorを使っております。 それぞれの回答項目のbackground-colorのwidthを592pxで統一したいのですが、できません。 回答の文字数が少ないと、background-colorの横幅が足りなくなり、文字数が多いと592pxを超えてサイドバーと重複してしまいます。 かれこれ4時間くらい格闘しておりますが、きちんと表示できません。 ちなみに、dl、dt、ddの要素のうち、marginとpaddingはリセットCSSをしています。 以下に、該当するHTMLとCSSだけ書きました。 何がいけないんでしょうか？ もしくは、以下のコードだけではなく、親要素の属性や属性値とかが問題なのでしょうか？ <!-- HTML --> <dl> <dt class="questiontext_dt">ここで質問</dt> <dd class="question?dd">ここで回答してます</dd> </dl> /* CSS*/ .questiontext_dt { width:592px; padding: 0px 0px 0px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; text-align: left; float: left; font-family: "ＭＳ Ｐゴシック",sans-serif; background:url(http://www.ok.com/img/question1.gif); background-repeat: no-repeat; } .questiontext_dd { width:592px; padding: 5px 0px 5px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; float: left; font-family: "ＭＳ Ｐゴシック",sans-serif; background-color: #f5eabc; background-image:url(http://www.ok.com/img/question2.gif); background-position: left 5px; background-repeat: no-repeat; }
- ベストアンサー
- CSS
- CSSでエラーが出ました
CSS初心者です、宜しくお願いします。 CSS Validatorで検証した結果 文法解析エラーが発生しましたtext04 p・・・ @layout-grid-line : 1.8; text04 p・・・Parse error - Unrecognized } と結果が出ました、 以下CSS記述 .text04{ font-size : 16px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px; width : 662px; padding-left : 10px; } .text04 p{ font-size : 14px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px; layout-grid-line : 1.8; } どなたかご指導ください、お願いします。
- ベストアンサー
- HTML
- CSSでbodyに入ってるこの意味は何でしょうか？
あるサイトのCSSのbodyのfont sizeに 12px/1.22 "Osaka", "ＭＳ Ｐゴシック", Arial, sans-serif と、記述していましたが /1.22とは何を意味してるのでしょうか？
- ベストアンサー
- HTML
- CSSが反映されない！ソース公開
なぜかCSSが表示されずに困っています。 解決方法をご指導願います。 CSS↓（ファイル名screen.css） * { margin: 0; padding: 0; list-style: none; text-decoration: none; } body { margin: 25px 0 25px 0; font: normal 11px Trebuchet MS, Sans-serif; background: #000; color: #999; text-align: center; } #container { width: 320px; margin-left: auto; margin-right: auto; border: 1px solid #666; padding: 250px 25px 25px 25px; background: url("../images/top.jpg") no-repeat; text-align: left; } h1 { font: normal 20px Georgia, Sans-serif; margin-left: 45px; margin-bottom: 20px; } h1 span.highlight { color: #efefef; } h1 span.small { font-size: 11px; color: #333; } h2 { margin-top: 15px; margin-left: -25px; padding-left: 20px; border-left: 5px solid #666; font: bold 11px Trebuchet MS, Sans-serif; } INDEX.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="pl" lang="pl"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen"> </head> <body> はじめてのHP作成です。凡ミス等ご指導よろしくお願いします。
- ベストアンサー
- HTML
- CSSで14px/1.4の部分の記述は正しい？
とあるサイトのCSSを見ていたら次のような記述がありました。 font:normal normal normal 14px/1.4 "ＭＳ Ｐゴシック", "Osaka", "sans-serif"; normalが3つ続くのも謎ですが、フォントのサイズと思える部分で分数のようにして使われています。 14px/1.4で10pxのこと？ このような記述はできるのでしょうか？ そのサイトはCSSを使いこなせるような人が作っているようでデザインや文字などはとても読みやすくできています。
- ベストアンサー
- HTML
- htmlとcss
以下のようにボタンを配置し、その横に文字を書きました。 水平線上で見ると、ボタンのほうが若干上に配置されてしまいます。 綺麗に平行にするためにcssの設定をしたいのですが、誰か教えてくれませんか？ <!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" /> <title></title> <style type="text/css"> ul li { list-style-image: url(img/bot01.gif); font-size: 12px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } </style> </head> <body> <ul> <li>ああ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> <li>あ</li> </ul> </body> </html>
- 締切済み
- HTML
- CSS3で困ってます！
現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/
- ベストアンサー
- CSS
- ＣＳＳ 背景が表示されない、IEでflotが適用されない
dlタグで3×3のカラムで表示を行いたいのですが上手くいかず困っています。 dlに指定したfloat:left;がFierfox3では適用され横並びにddの内容が表示されるのに対し、EI6ではfloat:left;が適用されず縦並びになってしまいます。 そしてファイルをサーバーにＵＰした所、文字自体に文字化けも起こります。 背景にいたっては、EI・Fierfox共に表示されず。 と、目も当てられない状態です。 そこで、試しに別のサーバーにファイルをUPした所、float:left;はIEでも問題なく適用され、文字化けも解消されました。 ただ、背景だけは表示されないままでした。 別サーバーにUPした事でIEのfloatが適用され、文字化けも解消たという事は、サーバー固有の設定等に対応していないファイルをUPしてしまっていたと言う事なのでしょうか？それともCSSに問題があるのでしょうか？ 背景は何故表示の理由等も含めて、どなたかお分かりの方がいらっしゃいましたらよろしくお願い致します。 -html-------------------------------------------------------------- <!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"> <link href="index.css" rel="stylesheet" type="text/css" /> <title>タイトル</title> </head> <body> <div align="center"> <div id="top_box"> <dl> <dt class="name">タイトル</dd> <dd class="comment">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="data">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> <dl> <dt class="name">タイトル</dd> <dd class="comment">テキストストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト</dd> <dd class="data">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> <dl> <dt class="name">タイトル</dd> <dd class="comment">テキストストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト </dd> <dd class="data">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> </div> </div> </body> </html> --css------------------------------------------------ /* CSS Document */ body { font-size:small; font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; color:333; background-position: center; background-image:url(images/back.gif); background:#FFF; text-align: center; text-indent: 0px; padding: 0px; margin: 30 0 0 0; } #contents { margin: 0px auto; width: 870px; } form { margin: 0px; padding: 0px; } div { margin: 0px; padding: 0px; font-size:0.9em; color:#666666; letter-spacing:0.08em; line-height:1.4em; } img { border: 0px; } .box { width:745px; text-align:left; } .title { width:870px; text-align:left; } #top_box{ width:800px; height:400px; background-color:#ffffff; } /*font-sizeは固定*/ dl{ margin:0px; margin-left:10px; margin-right:10px; margin-bottom:1em; padding:0px; float:left; width:225px; font-size:12px; border-width:1px 1px 0px; border-style:solid; border-color:#ffffff; } dt{ margin:0px; padding:0px; } dd{ margin:0px; padding:4px 0.5em; border-color::#fff; border-bottom:0px solid; text-align:left; } dd.name{ height:3.0em; } dd.comment{ height:3.0em; background-color:#ffffff; } dd.date{ height:3.0em; border-style:none; }
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSでの背景色の指定について
以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか？ ■test.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=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }
- ベストアンサー
- CSS
- Firefoxで文字がimgの裏側に入ってしまう
CSSでHPを作成しています、 ie6・7・8では下記ソースheader部分にimgを入れて<p>・・・</p>で 文字を上に表示しています、 ie6・7・8では思い通り表示されますがFirefoxでは<p>・・・</p>の文字が表示されません、imgの下側（裏側）になっているのか？ 下記にソースとCSS記述を書きましたので解決方法を教えてください。 ソース記述 <body><!-- Container --> <div id="container"><!-- Header --> <div id="header"><img src="img/logotop.gif" width="800" height="143" /> <h1>ブルベリーパン</h1> <p>ブルベリーパンを作って39年、厳選された素材と<br /> 熟成されたパン生地が生み出す匠の味、1日限定350個<br /> </p> <dl> <dd>：：：：：：：：：：：：：<br /> ・・・・・・・・・・・・・・・・・<br /> ・・・・・・・・・・・・・・・・・<br /> <dd> </dl> </div> CSS記述 #header{ margin-bottom : 0px; } #header h1{ font-size : 8px; color : #4a7aab; font-weight : 100; margin-top : -144px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #header p{ font-size : 13px; color : #000000; margin-top : 4px; padding-left : 3px; line-height : 1.6; margin-left : 10px; padding-top : 65px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; width : 500px; float : left; } #header dd{ font-size : 13px; color : #4a7aab; margin-top : 0px; line-height : 1.4; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; }
- 締切済み
- HTML
お礼
教えていただき、ありがとうございます。 半信半疑になりながら試したところ、まさにその通り！ あいうえおだとちゃんと改行してくれました！ うわーびっくりです。 目からウロコと申しましょうか、本当にありがとうございます。 ということは、○は文字じゃないんですかね？ そこが疑問になってしまいました。