- ベストアンサー
スタイルシートでテーブル
とても基本的な事なのですが、 以下のコードを実行すると IE6 で見た時に セルの下に隙間が出来てしまいます。 Firefox 2.0 で確認した場合すっきり表示されてるのですが、 なにかアドバイスありますでしょうか？ ------------------------------------------------------------- <!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>[ Picture ]</title> <style type="text/css"> <!-- * { margin: 0px; padding: 0px; } #container { width: 750px; border: 1px solid #ccc; background: #fff; margin: 0 auto; } #section1 { text-align: center; background: blue; } #section2 { text-align: center; background: red; } --> </style> </head> <body> <div id="container"> <div id="section1"> <img src="images/picture01.jpg" /> </div> <div id="section2"> <img src="images/picture02.jpg" /> </div> </div> </body></html> -------------------------------------------------------------
- yasu182
- お礼率53% (149/277)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<div id="section1"> <img src="images/picture01.jpg" />\n </div> となっていて改行文字は空白になりimgで改行して空白文字が画像の下にできるんじゃないかな。 <script> window.onload = function(){ e = document.getElementById('section1').childNodes for(var i = 0;i < e.length;i++){ alert(e[i].nodeName) } alert(e[0].currentStyle.display) } </script> IE6は多くのタグで開始タグ直後の改行文字は無視するみたいですけどね。 と言うことで <div id="section1"><img src="images/picture01.jpg" /></div> とすれば良いと思いますよ。 たぶんね。
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
imgのvertical-alignをbaseline（初期値）以外にすると治ると思います。 例） #section1 img,#section2 img{ vertical-align:middle; }
お礼
なおりました！！ css は簡単なようでけっこう奥が深いですね。 ほんと助かりました。ありがとうございます！！
関連するQ&A
- DreamWeaverでのスタイルシート適用後のプレビューについて
最近やっとDreamWeaverを購入してテーブルからCSSデザインに 乗り換えようと奮闘中のものです。 外部スタイルシートに div#container { background: #ffffff; padding: 20px; margin: 10px 30px; border: 2px solid #999999; } と書き、 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=Shift_JIS" /> <link href="/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="container"> test web site </div> </body> </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=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************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=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- 6で表示がずれて困っています。２つ目です。
6で表示がずれて困っています。２つ目です。 firefoxとIE8ではちゃんと表示されているのに、IE6ではずれてしまいます。 IE6で画像が下にずれて切れ、スクロールバーが表示されてしまいます。 原因とfirefoxとIE8と同じように表示させる方法を教えて下さいm(__)m 画像添付とソースを貼ります。 <!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="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div id="header"> <div id="header_line"> </div> <div id="logo"> <img src="A_22.gif" width="142" height="69" /> </div> <div id="cn"> <img src="A_33.gif" width="459" height="158" /> </div> </div> </div> </body> </html> ●css● *{ margin: 0; padding: 0; } img{ border: 0; vertical-align: bottom; } #main{ background: url(images/back_shadow.jpg) repeat-y; margin: 0 auto; width: 820px; height: 300px; } #header{ width: 800px; height: 181px; margin: 0 auto; overflow: auto; } #header_line{ background:url(images/header_1.gif) repeat-x; margin: 0 auto; width: 800px; height: 13px; } #logo{ width: 152px; height: 69px; margin: 10px 0 0 10px; float: left; display: inline; } #cn{ width: 459px; height: 158px; margin:10px 0 0 0; float: left; } 以上です。 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いしますm(__)m
- ベストアンサー
- HTML
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!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="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
- CSSで余白とパディングに”０”を指定したのに上部に余白ができてしまう
DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。 そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。 IE6では空白がないのですが、FIREFOX2だと空きます。 分かる方いらっしゃったら教えて下さい。 ソースはこれです↓ 【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=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css" media="all">@import url("school2.css");</style> </head> <body> <div id="wrapper"> <div id="header"> <h1><img src="images/Logo03.gif" width="310" height="90" /></h1> </div> </div> </body> </html> 【css】 body { background: #E0FFCE; text-align: center; margin: 0px; padding: 0px; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 800px; border: 1px solid #009999; background: #FFFFFF; } #wrapper #header { background: url(images/Backheader3.gif) no-repeat; margin: 0px; padding: 0px; height: 120px; border-bottom: 6px double #009999; } #wrapper #header img { margin: 0px; padding: 0px; }
- ベストアンサー
- ホームページ作成ソフト
- iframeを使わずに上下50%ずつに分割したい
タイトルどおりですが・・・ frameやiframeを使わずに上下２分割させ、50%ずつ固定にしたいのですが、うまくいきません。 高さ100%は http://black-flag.net/css/20110621-3232.html で再現できたのですが、この中にheight:50%のdivを切ろうとしても上に詰まってしまいます。 表現する方法はあるでしょうか。 <!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" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>CSS HEIGHT 100% SAMPLE</title> <meta http-equiv="content-style-type" content="text/css" /> <style type="text/css"> *{ margin: 0; padding: 0; } html,body { height: 100%; } body { font-size: 100%; line-height: 160%; font-family: Arial,Helvetica,sans-serif; color: #000; text-align: center; background: #cccccc; } #container { margin: 0 auto; width: 800px; height: 100%; min-height: 100%; text-align: left; background: #fff; } body > #container { height: auto; } .half{ margin:0 auto; min-height:50%; height:50%; width:800px; } #container > .half { height: auto; } </style> </head> <body> <div id="container"> <div class="half"> <div> 上のコンテンツ。固定にしたい </div> </div> <div class="half"> <div style="overflow:scroll"> 下のコンテンツ。スクロールさせたい </div> </div> </div><!--/#container--> </body> </html>
- ベストアンサー
- CSS
- width 100% で縦に３段のレイアウト
上から top, middle, bottom の３つの段があって、 横に１００％伸びるものを作ろうとしてます。 middle の中には width=700 で center 寄せの middle_inside があり、 さらにその中に section1 と section2 があります。 ややこしくて申し訳ないのですが、以下のようなコードでして グレーと黄色の背景を うまく表示させる方法ありますでしょうか？ IE6 では希望通りに表示されるのですが Firefox 2.0 では背景が真っ白になってしまいます。 <!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>[ css ]</title> <style type="text/css"> <!-- * { margin: 0; padding: 0; font-family: "Times New Roman", Times, serif; font-size: 24px; } #top { height: 100px; margin: 0 auto; background: blue; } #middle { margin: 0 auto; background: yellow; } #middle_inside { width: 700px; margin: 0 auto; background: gray; } #bottom { height: 100px; margin: 0 auto; background: red; clear: both; } #section01 { float: left; background: green; width: 300px; } #section02 { float: left; background: brown; width: 300px; } --> </style> </head> <body> <div id="top">top</div> <div id="middle"> <div id="middle_inside"> middle_inside <div id="section01"> section01<br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="section02"> section02<br><br><br><br><br><br><br><br><br><br><br><br> </div> </div><!-- #middle_inside --> </div><!-- #middle --> <div id="bottom">bottom</div> </body></html>
- ベストアンサー
- CSS
- HTMLで○や■などをテキストの代用とした時
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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } .container { width: 960px; text-align: center; background-color: #FFF; margin: 0 auto; } .header { background-color: #ADB96E; } .content { text-align: left; padding: 10px 0; } .footer { padding: 10px 0; background-color: #CCC49F; } --> </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
- Operaでズレない方法をご指導下さい
IE6、firefox1.5ではズレないのですが、 Opera9.1.0では <div id="main">テキスト</div> の箇所が左に1pxズレてしまします。 ブラウザの横幅を大きくしたら小さくしたりすると、 ズレない場合もあるのですが、最大にすると1pxだけズレます。 ズレない良い方法がありましたら、どうか教えて下さい。 <!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> <style type="text/css"> <!-- body { background-image: url(bg.jpg); background-repeat: repeat-y; background-position: center top; margin: 0; } #main { background-color: #00FFCC; width: 700px; margin:0 auto; } --> </style> </head> <body> <div id="main">テキスト</div> </body> </html>
- 締切済み
- HTML
お礼
おっしゃる通り \n が入ってました！！ 一時間ぐらい さまよってたんですが助かりました！ ありがとうございます！