- ベストアンサー
IE7の背景の移動について
input type=textを、CSS側で以下のようにしています。 input#mail { background:url(メールアドレス欄のテキストボックス画像) no-repeat left top; border:none; height:30px; width:140px; } すると、ChromeやFirefoxは問題ないのですが、IE7の場合、このメールアドレス入力欄にたくさんの文字を入れると、背景指定した画像が左にズレて見切れてしまいます。 対応方法はありますか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
とりあえず Chrome だと、画像が少し下にずれてしまう - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7466358.html#a1 )の回答の対策をとって見立てください。 それでもダメなら、IE7の仕様です。ブラウザフィックスが必要かもしれません。その前にすべきことをしてからです。
お礼
回答ありがとうございます。参考にさせて頂きます
関連するQ&A
- 背景画像がつられてのびていくのはどうして？
お世話になります。 画像ファイルがno-repeatと指定しているのに bの画像が下だけどんどん長くなっていくのが不思議なんですけど これはどういうことなんでしょうか？ 教えてください。お願いします。 'HTML <div id="1"> <div id="2"> <div id="3"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> </div> </div> 'css #1{ width: 900px; margin: 0 auto 0 auto; padding: 0 0 0 0; border-style: none; text-align: left; } #2 { width: 900px; padding: 0 0 0 0; border-style: none; background: #000 url("a.jpg") repeat-y; text-align: left; } #3 { width: 900px; padding: 0 0 0 0; border-style: none; background: url("b.jpg") no-repeat; text-align: left; }
- ベストアンサー
- HTML
- text フォームに背景を設定した時の挙動
<input type="text"> に、CSS による背景をつけました（ただの段差が付いた白い領域、というのを変更したかった）。CSS は次の通り。 .myinputtext { height: 15px; width: 57px; background-image: url(/Resource/inputtext.png); background-repeat: no-repeat; font-size: 9px; margin: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 2px; overflow: hidden; } 外観は望みどおりのものが出来たのですが、背景画像以上に幅を取る文字数を入力すると、その入力欄（背景の画像）を超えて文字が入力されてしまいます。overflow をhidden にしても回避できません。 幅を超える文字数入力があったときに、なんとかデフォルトの text input と同様に文字だけをスクロールさせたいのですが、何かうまい方法はあるでしょうか。
- ベストアンサー
- CSS
- 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
- HP作成で背景画像が表示されないです・・
いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとｃｓｓを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 － html － <body> <div id="container"> <div id="header"> →背景画像表示されます。 <p>＊＊＊＊＊</p> </div> <div id="box"> <div id="left"> →背景画像表示されます。 <p>＊＊＊＊＊ </p> </div> <div id="right"> →背景画像表示されません。テキストは表示されます。 <p>＊＊＊＊＊</p> </div> </div> <div id="footer"> <p>＊＊＊＊＊</p> </div> </div> </body> － ｃｓｓ － #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }
- ベストアンサー
- ホームページ作成ソフト
- 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
- IE6での表示がうまくいかず困っています
すみません！先ほど同様の質問をしたのですが、文字数オーバーで途中で切れてしまっていたので本当に恐縮ですが再度お願いいたします。 コーディングを勉強中なのですが、どうしてもIE6での表示がうまくいかず、大変困っています。色々ググって調べてみたのですが、決定的な原因がわからず本当にどうすればよいのかわかりません・・・。どなたかご教示いただけませんでしょうか。 他のFireFOX,Safari,IE8では多少のズレはあるものの普通に表示されました。IE6では背景画像とフッターのみしか表示されない。という状況です。 CSSは以下です。 /* generated by csscreator.com */ html{ height:100%; } body{ margin:0; padding:0; text-align:center; color: #fff; background: #000000 url("../images/back-right.gif") repeat-x; position: relative; text-decoration: none; height:100%; } body > #pagewidth { height: auto; } img { border-style:none; } ul{ margin:0; padding:0; text-align:left; } li{ list-style-type: none; line-height:100%; } p{ margin:0; padding:0; text-align:right; } #bg_wrap { height: 423px; width: 50%; top: 0px; background: url(../images/back-left.gif) repeat-x; position: absolute; } #pagewidth{ width: 918px; height: 100%; min-height: 100%; text-align:left; margin: 0px auto; position: relative; background: url(../images/left-col.gif) left repeat-y; } #left-container{ width: 130px; height: 100%; float:left; position:relative; padding-left: 23px; } #header{ width: 100%; height: 266px; color: #000; background-color: #fff; } #navigation{ width: 100%; color: #fff; padding-bottom: 5em; } #main-container{ width: 764px; float: right; display:inline; position: relative; } #maincontents{ padding-right: 21px; } #footer{ height: 50px; width: 100%; text-align:left; padding-left: 95px; clear: both; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} } 以上です、よろしくお願いいたします。
- ベストアンサー
- HTML
- IE6で見るとメニューバーが崩れてしまいます
ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。 〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }
- ベストアンサー
- ネットトラブル
- firefox とie6 でのbackground height wi
firefox とie6 でのbackground height width表示の違い ホームページ作成しています。 初心者です。 globalnavi というdiv のなかに globalnavi li をfloat-rightで横並びにしました。 width 800px height 30px にしたいのですが IEやfirefoxでずれが生じます。よくあるトラブルのよなのでバグ対策など調べて試してみましたが両方がぴったり合うことはありませんでした。丸一日挑戦しましたがギブアップです。background image は30×800のバーをpng形式で作りました。独学でまだ理解していないことばかりで乱雑なcssですみません。ご教示をお願いします！！ #globalNavi{ background-image:url(../menubar.png); width:790px; height:30px; font-size:14px; color: #1C1D21; text-align:center; } #globalNavi li{ float:right; overflow:hidden; width:80px; height:30px; list-style-type:none; text-align:center; color: #1C1D21; border-left-width: 2px; border-left-style: solid; border-left-color: #999; line-height:0; } #globalNavi a{ width:80px; height:30px; display:block; text-align:center; line-height:normal; } #globalNavi a:hover{ width:80px; height:30px; background-position: 0 -80px; background-color:#B7D68D; text-decoration: none;
- ベストアンサー
- HTML
- CSSのリスト 背景画像が表示されません
横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }
- ベストアンサー
- HTML
- IE6以下でメニューリストの下に隙間が入ります
お世話になってます。 あるサイトをCSSで作製しているのですが、メニューリストの下にIE6以下だと余計な余白？が入ります。 他のブラウザやIE7では大丈夫です。 http://takeoff-agp.beautypal.net/sample/test/test.html ここにサンプルを載せました。 CSSは・・・ * { font-style: normal; border: 0; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,p { margin: 0px; padding: 0px; } body { text-align: left; color: #505050; background: #FFFFFF; font-family: "Meiryo", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka, sans-serif; font-size: 12px; line-height: 1.7; } #wrapper { text-align: left; width: 880px; margin-right: auto; margin-left: auto; background-repeat: repeat-y; background-image: url(../images/bg-wrapper.gif); } #header { height: 110px; width: 860px; background-image: url(../images/bg-header.gif); background-repeat: no-repeat; margin-right: 10px; margin-left: 10px; border-bottom: 3px groove #999999; } #header h1 { margin-left: 10px; } #topnavi { height: 30px; width: 860px; border-bottom: 1px solid #990033; border-top: 1px solid #990033; margin-right: 10px; margin-left: 10px; } #topnavi ul { list-style: none; } #topnavi ul li { float: left; height: 30px; } #topnavi ul li a { float: left; height: 30px; } です。 javascriptでロールオーバーしています。 <a>にfloat: left;とheight: 30px;を入れてる為、二番目のボタンに<a>を入れると直ります。 ですが、現在いるページに<a>をつけるのはおかしいですよね？＾＾； 分かりずらい文章で大変申し訳ございませんが、とても困っているので、宜しくお願いします。
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 なるほど、そういう仕組になっているのですね。 CSS側でIE7の時だけ、画像を適用せず、バックグラウンドを白にして、ボーダーに然るべき色をセットしました。