CSS

=CSS Reset (with HTML5 elements)= [] []

=An Inside View of the CSS Working Group (w3c)= []

Image Sizing via CSS Experiments
[]

[]

Fluid Layout Info []

Setting up a Print CSS
[]

=Image Replacement Techniques=

Rundle/Phark Update
Rundle/Phark (text-indent: -5000px) apparently can create performance issues in browsers so the updated method used is:

http://www.dotnetnuke.com/Resources/Blogs/EntryId/3536/New-CSS-Image-Replacement-Technique-to-Improve-Performance.aspx

code format="css" .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } code

HTML Markup Note: the title attribute acts as a tooltip is some browsers - similar to the alt attribute text on the img element. code format="html4strict"   Facebook Twitter  code

CSS

code format="css" /*#social { text-indent: -5000px; } don't use any more, use the .hide-text styling below instead */
 * 1) facebook { display: block; background-color: #000; color: #FFF; background-image: url(assets/images/facebook-48.png); background-repeat: no-repeat; width: 48px; height: 48px; }
 * 2) twitter { display: block; background-color: #000; color: #FFF; background-image: url(assets/images/twitter-48.png); background-repeat: no-repeat; width: 48px; height: 48px; }

/* new technique to speed up performance http://www.dotnetnuke.com/Resources/Blogs/EntryId/3536/New-CSS-Image-Replacement-Technique-to-Improve-Performance.aspx */ .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } code

Gilder-Levin
HTML Markup Note: the title attribute acts as a tooltip is some browsers - similar to the alt attribute text on the img element. code format="html4strict"   Facebook <a id="twitter" href="#" title="Twitter"> Twitter</a></li> </ul> code

CSS

code format="css" code
 * 1) facebook {position: relative; display: block; width: 48px; height: 48px;}
 * 2) facebook span { position: absolute; background-image: url(assets/images/facebook-48.png); background-repeat: no-repeat; width: 48px; height: 48px; }
 * 3) twitter {position: relative; display: block; width: 48px; height: 48px; }
 * 4) twitter span { position: absolute; background-image: url(assets/images/twitter-48.png); background-repeat: no-repeat; width: 48px; height: 48px; }

Mezzo Blue List (a bit dated)
http://mezzoblue.com/tests/revised-image-replacement/

Nine Techniques (with great feedback on plusses and minuses)
http://css.dzone.com/news/nine-techniques-css-image-repl

=Print CSS - Expand All Hidden Tabs, Accordion Sections=

Create a style sheet for media="print". code  code

Then in your CSS make sure to style all sections that can be set to display:none through JavaScript to:

code display: block !important; visibility: visible; } code
 * 1) section1 {

This should make everything print out.

=Experiments in CSS=

Download these files and comment out or uncomment various embedded styles to see what happens.

CSS Drop Down Menu with IE 8 fix
Note: IE 8 hides the drop down if there is no background color on the ul. There also is rumor of a z-index issue with IE.

=Links to Information about CSS=

50 New Useful CSS Techniques, Tools and Tutorials
[]

Be a CSS Team Player: CSS Best Practices for Team-Based Development
[]

Specificity Wars
[]

CSS Floats 101
[]

Listamatic (CSS-Styled Lists)
[]

CSS3 Generator
[]

Selectivizr CSS3 pseudo-class and attribute selectors for IE 6-8
[]

CSS3 Bookshelf
[]

CSS3 Bookshelf Process Notes
[]

CSS3 Experiment Our Solar System in CSS3
[]

CSS3 Box Shadow and Text Experiments (awesome!)
[]

CSS3 Flexbox
[]

CSS Sprites Without Using Background Images
[]

15-CSS Habits to Develop for Frustrating-Free Coding
[]

Don't use @import
[]

CSS Rules of Thumb - Mike West
[]

=Multiple IE's for Testing Pages=

[]

[]

[]l

=IE Only Stylesheets= []

=JavaScript PNG Fix for IE= []

=MezzoBlue Article= Lots of image replacement techniques []

The browser sets the margin value for indenting ul and ol so setting a negative margin may not work the same way in every browser. There is no W3C standard for determining the indent value. []

Firefox spacing issue
[] Same issue. Adding a 1px border the same color as the background works. Adding a 0.01px margin to the top of the wrapper worked. Using “position: relative” on the wrapper, header divs did not work.

[]

When you use the @charset declaration on your stylesheet it does not validate locally. You can comment it out or remove it for testing. Just remember to put it back in. If you have trouble validating your CSS with a charset declaration after you have uploaded it to your web server, it may be that there is an invisible UTF -8 byte order mark before the @charset. This may be put there by some editors (Notepad) as outlined in the following text. Notepad may also do this to some script files as well. “It is a good idea to always declare the encoding of external CSS style sheets. (It is not necessary for CSS embedded in a document.) This is done by adding a statement to the top of the file such as: @charset “utf-8”;. Note that this must be the very first thing in the file. It is particularly important if your style sheet contains non-ASCII values for the content property, or refers to non-ASCII element or attribute names or values, but it will also become more important in the future to use such a declaration with any CSS file. (One thing to watch out for when dealing with CSS is the UTF -8 signature or byte order mark (BOM). This is an optional character at the beginning of a UTF -8 that is added automatically by some editors (such as Windows Notepad), and that indicates that this is a UTF -8 file. Unfortunately, some user agents currently fail to recognize the initial statement in a CSS file if the signature is present. For more information about this, see the Internationalization Working Group FAQ, Unexpected characters or blank lines.)” [|http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0390]

I found this on the Web Standards Group reading list: []

Working With RGBA Colour
[]

Useful Coding Solutions for Designers and Developers
[]

CSS3 Gallery Example
(Uses JQuery) []

Drop shadow with CSS for all web browers - Robert's talk
[]

Creating Beveled Images with CSS
[]

.