squirrel_factory » css

IE6 and 7 whitespace bug

andy — Tue, 09 Sep 2008 09:02:52 +0000

IE 6 and IE7 often display whitespace underneath images and

tags (when all other browsers do not) . The best way to solve this is to add either or both of the css rules:

display:inline-block; display:block;

The alternative method is to remove all space between tags within your html document, however this makes the mark-up hard to read and edit!

CSS font shorthand

andy — Tue, 25 Mar 2008 12:03:27 +0000

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 140%;
font-family: Helvetica, sans-serif;

/* Combined into one shorthand rule */
font: italic small-caps bold 1em/140% Helvetica, sans-serif;

Lining up labels with radio/checkboxes

andy — Wed, 27 Feb 2008 11:20:36 +0000

I used to battle with trying to line up labels horizontally with radio or checkboxes…. it never looked the same in all browsers.

Solution:

HTML:

CSS:

ul.form-check{
padding: 0;
margin: 0;
}

ul.form-check li{
display: block;
list-style: none;
clear: both;
float: none;
height: auto;
overflow: auto;
background:#f2ffe4;
}

ul.form-check li input{
display: block;
float: left;
}

ul.form-check li label{
display: block;
margin-left: 0.4em;
margin-top: 0.1em;
float: left;
clear: right;
font-size:0.9em;
}

If you would like the list inline:

Option 1

Option 2

Option 3

ul.form-check-inline{
padding: 0;
margin: 0;
}

ul.form-check-inline li{
display: inline;
list-style: none;
float: none;
height: auto;
overflow: auto;
background:pink;
}

ul.form-check-inline li input{
display: block;
float: left;
}

ul.form-check-inline li label{
display: block;
margin:1px 10px 0 0;
float: left;
clear: right;
font-size:0.9em;
}

Styling an hr

andy — Mon, 25 Feb 2008 11:48:36 +0000

I have always had problems with the

and getting it to look equally spacedbut this seems to work well across all browsers.

hr{
color:#76a2d7;
background-color:#76a2d7;
height:1px;
border:none;
margin:0 0 10px 0;
}