Snipplr - jonhenshaw

(CSS) How To Style A Horizontal Rule With CSS (IE Friendly)

Wed, 06 Aug 2008 20:24:35 GMT

A good CSS example of how to style Horizontal Rule (HR) elements. It's also Internet Explorer (IE) friendly.

(CSS) CSS Page Break

Mon, 07 Apr 2008 14:06:49 GMT

auto Default. Insert a page break after the element if necessary always Insert a page break after the element avoid Avoid inserting a page break after the element left Insert page breaks after the element until it reaches a blank left page right Insert page breaks after the element until it reaches a blank right page

(CSS) CSS PNG Image Fix for IE

Thu, 08 Nov 2007 08:22:32 GMT

The selector portion of the CSS rule targets which XHTML tags/classes this rule will be applied to. At first glance, it looks like all img tags as well as all tags with a class of "png". You’ll notice the * html in front of both of these. Wait, there is no “anytag” preceding the html tag, so this won’t get applied! True. For all non-crappy (that is a pro term by the way) browsers, this rule won’t get applied. However, since IE6 is a pile, it thinks that there is a tag before the html tag, so it will apply this rule. Great! Now IE6 is the only browser that will use this rule.

(CSS) Turn Off Box Element and Positioning Outline (for Firefox and Safari)

Fri, 29 Jun 2007 15:32:50 GMT

Turns off the outline that often shows up in positioned blocks on Firefox and Safari

(CSS) YUI Reset CSS

Sun, 15 Apr 2007 15:06:13 GMT

The foundational YUI Reset CSS file creates a level playing field across A-grade browsers and provides a sound foundation upon which you can explicitly declare your intentions. It normalizes the default rendering of all HTML elements, for example it sets margin, padding, and border to 0, font sizes to YUI Font's default, italic and bold styles to normal, and list-style to none.

(CSS) Transparent PNG Fix for IE 5.5 & 6

Wed, 07 Mar 2007 12:10:25 GMT

This is an excellent solution for fixing IE 6's inability to display transparent PNGs correctly. Step 1: Include the following conditional comment the HEAD area of your document. You will need to update the CSS selector and also the path to whereever you put the .htc file.  Step 2: Create a transparent GIF that's 1x1 and save it as blank.gif in your images folder. Step 3. Copy the source below and save it in a file called iepngfix.htc and place it in your CSS folder. Note, you may need to update the images folder to match the folder you're using on your site. That's it. Once you have everything in place and assuming everything is referenced correclty, PNG transparency will work in IE 6.

(CSS) CSS nowrap - Prevent Text From Wrapping in HTML

Mon, 08 Jan 2007 08:02:24 GMT

This handy CSS attribute can be used to keep text from wrapping. It can also be used to keep other HTML elements from wrapping. Simply apply the white-space:nowrap attribute to any HTML element to force text and images to not return within a specified blog. Something to note, IE6 can be buggy when this is used with an unordered list – but when isn't IE6 buggy?

(CSS) Internet Explorer (IE6) CSS Hover

Mon, 01 Jan 2007 20:17:07 GMT

IE6 and before doesn't support :hover in CSS (except for anchors). You can use this script to make hovers work in IE. Just add the following line to your stylesheet (this assumes the path of the file -- you may need to change it to reflect your paths). body { behavior:url("csshover.htc"); }

(CSS) min-height for IE (and all other browsers)

Wed, 31 Dec 1969 19:00:00 GMT

Since min-height doesn't work in IE, this code makes up for IE's shortcomings. The first part of the code is the correct code that works in Firefox and Safari. The second part of the code is for IE. Internet Explorer will ignore min-height and is just given a height of 8em. The IE bug automatically expands the container to fit the extra text.