• 締切済み

コンテンツが下にずれます（CSS)。

CSSを使って、ある人のためにウェブサイトを作成しました。私のコンピューター（自宅、実家、職場）と彼女のコンピューターでは正しく表示されていました。 ところが、彼女がいろんな友達にリンクを送ったところ、一人の人からコンテンツがかなり下にずれてしまっているとの報告があったそうです。バックグランドなどは、正しく表示されているみたいなのですが、ページをスクロールダウンしないと見れないそうです。私の友達にもチェックしてもらい、合計でかなりの人数の人が、何の問題もなかったと言っていたので一旦は1人くらいいいや、と思っていたのですが、先日、別の人から同じくコンテンツが下にずれているという報告がありました。 ずれている人2人は両方とも、IEをつかっていてOSはVistaだそうです。ただ、私のコンピューターや友達の多くもその組み合わせなので、IEのバージョンが古いと正しく表示されないのかなと思っていますが、どう思いますか？それとも他に何か理由がありますか？ もし教えてくださる方がいらっしゃいましたら、感謝いたします。 よろしくお願いいたします！

みんなの回答

noname#101770
noname#101770
回答No.1

IEはバージョンによって表示が変わります http://itpro.nikkeibp.co.jp/article/NEWS/20080124/291904/

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • 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
  • ヘッダとフッタが固定でコンテンツのみスクロール可能

    いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。

    • 締切済み
    • CSS
  • CSSで背景を下までのばすには？

    左側にコンテンツ、右側に本文がきているようなレイアウトで、 両方とも背景色があります。 コンテンツは5行くらいしかないのですが、本文はもちろん何十行もあります。 本文側は問題なく下まで背景色がくるのですが、コンテンツ側の背景色だけが途中で途切れます。 height:100%にしてもheight:autoにしてもだめなんです。 このサイトに解決法があったのですが、IEではだめでした。 http://gyauza.egoism.jp/clip/archives/2007/05/070509-background-clip/ ちなみにこのサイトの「下まで背景伸びたHTML完成サンプル」でも IEは下まで背景がきません。当方Macなのですがそのせいでしょうか？ WinのIEで正確に見えているなら、Macでは狂っても構わないのですが、 確かめようがないので困っています。 もしくは他に背景色を下までくるようにする方法がありましたらご教授ください。

    • ベストアンサー
    • HTML
  • コンテンツにあわせて伸縮する背景　CSS

    http://www.fisco.co.jp/index.html 上記のサイトのように、ヘッダーのリンクボタンの横の左右に伸びるラインと、 フッターの左右に伸びるラインのような背景にしたいと思っています。 その時上記サイトは背景が白ですが、私は上から下にかけてグラデーションにしたいと考えています。 最初縦長で上から下のグラデーション画像を用意し、X方向にリピートしてみたのですが、 コンテンツの長さによっては文字や画像と重なってしまったり、 またはものすごく余白があいてしまったりしています。 CSSは以下のように設定したのですがうまくいきません。 body { background:url(../img/bg.jpg) repeat-x center top; line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; margin: 0; padding: 0; height:100%; } このような場合、コンテンツの長さがページごとに変わっても、 上下にコンテンツを挟む形でラインが表示される方法を教えてください。 説明がうまくできず申し訳ないのですが、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • HPのCSSについて

    超初心者です。へッダーの固定をしたページを作りたいのですが、フリーのCSSを使ってやってみたところ、背景の色、タイトルの文字の大きさ、現在センタリングになっているのを全体に表示したいのに、それが上手くいきません。以下、試してみたCSSなのですが、どこをどう変えれば、上記の変更が可能でしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSSでヘッダーを固定する 第４歩</title> <style type="text/css"> html { 　height:100%; } body { 　margin:0px; 　height:100%; } #body { 　width:700px; 　margin:0px auto; } #header { 　background:#ccffcc; 　height:100px; /*　width:100%;*/ 　width:700px; 　position:fixed; } #main { 　padding-top:100px; 　background:#ffff99; } #footer { 　background:#ffcc99; 　height:80px; } </style> <!--[if IE 6]> <link rel="stylesheet" href="./fixheader_ie6.css" type="text/css" /> <![endif]--> </head> <body> <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> コンテンツ1<br /> コンテンツ2<br /> コンテンツ3<br /> コンテンツ4<br /> コンテンツ5<br /> コンテンツ6<br /> コンテンツ7<br /> コンテンツ8<br /> コンテンツ9<br /> コンテンツ10<br /> コンテンツ11<br /> コンテンツ12<br /> コンテンツ13<br /> コンテンツ14<br /> コンテンツ15<br /> コンテンツ16<br /> コンテンツ17<br /> コンテンツ18<br /> コンテンツ19<br /> コンテンツ20<br /> コンテンツ21<br /> コンテンツ22<br /> コンテンツ23<br /> コンテンツ24<br /> コンテンツ25<br /> コンテンツ26<br /> コンテンツ27<br /> コンテンツ28<br /> コンテンツ29<br /> コンテンツ30<br /> コンテンツ31<br /> </div> <div id="footer"> フッター </div> </div> </body> </html>

  • CSSで背景色を下まで表示させたい

    左がメニュー、右がメインコンテンツになるサイトを作っています。 左右のボックスの背景色を下まで伸ばしたいのですが、 いろいろなサイトを見て回って、その通りに指定しているはずなのですが、 うまく行きません。 #layoutの中に#sidebarと#mainを入れ子にしてあります。 #layoutの背景色（完成後は背景色はなしにする予定）は下まで表示されますが、 #sidebarと#mainの背景色が下まで表示されません。 また、ブラウザの縦幅をすごく短くしてスクロールした時に、 #layoutの背景色がその縦幅より下は表示されなくなってしまいます。 今まではテーブルで作っていて、CSSとXHTMLを使うのは初めてです。 以下にソースを置いておきますので、ご回答よろしくお願いします。 <?xml version="1.0" encoding="shift_jis"?> <!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> <title>背景画像を下まで表示したい</title> <style type="text/css"> *{ margin:0;padding:0; } html{ height:100%; } body{ margin: 0px; padding: 0px; height:100%; background-color:#DDDDDD; text-align:center; font-size: 11px; line-height:18px; font-family: sans-serif; color: #000000; } /*レイアウト指定*/ #layout{ margin: 0px auto; width: 960px; height:100%; min-height:100%; text-align:left; background-color:#000000; } body > #layout { height: auto; } #main{ float:right; margin:0px; padding:50px 34px 0px 34px; width:640px; height:100%; min-height:100%; background-color:#FFFFFF; } #sidebar{ float:left; margin:0px; padding:40px 30px 0px 0px; width:218px; height:100%; min-height:100%; background-color:#999999; } /*クリア*/ .clear { clear:both; } .clear hr { display:none; } /*罫線指定*/ .borderA { border-bottom:solid 1px #888888; margin-top:37px; margin-bottom:10px;} </style> </head> <body> <div id="layout"> <div id="main"> メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br /> <p class="borderA"></p> <p>Copyright(C) xxxxxxxxxxx. All Rights Reserved.</p> </div> <div id="sidebar"> メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br /> </div> </div> <div class="clear"><hr /></div> </body> </html>

  • XHTML+CSSレイアウト　ネスケ対応について

    WINのIE・ Firefox・Operaではできていますが Netscape 7.1だけクリアできない問題があるので、教えてください。 HTML内は大雑把に書くと以下のような構成になっています。 <コンテンツ大枠> 　<エリア左（CSS・float: left;）> 　　<ul> 　　　<li>メニュー</li> 　　　<li>メニュー</li> 　　</ul> 　</左エリア> 　<右エリア>・・・以下略。 </コンテンツ大枠> ※コンテンツ大枠には、ページの下部まで以下のように背景を指定しています。 background: #fff url('背景.gif') repeat-y left top; overflow: auto !important; overflow /**/: hidden; そうするとネスケだけ、コンテンツ大枠部分に 縦・横スクロールバーがついてしまいます。 スクロールバーがつく分のスペースがないので レイアウトは左エリア・右エリアが縦に並んでしまい 大きく崩れてしまいます。 スクロールが現れるのはoverflowのせいだと思いますが これを消すと背景が下まで表示されなくなります。 それから、不思議なのは 左エリアにリストタグを入れていますが、これを削除すると スクロールは消えますし、レイアウトも他ブラウザ同様キレイに収まります。 この現象に経験のある方いたら教えてください。 また私の記述が間違えていたら教えてください。

  • CSS初心者　コンテンツ高さに合わせたメニュー領域の背景色

    CSS初心者です。 Win IE6　環境で制作しています。 「メニュー」部分（右側）と「コンテンツ部分」（左側）とに分けて２段組で外部CSSでのページレイアウトに挑戦しているのですが、なんとかテーブルでのレイアウトを全部外して、形にはなったのですが、表題のようにコンテンツの高さに合わせて、メニュー領域の背景色を付けることが出来ません・・・。 CSSは .contents { width:770px; text-align:center; }　（全体のコンテンツ領域） .contents-left { width:550px; float: left; text-align:center; }　（←コンテンツ部分） .contents-right { width:200px; vertical-align:100%; }　(←メニュー部分） .footer { width:770px; text-align:center; clear: both; }　（フッター） とし、 メニューを囲んでいるDiv要素には .menu_box { background-image:url(img/menuback.gif) ; width:197px; vertical-align:100%; } としています。 いといろと試行錯誤していて「vertical-align:100%;」または「vertical-align:bottom;」などを付けてみましたが、ダメでした。 教えてください。よろしくお願いします。

    • ベストアンサー
    • CSS
  • 固定ナビがコンテンツの下になる

    自作ページを作成しており、ヘッダー部分で固定される固定ナビを設置しようとしています。試しに設置したのですが、スクロール時にページ内の画像などのコンテンツが固定ナビの下を通過せず上を通過してしまいます。 何か問題解決の手段はないでしょうか。 ・「position: relative」が原因と思われ、ナビの上を通過するコンテンツには大方これが使われています。（「position: relative」を消さないやり方をお願いします。） ・固定ナビには「Sticky Header CSS Transition（https://codepen.io/soulrider911/pen/dGuEn）」を使っています。 ・ナビの上を通過するのは、吹き出し（https://saruwakakun.com/html-css/reference/speech-bubble）を設定したものと、「shuffle.js」で作った画像の一覧、さらにキャプションエフェクト（https://www.nxworld.net/tips/css-only-caption-effect.html）です

    • ベストアンサー
    • CSS
  • CSSの崩れについて

    CSSにて横2段組のボックスを組んだところ、右側の内容がなぜか左側のボックスの下にも表示されてしまいます。 **html** <!-- out_wrap --> <div id="out_wrap"> <!-- inner_wrap --> <div id="inner_wrap"> <!-- left_Contents --> <div id="left_Contents"> <p>AAAA</p> </div><!-- /left_Contents --> <!-- right_Contents --> <div id="right_Contents"> <p>A</p> </div><!-- /right_Contents --> </div><!-- inner_wrap --> </div><!-- out_wrap --> **css** @charset 'Shift_JIS'; body{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; text-align : center; background : #333333; color:#4f4d45; } #out_wrap{ margin-left : auto; margin-right : auto; width : 980px; padding-top : 20px; background-color : #FFFFFF; } #inner_wrap{ margin-left : 10px; margin-right : 10px; width : 960px; } #left_Contents{ width : 650px; float : left; margin-right :10px ; line-height : 200%; text-align : left; background-color : #000000; } #right_Contents{ width : 300px; float : right; line-height : 200%; text-align : left; background-color : #999999; } ************************************************************* 右ボックスの A と打った文字が左側下にも表示されてしまいます。 marginの計算もあっていると思うのですが、しかもIE6でこのような現象です。Firefox最新版では大丈夫です。 よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する