<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>Snipplr</title>
<link>http://snipplr.com/language/css/tags/style</link>
<description>Recent snippets posted on Snipplr.com</description>
<language>en-us</language>
<pubDate>Wed, 15 Feb 2012 08:23:17 GMT</pubDate>
<item>
<title>(CSS) good hr styles - rumremix</title>
<link>http://snipplr.com/view/61643/good-hr-styles/</link>
<description><![CDATA[ <p>see other good styles at the url provided</p> ]]></description>
<pubDate>Sat, 03 Dec 2011 11:22:07 GMT</pubDate>
<guid>http://snipplr.com/view/61643/good-hr-styles/</guid>
</item>
<item>
<title>(CSS) bringing back list styles in a section after they have been removed from section's parent - rumremix</title>
<link>http://snipplr.com/view/56592/bringing-back-list-styles-in-a-section-after-they-have-been-removed-from-sections-parent/</link>
<description><![CDATA[ <p>Following css brings back the list style for the class .tabViewer .tabContent</p> ]]></description>
<pubDate>Thu, 14 Jul 2011 10:57:26 GMT</pubDate>
<guid>http://snipplr.com/view/56592/bringing-back-list-styles-in-a-section-after-they-have-been-removed-from-sections-parent/</guid>
</item>
<item>
<title>(CSS) style the search bar in sharepoint 2010 - rumremix</title>
<link>http://snipplr.com/view/52508/style-the-search-bar-in-sharepoint-2010/</link>
<description><![CDATA[ <p>This is the quickest way to style the search bar. It involves creating one single image that includes both the input area and search button.</p> ]]></description>
<pubDate>Sat, 23 Apr 2011 08:50:11 GMT</pubDate>
<guid>http://snipplr.com/view/52508/style-the-search-bar-in-sharepoint-2010/</guid>
</item>
<item>
<title>(CSS) CSS - CSS3 Safari style toolbar buttons rounded box shadow pressed border radius for Moz, Firefox, KHTML - brandonjp</title>
<link>http://snipplr.com/view/38585/css--css3-safari-style-toolbar-buttons-rounded-box-shadow-pressed-border-radius-for-moz-firefox-khtml/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Fri, 06 Aug 2010 03:51:15 GMT</pubDate>
<guid>http://snipplr.com/view/38585/css--css3-safari-style-toolbar-buttons-rounded-box-shadow-pressed-border-radius-for-moz-firefox-khtml/</guid>
</item>
<item>
<title>(CSS) BBC barlesque Reset - LeeRJohnson</title>
<link>http://snipplr.com/view/37736/bbc-barlesque-reset/</link>
<description><![CDATA[ <p>not if bbc but first time i saw it</p> ]]></description>
<pubDate>Thu, 22 Jul 2010 11:56:51 GMT</pubDate>
<guid>http://snipplr.com/view/37736/bbc-barlesque-reset/</guid>
</item>
<item>
<title>(CSS) CSS: Printer Friendly Header Visibility Styles - karlhorky</title>
<link>http://snipplr.com/view/36887/css-printer-friendly-header-visibility-styles/</link>
<description><![CDATA[ <p>When developing a website, an important consideration is accessibility on other media, including the medium of print. However, the printing engines of most browsers render content differently to allow for simple printed pages. One of the most notable differences is the omission of background images by default in modern browsers' print output. Background images are commonly used for header elements, which causes missing branding in the resulting printed pages.
 
One option defined in this snippet is to add markup after your normal header for a 0 pixel by 0 pixel `` element (your print version header), and then style the two headers as invisible and visible based upon the stylesheet medium. So when you're viewing the screen version of the page the normal header will be visible and the print header will be an invisible element with a width and height of 0 pixels. With the print version of the page the normal header will not be displayed at all and the print header will be a visible element that is floated and correctly sized.

This solution has been tested to work in:

*  Microsoft Internet Explorer 6, 7, 8
*  Mozilla Firefox 3.6
*  Google Chrome 5
*  Apple Safari 4
*  Opera 10</p> ]]></description>
<pubDate>Thu, 08 Jul 2010 04:43:28 GMT</pubDate>
<guid>http://snipplr.com/view/36887/css-printer-friendly-header-visibility-styles/</guid>
</item>
<item>
<title>(CSS) sharepoint 2007 custom class for content editor web part css syntax - rumremix</title>
<link>http://snipplr.com/view/35870/sharepoint-2007-custom-class-for-content-editor-web-part-css-syntax/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Fri, 18 Jun 2010 08:35:46 GMT</pubDate>
<guid>http://snipplr.com/view/35870/sharepoint-2007-custom-class-for-content-editor-web-part-css-syntax/</guid>
</item>
<item>
<title>(CSS) Extra Strength CSS Reset and Common HTML Elements Styling -Updated - vagrantradio</title>
<link>http://snipplr.com/view/35416/extra-strength-css-reset-and-common-html-elements-styling-updated/</link>
<description><![CDATA[ <p>Starter barebones stylesheet that fixes many common browser differences and styles all common HTML elements. - Will be updated.</p> ]]></description>
<pubDate>Tue, 01 Jun 2010 16:00:43 GMT</pubDate>
<guid>http://snipplr.com/view/35416/extra-strength-css-reset-and-common-html-elements-styling-updated/</guid>
</item>
<item>
<title>(CSS) CSS list-style-image - Masis</title>
<link>http://snipplr.com/view/34641/css-liststyleimage/</link>
<description><![CDATA[ <p>This parameter determines the image address which serves as a list marker. This attribute is inherited; therefore value none is used for separate elements of the list for marker restoration.

Syntax

list-style-image: none | url (a path to a file)

Arguments
Relative or absolute way to a graphic file is used as the value. The argument none cancels the image as a marker for a parental element.</p> ]]></description>
<pubDate>Mon, 17 May 2010 12:30:50 GMT</pubDate>
<guid>http://snipplr.com/view/34641/css-liststyleimage/</guid>
</item>
<item>
<title>(CSS) Tag Style - dottDesign</title>
<link>http://snipplr.com/view/33507/tag-style/</link>
<description><![CDATA[ <p>Styles any  tag</p> ]]></description>
<pubDate>Thu, 29 Apr 2010 00:01:49 GMT</pubDate>
<guid>http://snipplr.com/view/33507/tag-style/</guid>
</item>
<item>
<title>(CSS) CSS Starter - stevecopley</title>
<link>http://snipplr.com/view/31434/css-starter/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Mon, 12 Apr 2010 12:03:40 GMT</pubDate>
<guid>http://snipplr.com/view/31434/css-starter/</guid>
</item>
<item>
<title>(CSS) CSS RESET - vagrantradio</title>
<link>http://snipplr.com/view/28424/css-reset/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Tue, 16 Feb 2010 15:39:14 GMT</pubDate>
<guid>http://snipplr.com/view/28424/css-reset/</guid>
</item>
<item>
<title>(CSS) Tag pre crossbrowser - marcio</title>
<link>http://snipplr.com/view/28282/tag-pre-crossbrowser/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Sat, 13 Feb 2010 22:32:49 GMT</pubDate>
<guid>http://snipplr.com/view/28282/tag-pre-crossbrowser/</guid>
</item>
<item>
<title>(CSS) Facebook button style - Piotrek290</title>
<link>http://snipplr.com/view/23345/facebook-button-style/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Wed, 18 Nov 2009 10:36:05 GMT</pubDate>
<guid>http://snipplr.com/view/23345/facebook-button-style/</guid>
</item>
<item>
<title>(CSS) The 8 Definitive Font Stacks - ZGX</title>
<link>http://snipplr.com/view/20441/the-8-definitive-font-stacks/</link>
<description><![CDATA[ <p>The "Definitive CSS Font Stacks"</p> ]]></description>
<pubDate>Tue, 29 Sep 2009 16:43:09 GMT</pubDate>
<guid>http://snipplr.com/view/20441/the-8-definitive-font-stacks/</guid>
</item>
<item>
<title>(CSS) css image swap - thesmu</title>
<link>http://snipplr.com/view/18311/css-image-swap/</link>
<description><![CDATA[ <p>You will see that it’s pretty basic – setting width and height attributes for the image, and basically just telling the browser “when someone hovers over the image, make it disappear” – and it simply reveals the background image for the div – your “hover” state.

This, of course, will work in all manner of ways. If you have a navigational list, simply replace the  with . You will also have to separate them – if you’re using 12 different images (6 images for the “on” state, and 6 for “off” – 2 images for each link), you’ll have to set 6 different classes for each image, since none will have the same images representing them.

So yes, it does increase your CSS filesize. But, if you’re looking for a certain type of display, and you (or your client) desires a particular font, size and color for certain elements on the site, this is an excellent alternative to using a javascript image replacement. An added bonus – users who have javascript turned off in their browsers will still see the rollover effect.

Now, keep in mind, you have to deal with IE. (yeah, I bet you weren’t expecting that!) Well, the thing with IE is, it has problems caching background images. So if you move your mouse over the above stuff in IE, it’ll change as expected – but if you move ever so slightly, you’re going to see the blue flash back over. So as you slowly move your mouse across the image, it’ll flicker “redblueredblueredblue” – which is as annoying as hell.

This is actually easy to fix. In your header (or if you’re using a conditional comment to pull in an external stylesheet for IE, simply add this line to the bottom of the IE-specific stylesheet):



You must be sure that, for IE, that the “background-position” attribute is NOT set. If you set a background-position for the div, then the flicker will reappear.

Otherwise, you’re set! Enjoy your javascript-free rollovers. :)

Tested on Windows XP: FF 1.0.7, FF2, FF3, IE 8, IE 7, IE 6.0, IE 5.5, IE 5.0, Opera 8 and Netscape 7.
Tested on Mac OSX Tiger: Safari 2.0, Mozilla Firefox 1.0.6, and IE 5.2. (that last one has a slight padding glitch, which is a result of my global stylesheet – easily fixed, if I really felt like dealing with it…but the point is, the rollover effect does work perfectly there.)
Tested on Mac OSX Leopard: FF3, Safari 3.2.1, Camino 1.6.6, Opera 9.63.</p> ]]></description>
<pubDate>Fri, 14 Aug 2009 07:12:17 GMT</pubDate>
<guid>http://snipplr.com/view/18311/css-image-swap/</guid>
</item>
<item>
<title>(CSS) Text Rotation with CSS - Winkyboy</title>
<link>http://snipplr.com/view/17615/text-rotation-with-css/</link>
<description><![CDATA[ <p>Fairly simple, cross-browser way to rotate text using only CSS.</p> ]]></description>
<pubDate>Wed, 29 Jul 2009 09:41:28 GMT</pubDate>
<guid>http://snipplr.com/view/17615/text-rotation-with-css/</guid>
</item>
<item>
<title>(CSS) Style the down nav state on a wordpress page - kstetson</title>
<link>http://snipplr.com/view/15500/style-the-down-nav-state-on-a-wordpress-page/</link>
<description><![CDATA[ <p>Wordpress has a built in class that you can style to style the down nav state for the page you are on. Adjust div name accordingly.</p> ]]></description>
<pubDate>Wed, 03 Jun 2009 22:07:24 GMT</pubDate>
<guid>http://snipplr.com/view/15500/style-the-down-nav-state-on-a-wordpress-page/</guid>
</item>
<item>
<title>(CSS) CSS Reset + Diagnostic + General Styles - BFTrick</title>
<link>http://snipplr.com/view/13637/css-reset--diagnostic--general-styles/</link>
<description><![CDATA[ <p>The first part resets all the browser\\\'s default styles.  The second part adds some styles back in and provides a few classes for common issues.  The third part will check your page for invalid markup.</p> ]]></description>
<pubDate>Tue, 31 Mar 2009 12:55:09 GMT</pubDate>
<guid>http://snipplr.com/view/13637/css-reset--diagnostic--general-styles/</guid>
</item>
<item>
<title>(CSS) rounded box in css3 - rwczippy</title>
<link>http://snipplr.com/view/11539/rounded-box-in-css3/</link>
<description><![CDATA[ <p></p> ]]></description>
<pubDate>Mon, 26 Jan 2009 13:45:17 GMT</pubDate>
<guid>http://snipplr.com/view/11539/rounded-box-in-css3/</guid>
</item>
</channel>
</rss>
