質問文の入力 質問タイプ選択 質問設定 パスワードの確認 質問内容の確認 質問登録完了 質問タイプを選択

こんにちはCSSについてご指導ください!当ブログの表示に関してなのですが、IE6の場合記事エリアが右に寄ってしまいます。
IE7、firefox、opera、sleipnirでは正常に表示されました。

回答の条件
  • 1人2回まで
  • 登録:2008/03/18 11:43:46
  • 終了:2008/03/18 14:10:21

回答(4件)

id:blueberrystream No.1

KID the Euforia回答回数34ベストアンサー獲得回数52008/03/18 12:01:59

ポイント23pt

CSSを拝見いたしました。

CSS中に行頭全角スペースが含まれていました。まず、CSSを正常に解釈できるように行頭の全角スペースは削除してください。

また、paddingについてですが、まとめ指定だと正常に解釈できない場合があるようなので

padding-top, padding-bottom, padding-left, padding-rightで個別に指定するようにしてみてください。

id:noobplus

ご回答有り難うございます。

全角スペースを削除し、paddingをご指摘どおりに変更致しましたがやはりうまくいきませんでした。

2008/03/18 13:25:03
id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332008/03/18 12:13:17

ポイント23pt

当該ブログのソースを見たのですが、ご自身でCSSを設定していますか?

h1, div の width 指定が、画面幅を超えているのではないでしょうか。

id:noobplus

CSSはテンプレート"hatena"を自分で改変しています。

h1のwidthを1000にしてみましたがダメみたいでした、ご回答有り難うございました!

2008/03/18 12:49:01
id:watch00 No.3

watch00回答回数112ベストアンサー獲得回数02008/03/18 12:37:11

ポイント22pt

position: relative;

margin: 0;

position: absolute;

top: 40px;

left: 250px;

こんな感じで、力ずくで位置指定したらよいと思いますよ。

id:noobplus

やってみましたがうまくいきませんでした、ご回答有り難うございます!

2008/03/18 12:47:04
id:gonsakumokaan No.4

gonsakumokaan回答回数9ベストアンサー獲得回数02008/03/18 13:44:04

ポイント22pt

CSSを拝見させていただきました。

お力になれるかわかりませんが

div.hatena-body{

margin-top: 0px;

margin-right: auto;

margin-left: auto;

margin-bottom: 0px;

width:お好みの幅px;

}

この表記に変えることで直るといいのですが・・・。

id:noobplus

ご回答有り難うございます

当方IE6を使用できる環境がありませんので、整い次第試したいとおもいます!

2008/03/18 14:09:49
  • id:noobplus
    こちらがIE6での表示です http://f.hatena.ne.jp/images/fotolife/n/noobplus/20080318/20080318112036.jpg
    こちらがIE7での表示になります http://f.hatena.ne.jp/images/fotolife/n/noobplus/20080318/20080318112032.jpg
    CSSで設定しているソースです http://www2.uploda.org/uporg1312076.txt
    よろしくお願いします
  • id:godric
    まず最初に一応@charset "shift-jis";
    sjisとでも入れておいて、
    次に全体を初期化するコードを入れて、
    * {
    margin: 0;
    padding: 0;
    font-family: ●, ●, ●;
    font-size: ●;
    line-height: ●;
    }などなど

    次に、
    /*
    ----- リンク -----
    */

    a {
    color: #●;
    text-decoration: ●;
    background: #●;
    }

    a img {

    }

    a:hover {
    color: #006699;
    text-decoration: underline;
    background: #FFF;
    }

    などで前提しといてから、


    bodyタグはシンプルに。
    backgroundなどを規定しておいて、
    margin: 0 auto;
    はボディタグに入れても不要なので、


    body以下の最大外枠のdivに入れて、
    センタリングしたほうがいいかと。
  • id:noobplus
    ご回答有り難うございます
    少し難しくて完全に理解できてないかもしれないですが
    CSS先頭に@charset "shift-jis";を加えて
    bodyのwidthを1002にして広げましたがやはりダメでした
    margin: 0 auto;をはずすとfirefoxでページ全体が左に寄ってしまいました
  • id:godric
    charsetはとりあえず、htmlシートの方のcharsetに合わします。
    Shift_JISではなくてECU-JPかもしれませんし、UTF-8かもしれません。
    どの文字変換かです。

    bodyのwitdhは要りません。外しましょう。

    margin: 0 auto;は、
    これがあるボックス(divとか)自体を、縦はそのまま、左右はセンタリングする、
    というものです。

    bodyはそのままにして、中のコンテンツ大外枠のボックスにmargin: 0 auto;
    をしてセンタリングして、その他の全てはその大外ボックスの中に入れてしまえば
    どうでしょう。
  • id:noobplus
    詳しく有り難うございます!
    IE6を使用できる環境を整えてる所ですので、整い次第ご指摘どおりにやってみたいと思います
    有り難うございました
  • id:noobplus
    div.hatena-body{

    margin-top: 0px;

    margin-right: auto;

    margin-left: auto;

    margin-bottom: 0px;

    width:お好みの幅px;

    }

    これを挿入したところ直りました
    遅くなりましたが、皆さん有り難うございました!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません