• 締切済み

borderの消失

<p class="クラス名">文章</p> p.クラス名 { 　 border-bottom:solid 1px #色; font-weight:bold; font-size:22px; } この状態でchromeとIEでborderが表示されません、なぜでしょうか imgのborderは0に設定してあります、考えられる原因を教えてください よろしくお願いします

  • CSS
  • 回答数1
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でのチェック結果は？ p.クラス名 { 　 border-bottom:solid 1px #色; font-weight:bold; font-size:22px; } 　もし、これが本当なら全角空白文字があるから・・ 　半角と全角の空白の区別ができるテキストエディタを使うと良いかと・・ テキストエディタ EmEditor - EmEditor Free ( http://jp.emeditor.com/modules/download2/rewrite/tc_5.html ) 　とか・・

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ボーダースタイルがうまく表示できない

    #content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div　id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。 どこが間違っておりますか？ アドバイスを宜しくお願いします。

    • ベストアンサー
    • HTML
  • 角丸にしたDiv内の画像の角がはみ出してしまう

    よろしくお願いします。 参考書片手にCSSを勉強しています。 品物の画像をスマホで見られるページを作っているのですが、 角丸にしたDiv内の画像の角がはみ出してしまい、対処法がわからず悩んでいます。 どのような方法がありますでしょうか。 初歩的な質問で恐れ入りますがご教授お願いします。 <!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=utf-8"> <title>じっけんじっけん</title> <style type="text/css"> <!-- body, p, h1, h2, h3, img, table, div, ul, li { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; } #wrap { background-color: #EEEEEE; height: auto; width: 100%; margin: 0px; padding-top: 100px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px; } .title { width: 100%; margin-right: auto; margin-left: auto; } .main { background-color: #FFFFFF; width: 96%; margin-right: auto; margin-left: auto; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); box-shadow:0px 0px 2px #555; margin-bottom: 100px; border-radius: 20px; } p.resizeimage img { width: 100%; } .itemnum { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-color: #C0C0C0; line-height: 50px; float: left; } .price { color: #7D7D7D; font-size: 52px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 60px; text-align: right; } .itemname { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 54px; font-weight: bold; } .detail { color: #7D7D7D; font-size: 40px; padding: 30px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #C0C0C0; line-height: 48px; } --> </style> </head> <body> <div id="wrap"> <div class="main"> <p class="resizeimage"> <img src="p/a.jpg"> </p> <p class="itemnum">32×13×22cm</p> <p class="price">￥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Ａタイプ</p> </div> <div class="main"> <p class="resizeimage"> <img src="p/b.jpg"> </p> <p class="itemnum">35×14×24cm</p> <p class="price">￥10,000</p> <p class="itemname">アイテム</p> <p class="itemname">Ｂタイプ</p> </div> </div> </body> </html>

    • ベストアンサー
    • CSS
  • <h2></h2>の中に、サイズの違う文字を・・

    こんにちは。よろしくお願いします。 以下の様に、追加したいのですが、分かりません。 現在は、 <h2 class="uline">タイトル</h2> となっております。 <h2 class="uline">タイトル[date]</h2> とすると、[date]のフォントが大きすぎます。 この日時([date])をタイトルの"右端"にレイアウトして、 フォントサイズを12px(85%?)にしたいのですが、どうしたら良いでしょうか? <h2 class="uline">タイトル</h2>[date] とすると、[date]の前で、改行されてしまいます。 一行で、文字の大きさを変えたいのです。出来ませんでしょうか？ スタイルシートは、以下の様になっております。 よろしくご指導下さい。お願いします。 /* 初期化 */ h1,h2,h3,h4{font-size: 14px;font-weight: normal;} hr{display: none;} /*コンテンツ*/ #content { width: 650px; margin: 0; margin-bottom: 20px!important; text-align: left; float: left;} #content h2{ margin-top: 5px; color: #CCC; font-size: 143%; line-height: 150%; font-weight: bold; display: block; text-align: left;} /*その他属性*/ .line{clear: both;margin: 10px 0 20px 0;border-bottom: 1px solid #555;} .uline{border-bottom: 1px solid #555;}

    • ベストアンサー
    • CSS
  • 無駄なところ省いてほしいです。

    <html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } TD{ font-size : 10pt; } a.menu:link { color: #FFFFFF; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FF99CC; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; display: block; height: 25px; } a.menu:visited { color: #FFFFFF; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FF99CC; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; display: block; height: 25px; } a.menu:hover { color: #666666; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FFFFFF; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : ridge ridge ridge ridge; border-color : #FFFFFF #FFFFFF #FFFFFF #FFFFFF; display: block; height: 25px; } a.menu:active { color: #666666; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FFFFFF; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : groove groove groove groove; border-color : #FFFFFF #FFFFFF #FFFFFF #FFFFFF; display: block; height: 25px; } .pagetitle{ color : #FF6699; padding-bottom : 5px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : #FF6699; } .sub1{ color : #FFFFFF; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; background-color : #FF99CC; } .log{ border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; background-color: #FFFFFF; } HR{ color : #999999; height: 1px; } --> </style> </head> <body bgcolor="#ffffff" background="./top_img/1155290302.gif" text="#666666" link="#666666" vlink="#666666" alink="#666666"> <center> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; FONT-FAMILY: 'Comic Sans MS'" cellspacing="3" cellpadding="0" width="166"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="#666666">Top</font></td> </tr> <tr> <td><a class="menu" href="">Profile</a></td> </tr> <tr> <td><a class="menu" href="">Diary</a></td> </tr> <tr> <td><a class="menu" href="">BBS</a></td> </tr> <tr> <td><a class="menu" href="">Chat</a></td> </tr> <tr> <td><a class="menu" href="">Room</a></td> </tr> <tr> <td><a class="menu" href="">Album</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-1</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-2</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-3</a></td> </tr> <tr> <td><a class="menu" href="">Link</a></td> </tr> <tr> <td><a class="menu" href="">Mailbox</a></td> </tr> </table> </center> </body> </html>

  • 文字の下線を画像に変えて表示する方法

    http://okwave.jp/qa/q8252180.html 上記の箇所で質問させて頂いたのですが ちょっと上手くいきませんので 新しく質問させて頂きました すいません 文字の下線を画像に変えて表示する方法を教わりました。 以下のようにして、したのですが 肝心の画像が表示されないのです どのようにしたら宜しいでしょうか？ ――――――――――――――――――― Html <p class="msglink line-2">「原発がなくても、ホントに大丈夫なの～？」<br> そんな疑問に、楽しく答えてくれる動画です。</p> //////// Css p.msglink { margin: 7px 0 0px 0; color: #000; font-size: 9pt; font-weight: bold; line-height: 150%; padding: 10px; } p.line-2 { background: url("img/border1.jpg") no-repeat 0 100%; margin-bottom: 20px; padding-bottom: 40px; }

    • ベストアンサー
    • CSS
  • IE6 IE7で文字が潰れる 高さがでない・・・

    お世話になります。 各ブラウザで表示確認をしていたら問題がみつかりましたので、 質問させていただきます。 IE6,IE7において、文字の高さがつぶれてしまって表示できていないようです・・・。 なにかcssでの指定が足りないのでしょうか？ 原因と解決策ございましたら、よろしくお願いします。 h2{ color:#222222; text-align:center; font-size:154%; font-weight:bold; border-bottom:2px solid #222222; padding-bottom:5px; margin-bottom:10px; } デフォルトcssはyuiのリセットcssでリセットしております。 cssとスクリーンショットを載せておきます。 画像は上がIE8などでちゃんと表示されているもので、 下がIE6とIE7での表示です。

    • ベストアンサー
    • CSS
  • 幅を広げたいのに文字が隠れ（？）る

    下記のように分かれているページがあります。 ┌───────┐ │へっだ　　　　　　│ ├─┬───┬─┤ │め│めいん│※│ │に│　　　　 │　 │ │ゅ│　　　 　│　 │ ├─┴───┴─┤ │ふった　　　　　　│ └───────┘ 『※』の部分に文字などもなく不自然にスペースができています。 『めいん』の幅以上の文字を入れると、文字が隠れてしまいます。 『※』の部分まで『めいん』を伸ばし、2カラムにしたいのですが、 他所の幅を変更するだけでは解決できず、質問をさせていただきました。 質問部分のコードは下記の通りです。 （ヘッダ・フッタ省略） 【HTML部分】 <!-- メインコンテンツ --> <div id="container"> <div id="contents"> ～省略～ </div> <!-- メインコンテンツ終わり --> <!-- メニュー --> <div id="menu"> ～省略～ </div> <!-- メニュー終わり --> </div> <!-- コンテンツ終わり --> 【CSS部分】 /*---------- コンテンツ ----------*/ #container { width: 1000px; overflow: visible; margin: 0px; padding: 6px; background-color: #ffffff; } /*---------- メインコンテンツ ----------*/ #contents { float: right; margin: 0; padding: 5px 10px 5px 0; font-size: 12px; line-height: 180%; width: 1000px; letter-spacing: 1px; } #contents #pannavi { margin: 0; padding: 0 0 5px 0; font-size: 12px; } #contents h2 { height: 27px; margin: 0 0 4px 0; padding: 8px 0 0 20px; font-size: 12px; color: #333333; background-image: url(img/titlebar.gif); background-repeat: no-repeat; } #contents h3 { margin: 12px 5px 10px 6px; padding: 8px 10px 5px 13px; line-height: 110%; font-size: 13px; color: #444444; border-left: solid 5px #aaaaaa; background-color: #eeeeee; } #contents h19 { margin: 12px 5px 10px 6px; padding: 8px 10px 5px 13px; line-height: 110%; font-size: 13px; color: #444444; border-left: solid 5px #eeeeee; background-color: #eeeeee; } h4,h5 { font-size:18px; font-weight:bold; color:#7e603b; } h7 { font-size:10px; font-weight:lighter; color:#7e603b; } h8 { font-size:13px; font-weight:bold; color:#7e603b; } h9 { font-size:13px; font-weight:bold; color:#cccccc; } h10 { font-size:13px; font-weight:bold; color:#000000; } h11 { font-size:18px; color:#000000; } #contents p { margin: 3px 0 3px 0; padding: 0 5px 0 5px; line-height: 180%; font-size: 12px; } #contents a { color: #c9171e; font-size: 12px; } #contents a:hover { color: #e83929; font-size: 12px; } #contents img.head_photo { margin: 0 0 10px 50px; } #contents img.photo { float: left; margin: 10px 20px 0 0; } #contents img.picture { margin: 0 10px 10px 0; float: left; } #contents p.photo { margin: 0 0 20px 0; padding: 0; } table#t01 { border: solid 1px #999999; border-collapse: collapse; } td#t01 { border: solid 1px #999999; border-collapse: collapse; } td#head { padding: 7px 6px 5px 10px; border: solid 1px #999999; border-collapse: collapse; } table.table_line { border-collapse: collapse; margin : 10px 0 0 0; } td.table_line { border-collapse: collapse; padding : 9px 14px 7px 14px; border-bottom: solid 2px #fffffc; } どうか、ご教授お願いいたします。

    • ベストアンサー
    • CSS
  • cssで画像を中央に寄せる方法について

    よろしくお願いします。一部の画像を中央に寄せたいのですが方法が分かりません。現在の内容は以下のような感じです。 【html】 <p class="font"> スタイルシート <span class="color2">レッスンブック</span> パソコン <img src="img/hoge.gif" alt="テスト" width="250" height="130" /> インターネット プリンター </p> 【css】 .font2{ text-align: left; width: 750px; padding: 20px; border-top: 2px solid #191970; border-right: 2px solid #191970; border-bottom: 2px solid #191970; border-left: 2px solid #191970; margin-left: 0; margin-right: 10; background-color: #ffff00; font-weight: bolder; } imgのみ中央に寄せたいのですがご指導をお願い致します。 良く分からなかったのですが以下のような記述をしてみたのですが 中央に寄りませんでした。 <img src="img/hoge.gif" class="aaa" alt="テスト" width="250" height="130" /> cssに .aaa{ text-align: center; } また、同スタイルにborderとpadding、widthとpaddingを使用するのは 有効な方法では無いのでしょうか？ 前回のご質問で他の方にご指導頂いたのですが誤って締め切ってしまいました。 どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • ホームページビルダーでスタイルシートを使ったのですが？

    今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }

  • 【CSSについて】リストをフロートするとfirefoxでボーダーが消える

    お世話になっております。 今回は、CSSの質問です。 IE6.0とFF3.0の違いなのですが、ソースを以下に記述します。 ***HTML*** <ul id="navi"> <li><a href="#">風景</a></li> <li><a href="#"> 生き物</a></li> <li><a href="#">建物</a></li> <li><a href="#">乗り物</a></li> </ul> ***CSS*** #navi { margin-left: 0px; padding-left: 0px; list-style-type: none; width: 600px; border-right: 1px solid #333333; } #navi li { float: left; border-left: 1px solid #000000; border-top: 1px solid #333333; border-bottom: 1px solid #000000; width: 149px; } #navi a { display: block; background-color: #ff9900; color: #FFFFFF; text-decoration: none; width: 149px; line-height: 30px; text-align: center; font-size: 12px; font-weight: bold; letter-spacing: 0.5em; } #navi a:hover { background: #00FFFF; color: #000000; } IEではボーダーで区切られたナビがキレイに表示されますが、FFでは右端のボーダーが消えてしまいます。 これもハックしなきゃならないものですか？ とりあえず、背景に画像を使用することで逃げられるのですが、すっきりしませんので対処法を教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する