/// BANGBOO BLOG ///

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

September 29, 2010

F☆ck CSS

■IEとFirefoxでのpaddingの違い////////////////////

hoge {
 width:100px;
 padding: 10px;
}

IEの場合→横幅は100pxとして認識しされる
Firefoxの場合→横幅は120px(左padding+右padding)として認識される
対策はpaddingを使わずmarginを使う or padding分をwidth,heightから引く
divを2重にし外側でwidthを指定し、内側でpaddingを指定する



■floatによる浮き上がり////////////////////
<div id="container">
 <div class="leftBox">内容</div>
 <div class="rightBox">内容</div>
</div>

#container {
    color: #000000;
    background-color: #cccccc;
    border: 2px solid #333333;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
}

#container:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

.leftBox {
    width: 45%;
    float: left;
    border: 2px solid #000000;
}

.rightBox {
    width: 45%;
    float: right;
    border: 2px solid #000000;
}

floatはボックスを"浮かせる"ので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなり色も抜けてしまう。

:afterにcontentを指定すると、ボックスの中の一番最後に新たなテキストや画像を挿入し外側のボックスが拡張されるようになる。clearfixの方法はたくさんあり他のやり方もチェック。



■Height100%のテーブル////////////////////
Height:100%の可変長テーブルをあきらめた
 →IEとFirefoxで挙動が違うので一つのcssで制御するのが面倒だったから
 →CSSを切り替えるできると思う

(理由)
高さ100%のテーブルは親要素も全てHeight:100%にする必要がある
タイトル高などhtml100%から高さを引きたいが上手く引けない
IEではブラウザサイズに対して100%となるので、ナビコンテンツが長い場合はコンテナ背景色が消える
Firefoxではコンテンツ高さに対して100%となるので、ナビコンテンツのコンテナ背景色が消える

twitter
Hatena
Google Buzz
newsing
Yahoo!
Buzzurl
Technorati
del.icio.us
Choix
Iza!
Livedoor Clip
Facebook
Evernote
 

Posted by funa : 01:07 AM | Web | Comment (0) | Trackback (0)


PhotoGallery


TWITTER
Search

Mobile
QR for cellphone  QR for smart phone
For mobile click here
For smart phone click here
Popular Page
#1Gadget
#2Web
#3Column
#4Hiace 200
#5Being The Ideal Boss
#6RSS Radio
#7Flavor
#8Optimost
#9ahe-ahe is goooood for your brain
#10Cache
#11Branding Excellent
#12Emancipation Proclamation
#13Sharpen up
#14The team that always wins
#15Norton Internet Security
#16Reader
#17Yupiteru
#18Plasticity
#19A Rainbow Between Clouds‏
#20Make your front wheel right
#21Penatrate
#22Re-install my OSXP
#23Online softwares
#24ZETA Pivot
#25Affiliate
#26Net Corruption
#27Darwinian Theory Of Evolution
#28F☆ck CSS
#29Automobile Inspection
#30Rope
#31PC SPEC 2011.10
#32Assertive Behavior
#33Europe
#34CSS Selectors
#35Fork OH
#36Positive
#37Estimation
#38SN
#39Sony PCG-U1
#40ITIL
#41Watch Out
#42Ora Ora Ora Ora Ora
#43PC SPEC 2007.7
#44Information privacy & antispam law
#45Tools - free icon etc
#46Bank transfer fee
#47Wifi security camera with solar panel & small battery
#48Contaminated
#49DSLR
#50I'm air-cocking
#51Google API
#52Contaminated
#53動画をキャプチャーする
#54Are you spy on me?
#55Who's BAT? (Batch file)
#56PC SPEC 2012.8
#57Win7 Insco
#58Fucking tire
#59Big D
#60Itinerary with a eurail pass
#61ICOCA
#62System designing
#63Shoot
#64ApacheBench
#65Spirits
#66/// BANGBOO BLOG /// On 2017-02-06
#67SN
#68The black sheep to the black ship
#69Ressentiment
#70Revolt against MT
#71Doing?
#72角印
#73It tests you
#74Card
#75通話SIM
#76☆od damnit
#77How to make a bomb - 爆弾の作り方
#78表情学-表情の基本は「確かさ」にある
#79Interview
#8020分
#81Significant Rule
#82/// BANGBOO BLOG /// From 2017-01-01 To 2017-01-31
#8311 Tips of Excel
#84Fail Safe & Fault Tolerance
#85Blog Ping
#86My mic
#87No ID
#88南無三
#89United States of O, USO
#90I want to ride my bicycle
#91Bike comparison
#92Windows env tips
#93BGM
#94Where Hiphop lives!!
#95Classic Font
#96/// BANGBOO BLOG /// From 2016-04-01 To 2016-04-30
#97Detected as bad site by virus company
#98Emancipation Proclamation
#99ライブ
#100英語単語帳SNS
Category
Recent Entry
Trackback
Comment
  • test
    SSL [17/10/20 9:48PM]
Archive
<     December 2017     >
Sun Mon Tue Wed Thi Fri Sat
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Link