• 締切済み

ブラウザの問題でしょうか?(スタイルシート編集)

カテを変えて、再度質問させて頂きます。 説明等解かりにくい点がありましたらお許し下さい。 現在Netscape7.1(?・・・多分)で、"teacup"blogのスタイルシートを編集しているのですが、 画像の位置が思った所に表示されません。 【width: 780px; height : 200px;】・・・の範囲に画像を横方向にリピートさせ、 上下の位置を任意、またはbottomで使用したいのですが、 指定をしてもプレビューではtopに表示されてしまいます。 (以下の様に指定してみたのですが・・・)  background-image: url(~/×××.gif);  background-position : bottom;  background-repeat: repeat-x; しかし、IE6.0(?・・・多分)でプレビューさせてみると、きちんと指定した位置になっています。 以前記事本文を書く領域の指定で、NetscapsとIEの差が出て失敗した事があるので、 両者のブラウザーには違いがある事は承知しています。 そこで質問なのですが、 1)Netscapeでは画像の細かい位置指定は、表示出来ないのでしょうか? また、この件とは別件なのですが、 2)【width: 780px; height : 200px;】と言う範囲の中で、  background-image: url(~/×××.gif);  background-repeat: repeat-x;  ・・・と言うライン状の物を上下に配置させる事は出来るのでしょうか?  (画像の高さとしては範囲内に充分入る大きさです) 2)の件に関しては、色々と知恵を絞って指定したみたのですが出来ず、 背景にこのライン状の物を任意で位置指定をして、範囲内上部辺りに固定、 もう1本を上記の範囲内のbottomに固定・・・として、 範囲内の上下に配置されているように見せてみたのですが・・・。 (コレもIEでのみプレビュー成功でした) 初心者用サイトも見て回ったのですが、どう応用すれば解決できるのか解かりません。 ご回答頂けると助かります、よろしくお願いします。

noname#20545
noname#20545

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

ネスケはよくわかりませんが、 background-attachment:fixed; してもだめでしょうか?

noname#20545
質問者

お礼

ご回答ありがとうございます。 試してみましたが・・・変化無しでした・・・。 やはりネスケがガンなのでしょうか・・・(苦笑)

noname#20545
質問者

補足

色々サイトを回り、「コレかも?」と言う方法が見つかったのですが、 ネスケでは正常に反映されていないのか、指示されている様な画面が写りません。 ブラウザーとスタイルシートの対応表等見た所に寄れば、 やはり"ネスケの動作環境は不安定な場合がある"との事でした。 一定期間待ちましたが、ご回答頂ける方が出てきそうにありませんので、 締め切らせて頂く事にしました。 ありがとうございました。

関連するQ&A

  • スタイルシートは難しい、、、

    テーブルデザインよりスタイルシートに挑戦しているものです。 素人なりに下記のソースを作成してみたのですがもっとスマートなソースはどのようなものになりますか? 作りたいものは三枚の画像を使い上部、中部、下部で 一つのわくのなかに文字(この場合h1、h2、p要素)を表示させたいです。しかしこの場合、それぞれの要素にマージンを指定しないと画像の先端と重なってしまいます。divに空きを指定すると背景画像で指定した中部がずれてしまいました、、、 <div class="test"> <img src="top.gif" height="30" width="500" alt=""><BR> <h1>あいうえお</h1> <h2>あいうえお</h2> <h3>あいうえお</h3> <p>あいうえお</p> <p>あいうえお</p> <img src="bottom.gif" height="30" width="500" alt=""></div> .test { width:500px; background-image: url(middle.gif); background-repeat:repeat-y; }

  • ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。

    ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。 http://www.asahi-home.info/test/asahi-home/index2.html でページ上部「ホーム」「会社情報」「住宅情報」などがあるメニューの部分です。 これが、ブラウザによっては青い画像の下に隠れてしまうようです。 当方PCでIE6、IE7、FireFox2.0、Safari(バージョン不明)で確認したところ問題なく表示されます。 クライアント様からこの部分の表示崩れがおきているとのクレームがありました。(クライアント様のブラウザ不明) その部分のCSSは以下のようになっています。 アドバイス宜しくお願いいたします。 /* ナビ*/ #navi { text-align: left; } #navi li { float: left; } #navi li a{ display: block; text-indent: -9999px; } #navi li#menu01 a{ background: url("../image/navi01.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu02 a{ background: url("../image/navi02.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu03 a{ background: url("../image/navi03.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu04 a{ background: url("../image/navi04.gif") no-repeat; width: 119px; height: 40px; } #navi li#menu05 a{ background: url("../image/navi05.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu06 a{ background: url("../image/navi06.gif") no-repeat; width: 103px; height: 40px; } #navi ul li.active a { background-position: 0 -40px absolute !important; } #navi ul li a:hover { background-position: 0 -40px absolute !important; text-decoration: none; } /* メインイメージ(青の画像部分)*/ #bgmainImage { clear: both; margin: 0 auto; height: 200px; background: url("../image/main_image_bg.gif") no-repeat center bottom; } .mainImage { margin: 0 auto; width: 800px; } /* メイン コンテンツ部分*/ #bgmain { margin: 0 auto; background-color: #fff; } #main { margin: 0 auto; width: 800px; padding: 8px 0 0 0; } #main h3 { clear: both; margin: 15px 0 0 0; }

  • IE6だとpaddingで指定したぶんだけ消えてしまう。。。

    いま、CSSでサイトつくっているのですが、IE6だけpaddingで指定した分だけ、画像(背景)が足りません。 <h2>と<p>をくっつけて一枚の背景画像を作ろうとしています。 解決するには宣言を変えるか、CSSハック?をする、もしは<div>を入れ子するしかないのでしょうか? また、<div>を入れ子にするのはよくないと教えていただいたのですが、どれくらいまでが許容範囲でしょうか? いつもwrapperで囲っているので、大枠のレイアウトを作るだけでもすでに1つ入れ子状態なんですが・・・ <h2>あああああああああああああああああ</h2> <p>あああああああああああああああ </p> .h2 { background-image: url(img/flow6_01.gif); height: 37px; width: 650px; text-indent: -9999px; float: left; margin-bottom: 0px; } #p { width: 625px; height: 120px; float: right; background-image: url(img/flow1_02.gif); margin: 0px; margin-bottom: 10px; background-repeat: no-repeat; padding-left: 25px; }

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

    今、ホームページビルダーで簡単な2カラム(右メニュー)のテンプレートを作っています。 質問ですが、メニューバー(サイドバー)に色を付けたくて、画像を使う事にしました。 <div class="main">に画像(background.gif)を入れ属性で繰り返す(垂直方向)にチェックをいれたのですが、IEやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか? よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここに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; }

  • スタイルシートの・・・

    スタイルシートをなんとか改変して、画像をランダム表示するように したいのですが自分では知識不足でできません>< どう改変すればできるのか、どなたかお願いします。 /* トップ画像指定(アドレス、と画像の縦幅横幅も指定) */ #head { width:200px;/*横幅*/ height:150px;/*縦幅*/ margin:0px 1px; background:url(../img/画像データ.PNG) no-repeat center center;/* 画像アドレス */ border:1px solid #333333;/* 画像周りのライン */ }

  • CSSで3分割した背景画像を配置したいけど隙間が出来てしまう?

    初めて質問させていただきます。 当方はCSS初心者です。 画像(グラデーションのある角丸四角枠)を3分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。

  • FC2ブログのスタイルシート編集について教えて下さい。

    FC2ブログのスタイルシート編集について教えて下さい。 ブログ画面上方中央に他URL上の画像を表示したいのですが上手く表示できません。 プレビューで確認した時は上手く表示されているのですが「更新」すると表示されていません。 /*****ヘッダ-------------------------------------------------------------------------------------------*/ div#header { width: 800px; height : 135px; background-color:#fafafa; font-size:90%; background : url(http://省略.JPG) no-repeat center top } 宜しくお願いします。

  • 外部スタイルシートは同じなのですが…

    こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記/// <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div>  ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス/設備</h2> ○○○徒歩3分<br /> 駐車場2台(バリアフリー)<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright &copy; 2007 All Rights Reserved</div> </div> </body> CSSは下記/// * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか? リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSでIE6だけ出る隙間をなくしたい

    お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 背景画像を二つ指定

    こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか? 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }

    • ベストアンサー
    • HTML