- 締切済み
IE8で指定していない空白があく
dlリストを使用して、住所などの情報を入力するフォームを作っているのですが、なぜかinput要素の左側だけに空白があきます。 当然inputの左にmarginもpaddingも設定していません。 普通のテキストやselect要素はしっかりくっつきます。 <dl> <dt>都道府県</dt> <dd><select id="pref" name="pref"><option value="">▼選択してください</option></select></dd> </dl> <dl> <dt>市区町村</dt> <dd><input name="addr" type="text" id="addr"></dd> </dl> ソースはこんな感じです。 唯一inputに対してcssを設定しているとすれば以下だけです。 input[type="submit"]{ padding: 3px; } input[type="button"]{ padding: 3px; } chromeで見るとこのようになっていないので、IE8だけだと思います。 （IE7やIE6で見る環境がないので、他のIEはわかりませんが） inputに対してやidを付与してmargin、padding共に0pxなどと設定しましたが改善されません。 同じような現象になった方がいれば、解決方法をお教えください。
- ok-rjak
- お礼率51% (63/122)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- outbrave
- ベストアンサー率60% (231/380)
掲示されたソースでは、画像のような表示にはなりません。
関連するQ&A
- IE7だけに出る謎の空白（CSS）の解決方法
以前も似たような症状が出たのですが・・・ IE７でだけ、謎の空白が約3px程度出てしまいます。場所は<dl></dl>と<img>の間です。 イメージとしては上から3段をくっつけて中身（<dl></dl>）だけ高さを可変にしてひとつの枠のように見せたいと考えています。 ですがIE７でだけ空白ができてしまうのです。 原因と解決方法を教えていただけないでしょうか？ <div id="right"> <img class="top" src="img/bg-rtop.gif" /> <dl> <dt><img src="img/right-tit1.gif" /></dt> <dd>ああああああああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit2.gif" width="200" height="20" /></dt> <dd>ああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit3.gif" width="200" height="20" /></dt> <dd>ああああああああああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit4.gif" width="200" height="20" /></dt> <dd>あああああああああああああああああああああああああ</dd> </dl> <!-- ここで空白ができてしまう・・・--> <img class="under" src="img/bg-runder.gif" /> </div> ■CSS @charset "shift_jis"; body { text-align: center; margin: 0px; background-image: url(img/bg.gif); vertical-align: bottom; line-height: 165%; letter-spacing: 1px; font-size: 12px; } /* 右側の設定*/ #right{ width:200px; float:right; } #right .top { margin: 20px 0 0 0; } #right dl { background-image: url(img/bg-rmiddle.gif); margin: 0px; padding: 0 0 20px 0; } #right dt { padding: 10px 0 0 0; } #right dd { margin: 10px 0 0 12px; padding: 0 0 0 0; } #right .under { margin: 0px; } 一部省略してます・・・ どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- IE6で見ると文字の下半分が隠れる
お世話になります。 HTMLは素人に毛が生えたレベルの知識しかありませんが、申し込みフォームの表示がおかしいので、直したくチャレンジしたのですが。。。 結局わかりませんでしたので、どなたかヒントだけでもいただけますでしょうか？ 現象としてはIE6（おそらく7や8も同様やもしれません。。）で確認したのですが、文字の下1/4ぐらいが消えてしまうのです・・・。 Chromeでは問題なく見れるのですが、IE系ではダメなようです。 以下、実際のHTMLソースとCSSも合わせて添付します。 コピーしてそのまま使える内容になっております。 それでは、ご教授のほど宜しくお願いいたします。 -- ココからHTML ---------------------------------------------------- <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <table class="basic"> <tr> <td rowspan="3" class="leftcell">連絡先</td> <td class="rightcell gray"> <dl><dt class="single">電話番号</dt><dd> <input type="text" name="telephone" size="20"><span class="example">例）09012345678</span> </dd></dl> </td> </tr> <tr> <td class="rightcell"> <dl> <dt class="single">メールアドレス</dt><dd> <input type="text" name="mail" size="20"> </dd> <dt></dt><dd><small>※PCでも携帯でもどちらでも可能です</small></dd> <dt><font color="red"><B>【ご注意】</B></font><BR><small>こちらのアドレスに<font color="red">メールが届かない場合、登録の受付ができません。</font>間違っていないかご確認下さい。</small></dt> </dl> </td> </tr> <tr></tr> <tr> <td class="leftcell">メルマガの配信</td> <td class="rightcell gray"> 希望する <input type="radio" name="magazine" value="1" checked="checked"> 希望しない <input type="radio" name="magazine" value="2"> </td> </tr> <tr> <td class="leftcell">パスワード設定</td> <td class="rightcell"> <dl> <dt class="single">パスワード</dt> <dd> <input type="text" name="pass" size="20">4～12文字で任意の文字をご入力ください。 </dd> </dl> </td> </tr> </table> </body> </html> -------------------------------------------------------------------- -- ココからCSS ----------------------------------------------------- body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, iframe, table, th, td { font-size:100%; font-style:normal; font-weight:normal; line-height:1.4; margin:0; padding:0; } body { margin:0; padding:0; font-size:14px; font-family:sans-serif; } small { font-size:0.8em; } table, td, th { border: #888 solid 1px; border-spacing:0; border-collapse: collapse; padding:2px 15px; } table.basic { width:750px; margin-bottom:10px; background-color:#fff; } td.gray {background-color:#f2f2f2;} td.leftcell{ text-align: center; width:162px; background-color:#fff; line-height:1.2em; padding:2px 0; } td.rightcell{ width:588px; font-size:0.85em; padding:3px 15px; vertical-align:middle; } td.rightcell dt { float:left; line-height:1em; vertical-align:middle; } td.rightcell dt.single { margin-top:3px; } td.rightcell dt.sin { margin-top:3px; color: #708090; } td.rightcell dd { margin-left:120px; } td.tdhead{ color:#000; background-color:#CCE9FF; padding:2px 10px; } input { margin-right:15px; } --------------------------------------------------------------------
- ベストアンサー
- HTML
- 改行がある場合不揃いになる
以下のように改行があっても下線を揃えられる方法ってないでしょうか？ <dl> <dt>あああ</dt> <dd>いいい</dd> <dt>ううう<br />ううう</dt> <dd>えええ</dd> <dt>おおお</dt> <dd>かかか</dd> </dl> dl { padding: 0.5em 0; width: 390px; } dl dt { float: left; width: 65px; margin-bottom: 15px; padding: 5px 0 8px 15px; clear: both; border-bottom: 1px dotted #736357; } dl dd { margin-left: 80px; margin-bottom: 15px; padding: 5px 0 8px 10px; width: 289px; border-left: 1px dotted #736357; border-bottom: 1px dotted #736357; } 現在このような状況なのですが改行が入ると下線(border-bottom)がずれるのでバランスが悪く なってしまいます。 全てdlでくくってやれば問題ないのですが上記の場合でも揃えられる方法がありましたら 教えてください。
- 締切済み
- HTML
- IE6バグ css hover
いつもお世話になってます。 宜しくお願い致します。 クロム、firefox、オペラ、サファリ、IE7、IE8ですと、 正常に動作するのですが、IE6だけ動作しません。 (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。 何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML
- css hover ie6
いつもお世話になってます。 宜しくお願い致します。 クロム、firefox、オペラ、サファリ、IE7、IE8ですと、 正常に動作するのですが、IE6だけ動作しません。 cssハックは使用していません。(ieのばーじょんごとにcssを切り替えているためです。) (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。 何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML
- IE7のfloatの回り込みがうまくきません
お疲れ様です。いつもお世話になっております。 FF2、Opera、IE7という3つのブラウザでコーディングしたHTMLをチェックしている状態です。 下記に問題のHTMLとCSSを記述します。 <div id="common_border"> <div id="common_border_side"> <div id="common_border_top"></div> <div id="l_navi"> <ul> <li id="l_navi_1"><a href="">ナビ1</a></li> <li id="l_navi_2"><a href="">ナビ2</a></li> <li id="l_navi_3"><a href="">ナビ3</a></li> </ul> </div> <div id="explain"> <h1>説明</h1> <dl> <dt>内容1</dt> <dd>説明が入ります。</dd> </dl> <dl> <dt>内容2</dt> <dd>説明が入ります。</dd> </dl> </div> <div id="common_border_bottom"></div> </div> </div> </div> common_borderのtop,bottomは丸角の枠画像です。 sideには1pxの背景画像が入ります。 /*---------丸角の枠線を表示するCSS--------------*/ #wrapper #common_border{ width:736px; margin:10px 82px; padding:0; } #wrapper #common_border_top{ background:url(../img/common_border_top.jpg) no-repeat; height:10px; padding:0; margin:0; } #wrapper #common_border_side{ background:url(../img/common_border_back.jpg) repeat-y; margin:0; padding:0; } #wrapper #common_border_bottom{ background:url(../img/common_border_bottom.jpg) no-repeat; height:20px; padding:0; margin:0; } /*----------------左のナビゲーション------------------*/ #wrapper #l_navi{ float:left; margin:0; padding:0; width:200px; } #wrapper #l_navi ul{ list-style:none; padding:0 20px; margin:25px 0; } #wrapper #l_navi ul li{ margin:0 0 5px; } /*-------------説明部分-----------------*/ h1{ text-indent:-9999px; background:url(../img/productexplain.jpg) no-repeat; margin:20px 0 10px 180px; } p{ margin:0; padding:0; } #explain{ text-align:left; width:506px; margin:0 35px 30px 15px; padding:0; } #explain dl dt{ color:#8E2E00; } 差し障りのないようところどころ端折ってます。 出来上がりは適当ですが、下記のようになります 丸角の枠線画像（上） ナビ1 h1の説明 ナビ2 説明1 ナビ3 説明2 丸角の枠線画像（下） ナビをfloat:leftにしていて、explainにはfloatをかけていません。 explainをfloatすると、なぜか丸角の枠線画像（下）の下にナビ、explainともに表示されてしまうためです。 なので、ナビにfloatをかけた状態で、そのナビを内包するかたちでexplainに左のmarginを210pxとり、 explainのwidthを680pxほどにすることで、OperaとFFはきれいに表示されました。 ボーダーを表示させると 丸角枠線画像（上） ┏━━━━━━━━━━━ ┃┏━━━┓ h1 ┃┃ナビ１┃ 説明 と、強制的な感じです。 ところが、IE7だとこれがうまくいかず、つまり、floatされたナビを内包できずに、widthが足りず、 丸角の枠736px-（ナビ200px+説明680px）でマイナスになり、説明がナビの下に来てしまうような状態です。 なんとか足りるようにピクセルを合わせると、IE7ではきれいに見えるが、Opera,FFで崩れてしまいます。 IE7だけのハックなどがあるようなのですが、何分まだ慣れてなくて、自力で解決するのは難しそうです。 上記のソースを見て何か助言いただくことができたら、お願いします。
- ベストアンサー
- HTML
- 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
- ＣＳＳ 背景が表示されない、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サービス）
- li dl 背景画像が消えてしまう
listタグ内のdlタグに背景画像をつけました。 Dreamweaverで制作していて、ブラウザ確認（IE/firefox）すると問題ないのですが、いざサーバにあげてみると、IE/firefoxともに背景画像が表示されません。 背景画像以外のcssは反映されていました。 こんなことってあるのでしょうか？ 【html】 <ul id="bkn_r"> <li><img src="../../images/bkn_fr_r01.jpg" border="0"></li> <li><dl id="bkn_no"> <dt>番号</dt> <dd>YAT-001</dd> <dt>担当者</dt> <dd>××××</dd> </dl></li> <li><dl id="tel"> <dt><img src="../../images/bkn_fr_r02.jpg" alt="*"></dt> <dd id="tel_no">××</dd> </dl></li> </ul> 【css】 ul#bkn_r { list-style-type: none; padding: 0; margin: 0; } ul#bkn_r li img{ font-size:0; line-height:0; vertical-align: top; padding: 0; margin: 0; } #bkn_no { background-image: url(../images/bkn_fr_rbg01.jpg); background-repeat: repeat-y; padding-left: 30px; margin: 0px; width: 200px; } #tel { background-image: url(../images/bkn_fr_rbg02.jpg); margin: 0px; } #tel_no { font-weight: bold; color: #CC0000; font-size: 1.2em; letter-spacing: 0.03em; } #bkn_no dd { font-weight: bold; font-size: 1em; margin-left: 10px; margin-top: 0px; }
- ベストアンサー
- HTML
- CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一
CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一部反映されません。 詳しい方ご教授願います！！ ・スクロールバーが出ずに指定した高さを超えてデカデカと表示される ・ボックスを囲む線が表示されない ・その他の設定（余白、色、フォント・・・）は指定通り表示される 外部CSSの記述は下記の通りです。 ----------------------------------- #main dl.info { height: 130px; overflow: auto; margin-right: auto; margin-left: auto; padding: 10px; border: 1px solid #cccccc; margin-bottom: 1em; } #main dl.info dt { font-weight: bold; float: left; } #main dl.info dd { border-bottom: 1px solid #cccccc; padding-left: 8em; } ----------------------------------- ちなみに、mainは下記の通りです。 ----------------------------------- #main { float: left; margin-top: 20px; margin-left: 40px; width: 500px; } #main h2 { font-size: 110%; background-image: url(images/h2bg.gif); background-repeat: no-repeat; background-position: bottom; padding-left: 10px; color: #696969; clear: both; } #main p { padding: 2px; } ----------------------------------- htmlファイルへの記述は下記の通りです。 ----------------------------------- <div id="main"> <h2>更新情報</h2> <dl class="info"> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> <dt>2010/11/11</dt> <dd>ここに文章</dd> </dl> </div> <!--/main--> ----------------------------------- いくら見直しても書き直してみても、直りません・・・ きっと私がどこか抜けているか間違っているのだと思うのですが・・・ 宜しくお願い致します！
- 締切済み
- HTML
