スタイルシートのpaddingについて
- スタイルシートのpaddingを使用して写真の周りに枠を作る方法について説明します。
- macのIE ver5とwindowsのIE ver6でpaddingの挙動が異なる問題が発生しています。
- 解決策を見つけるために、paddingに関する他の設定やブラウザのバージョンについても確認してください。
- ベストアンサー
スタイルシートのpaddingが。。。
.photo{ background-color:#FAFAF3; padding: 10px 5px 25px 5px; border: 2px outset #C0C0C0; } $imgsrc = "<img src=".SOON_ICON." hspace=20 class=photo>"; 上記のスタイルを使用して写真の周りに枠を作って ポラロイド風にwebで表示しています。 ところが、macのIE ver5ではうまくpaddingされているのですが、windowsのIE ver6ではpaddingされず、画像にぴったりと枠がはりついてひょうじされています。 どうすればうまくpaddingされるでしょうか？
- hand_painted_art
- お礼率0% (0/12)
- その他（プログラミング・開発）
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
補足です。＃１さんの仰る「標準モード」に切り替えるには、html4以降のDOCTYPE宣言を入れるか、xhtmlで記述するかの方法があります。 ↓html4.01 フレーム利用時 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> ↓html4.01 フレーム非利用時 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
その他の回答 (3)
- sion_fs
- ベストアンサー率36% (152/416)
補足の補足です（涙） ＃１さん＆＃３で説明した「標準モード」は、ＩＥ６以降でしか機能しません。 Windows版 ＩＥ5.5以前では、やはり問題は残ったままとなります^^;
- sion_fs
- ベストアンサー率36% (152/416)
.photo { margin: 0px; padding: 10px 5px 25px; background-color:#FAFAF3; border: 2px outset #C0C0C0; } $imgsrc=qq| <table border="0" cellpadding="0" cellspacing="0"><tr> <td width="20"></td> <td class="photo"><img src=".SOON_ICON."></td> <td width="20"></td><td></td> </tr></table> |; と言う様にすれば、ＷｉｎＩＥを始め殆どのブラウザで対応出来ると思います。 画像ごとにテーブルを用意するのがあまりスマートでは有りませんが、これ以外の方法となるとブラウザ毎にＣＳＳを切り替える位しか思いつきませんでした^^;
補足
お答えありがとうございます。 ブラウザ毎にCSSを切り替えるということですが、 現在paddingができ要されていないIE 6では、 どのようにCSSを定義するべきでしょうか？
- UKY
- ベストアンサー率50% (604/1207)
> windowsのIE ver6ではpaddingされず 互換モードで表示されているように思われます。標準準拠モードなら正しく padding が適用されるようです。
補足
互換モードと標準準拠モードがあるとは知りませんでした。 互換モードと標準準拠モードはどのようにして切り替えるのでしょうか？
関連するQ&A
- margin,paddingなどで困ったことがあります。
現在、HPを作っています。 そこで相談なのですが、FirefoxやOpera、IE8、IE8のIE7互換モードなどで表示の違いがありました。 その部分のソースはこちらです <div class="menu"> <span><h4>Link</h4></span> <p><a href="javascript:void(0)">リンク1</a></p> <p><a href="javascript:void(0)">リンク2</a></p> </div> そしてCSSのソース（一部）です。 div.menu{ font-size: 10pt; color: #000000; font-weight: bold; margin: 3px; padding: 4px; border: 4px groove #000000; width: 178px; background-color: #eeeeee; } div.menu span{ display: block; text-align: center; } div.menu h4{ color: #000000; font-size: 26px; padding-bottom: 10px; padding-top: 10px; } このCSSのソースのどこを修正すれば、正しい表示になるでしょうか？ 表示は送付画像のような表示です。
- 締切済み
- HTML
- cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- スタイルシート教えて下さい
ブログのトップページの一番上の部分を 自分の作った画像に変えました。 それはうまくいったのですが、 その部分にブログサイト名と説明文が入るのですが、 自分の画像を貼り付ける前までは一番左にあった文字が 今は真ん中に表示されてしまうんです。 ブログ名（リンクつき）とブログの説明文を左に表示させるには どうしたらいいのか教えて下さい。 その部分のスタイルシートです↓ #banner{ background-image:url(http://△△△△/○○○/□□□.jpg); background-repeat:no-repeat; background-position:left top; font-family:arial, Helvetica; padding:0px 0px 0px 197px; height:197px; text-align:left; margin-left:13px; }
- 締切済み
- ブログ
- スタイルシートに関して
最近、スタイルシートの勉強を始めました。 下記の様なCSS,HTMLを作成しブラウザーで表示するとIEは意図通りに IE以外(FireFox,Opera等)ではIEと違う（意図と異なる）表示になり 悩んでいます。 表示したい内容 黒いベース(300px,300px)の上に紫の四角(200px,200px)、さらにその上に緑の四角(100px,100px)を配置したい。 配置は、ブラウザーの左上隅より中心を上から150px,左から150pxとし３つ共に中心を合わせる。 IEでは、意図通りに表示 IE以外では、上にスペースが空き、各boxの表示位置が上にずれている CSS .box0 { width:300px; height:300px; background-color:#000000; } .box1 { margin-top:50px; margin-left:50px; width:200px; height:200px; background-color:#ff00ff; } .box2 { margin-top:50px; margin-left:50px; width:100px; height:100px; background-color:#00ff00; } HTML <BODY> <div class="box0"> <div class="box1"> <div class="box2"> </div> </div> </div> </body> ＊内容が悪いよとかCSSではできないよなどご意見・アドバイス頂ければ幸いです。
- ベストアンサー
- 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; }
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートで、マージン０に出来ません
夜分に失礼します。 個人の趣味のホームページですが ブラウザ上部と左部のマージンを０に出来ずに困っています。 スタイルシートで、margin 0;としても、マージン０にならないのに BODY句に直打ちすると、マージン０になるので、もう、ワケが分かりません。 ご参考までに、ソースを記します。 また、ブラウザはIE6です。 どうぞ、宜しくお願いします。 <HTML> <HEAD> 中略 <STYLE type=text/css> BODY_i{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: "ＭＳ ゴシック","Osaka－等幅",monospace; font-size:12pt; color:#696969; line-height:150%;} .photo1{width:982px; height:730px; background-color:#DCDCDC; border-style:solid ridge ridge solid; border-width:1px 2px 2px 2px; border-color:#DCDCDC #DCDCDC #DCDCDC #DCDCDC; text-align:center; vertical-align:middle; padding:11px 11px 11px 11px;} </STYLE> </HEAD> <BODY class=BODY_i> <!-- <BODY topmargin=0 leftmargin=0> --> <P class=photo1> <IMG SRC="test_CIMG6224.JPG"> </P> </BODY> </HTML>
- 締切済み
- その他（インターネット・Webサービス）
- Firefox と IE での padding の認識の違いについて
CSS にて padding の記述をしているのですが、IE と Firefox で padding の認識の仕方が違い困っております。 例えば、幅100px の枠に左右の padding を 10px 指定した場合、幅100px の内に 10px の padding を取るのが IE であり、幅100px の外側に改めて padding 10px 取る（最終的に幅が120pxになる）のが Firefox であるようにです。 CSS例 #header { float: left; padding: 0 20; width: 100; height: 20; text-align: right; } このIE と Firefox の違いを解決する方法をご存知の方いらっしゃれば教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートのfloatでセンタリングしたい
書籍でfloatを使用したリンクボタンの作り方が下のように紹介されていました。 ３つ並べるボタンの作り方なのですが、これだと左寄せになってしまうため、３つとも並べたまま中央に配置したいのです。 align="center"や<center>では、配置できず、paddingを使えば左があくもののpx指定のため常にセンタリングになりません。 この書籍では左寄せのままで中央へ配置する方法が書かれていないので、みなさんにお教えいただきたいです。 よろしくお願いします。 (IE6.0使用） <body>内 <A href="test001.html">test001</A> <A href="test002.html">test002</A> <A href="test003.html">test003</A> <style type="text/css">内 a{ border:outset #00ffff 4px; background-color:#8fa7ef; color:#ffffff; padding:0.5em; display:block; width:5em; float:left; } a:hover{ border:inset #ccffff 4px; }
- ベストアンサー
- HTML
- Firefoxでpaddingが反映されません。
現在WEBサイトを作っているのですが、IEとFirefoxで確認を行ってみたところ、IEでは正しく表示されるのですがFirefoxだとうまく表示されません。 paddingの指定なんですが、Firefoxだけうまく寄ってくれません、何がいけないのでしょうか（T_T） CSS部分は以下のようになります。 .menu { color: #000000; padding : 5px 0px 0px 30px; font-size : 14px; text-align: left; font-weight: bold; text-transform: uppercase; letter-spacing: .3em; } 問題はpaddingの30pxというところで、左側から30px離したいのですが、全く変わりません。 分かる方いましたら、アドバイス宜しくお願いいたします。
- ベストアンサー
- HTML
- 外部スタイルシートが読み込めない
こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。
- ベストアンサー
- HTML
補足
フレーム利用時と非利用時、どちらが標準モードなのでしょうか？ また、この定義はhead or bodyのどちらに記述するのでしょうか？