Snipplr

(CSS) Stop CSS Opacity From Affecting Child Elements - jonhenshaw

Mon, 03 Aug 2009 07:35:45 UTC

By default, applying opacity to an HTML element will make all of it's child elements (the content inside of the object) to also get the opacity style applied to it. Here's a clever example of how to override that rendering output in browsers. The solution is to create a wrapper and apply absolute positioning to a child element of the wrapper.

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

Wed, 06 Aug 2008 20:24:35 UTC

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

(CSS) CSS PNG Image Fix for IE - jonhenshaw

Thu, 08 Nov 2007 08:22:32 UTC

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) - jonhenshaw

Fri, 29 Jun 2007 15:32:50 UTC

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

(CSS) Transparent PNG Fix for IE 5.5 & 6 - jonhenshaw

Wed, 07 Mar 2007 12:10:25 UTC

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 - jonhenshaw

Mon, 08 Jan 2007 08:02:24 UTC

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 - jonhenshaw

Mon, 01 Jan 2007 20:17:07 UTC

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"); }