floatさせたBOXが親BOXからはみ出すのを回避する裏技のIE7対策

【floatさせたボックスが親ボックスからはみ出すのを回避する裏技のIE7対策】を見つけました。

まだつまずいたわけではないけどメモメモ。

IF7ではafter擬似要素には対応していないためIEにのみ適用させるための裏技であったスターハック（セレクタの前に「* html」を追加する記述）がIE7では無視されてしまうらしい、

そこで、IE7での解決方法を探していたところ、親ボックスに「min-height: 1%;」のスタイルを設定すればいいらしいので以下引用。

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

「min-height」はIE6までは非対応のプロパティ
IE6とIE7で別の対応をしないといけなくなると
さらに複雑化しちゃうな～
こまったこまった

続きを読む "floatさせたBOXが親BOXからはみ出すのを回避する裏技のIE7対策"

Niceform

配布されているJavascriptのファイルとCSSファイルを読み込むだけでフォームがかっこよくなる。
配布サイト

Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web.

You basically know a web form when you see one as they always look the same and they’ve kept this look over the years. Try as hard as you might but web forms can only change their appearance so much. Some may argue that this is a good usability feature and I tend to agree but there comes a time when you just need to style web forms so they look different. How do you do that? How to transform something that looks like this:

▼組み込み例
<script language="javascript" type="text/javascript" src="niceforms.js"></script> <style type="text/css" media="screen">@import url(niceforms-default.css);</style>
<div id="stylesheetTest"></div>
を入れないと動作しないようです。

続きを読む "Niceform"