Snipplr

(CSS) Definitive Web Font Stacks - Meander365

Sat, 05 Mar 2011 13:08:04 UTC

(CSS) CSS Format Links, Buttons and Submits To Be The Same Style (Cross Browser) - Meander365

Wed, 29 Sep 2010 08:36:11 UTC

This also use PIE.htc to force rounded corners in IE.

(CSS) CSS Font Shorthand - Meander365

Wed, 29 Sep 2010 06:02:47 UTC

(CSS) CSS Media Queries - Meander365

Fri, 24 Sep 2010 05:58:06 UTC

(CSS) Stop Text Wrapping Beneath A Floated Left Element - Meander365

Tue, 10 Aug 2010 14:34:52 UTC

In the example .description is a label and so needs to be made a block level element. For

elements (etc) this is not needed. The key to all this is overflow:hidden.

(CSS) Cross Browser Inline-Block Example - Meander365

Fri, 02 Apr 2010 17:09:39 UTC

Apply an inline-block to all browsers, including IE6 and IE7.

(CSS) Targeting IE Using Conditional Comments and Just One Stylesheet - Meander365

Tue, 11 Aug 2009 13:28:28 UTC

A wrapper may be made to enclose the content of a page, and then you can write descendant CSS rules that mention that wrapper's ID or class name in the selector. But what if only IE thought that wrapper existed? Then those rules would only work for IE, while other browsers would ignore the rules completely.

(CSS) Change Border Size on Hover Without Parent or Child Content "Jumping" - Meander365

Tue, 11 Aug 2009 13:16:15 UTC

Think this is a good one to remember. Let's say you have a set of list items and all of them have a border of 1px. Inside you have an image. When you hover over each list item you want the border to change thickness to 2px. The trick is to reduce the width and height of the list item so, when you add the thickness of the border to it - its still the same size. So:- Normal state: 84px + 2px border x 84px + 2px border= 86px x 86px Hover state: 82px + 4px border x 82px + 4px border = 86px x 86px Then to ensure the image inside the list item doesn't "jump", position it absolutely and use a negative margin.