http://jsdo.it/kanonji/1Hm4 こんな感じで、縦横100pxの正方形を、縦横10px空けながらinline-blockで配置したい場合のcssです。ネガティブマージンを使うんですが、ちょっと注意点もあったので、やり方とその注意点をメモしておきます。 やり方 <h2>Target</h2> <div id="target"> <ul> <li></li ><li></li ><li></li ><li></li ><li></li ><li></li ><li></li ><li></li ><li></li> </ul> </div>…

display: inline-block;は便利だけど、無対策でHTMLをマークアップすると意図しない隙間が開いちゃいます。それを避けるためにHTML上に改行を含めずマークアップするんですが、JavaScriptで解決する方法も有りかもしれないと思いました。きょうびJavaScript…

img要素をブロック要素でラップした際の隙間を無くす http://jsdo.it/kanonji/4rxU <div> <img src="http://a0.twimg.com/profile_images/40688552/005_bigger.jpg" alt="example"> </div> レイアウトやデザインの都合で、こんな風にimg要素をdivでラップすると、謎の隙間が出てきます。 div img{vertical-align:bottom;} これはimg要素がデフォルトでは verti…

タイトル通りですが、expression()関数を使うには下記の様にhtml内に記述しなければならないようです。 外部cssに記述してて、間違っていないはずなのに動作せず、ずっと悩んでました。 この例だと、IE6とそれ以下のバージョンに対して、id="container" な要…

ファイルアップロードのinput要素の横幅の扱いが、各ブラウザで異なるようなので、まずは比べてみました。 概要 input要素は下記の4種類を比べてみました。 size属性もwidthも無し。 size="30" width:300px; size="30" と width:300px; あ、size="30"とwidth…

background-image:none; とても単純ですが、こう書きます。 勘違いしてた方法 background-image:url(); どこかで、これでも可能という話を知って、使っていましたが、意図した通り背景画像を消してくれないブラウザがありました。 全然検証はしてませんが、M…