Entry: main  << >>
width padding 同時指定する時の対策
スタイルシートで、width属性、margin属性、padding属性を同時に指定すると、widthで指定した幅が、ブラウザによって解釈が違うので、レイアウトが崩れます。

Win IE …Widthの幅の外側にmargin、内側にpaddingがとられる。
→widthを600pxにしたら実際のハコの幅も600px。
それ以外 …WidthはPaddingを含まない。
→widthを600px、paddingを10pxにしたら実際のハコの幅は620pxに。

説明が適当すぎるかもしれませんが、こんな感じです。

このズレを回避するために、

#middle{
padding: 0px 20px;
width: 780px;  //作りたい囲いの幅
voice-family: "¥"}¥"";
voice-family:inherit;
width:740px;
}
html>body #middle {
width: 740px; //作りたい囲いの幅-左右のpaddingを引いた値
}

(参考元:下記)

これで何とかなりました。(実験済み)

参考サイトは→http://jugem.jp/fun/css_template01.php
このハックの解説もここに書かれています。
11:25 | comments(0) | trackbacks(0) | - | -
Comment








Trackback

Calendar

    123
45678910
11121314151617
18192021222324
252627282930 
<< June 2017 >>

Recommend

Search

Entry

Comment

  • リンク元のページに戻るボタン(PHP)
    Tadashi (03/13)
  • サイト全体をメンテナンスページに切り替える単純な方法
    yo5kg (06/06)
  • 再配布不可識別子の入れ方
    jumbo (04/25)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    ぐみ (12/11)
  • 再配布不可識別子の入れ方
    eguti (06/04)
  • ナビゲーションをul、liで作成する時
    ビジログ (03/09)
  • 再配布不可識別子の入れ方
    nana (02/02)
  • 再配布不可識別子の入れ方
    TOM (01/22)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    pon (11/09)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    pon (11/09)

Archives

Category

Link

Feed

Others

無料ブログ作成サービス JUGEM

Mobile

qrcode