While I was listening to Sitepoint’s 118th Podcast the other day and they mentioned a very interesting CSS 3 experiment. Sadly this won’t be working with IE just yet so it’s not something we can put to use right away, but the idea of Pure CSS icons is quite neat 
The use of pseudo elements to create the icons out of pure CSS is truly innovative and makes me start to think about all the code that could be cleaned up by taking advantage of pseudo elements as opposed to adding in more DIVs to get certain background and border effects…
Regardless, it’s an interesting peek in to what we’ll be able to achieve once CSS 3 is fully supported
http://nicolasgallagher.com/pure-css-gui-icons/demo/
I was looking at those pricey w3schools certifications, but everywhere I asked said it was a big waste of money. So I decided to see what alternatives there were and see if there were any certifications that were especially well know that I should take.
What I did find was the Gild website where you can get certifications for free!
The price is right, and if I learn something along the way then I say it’s definitely time well spent. I am still considering the w3schools certifications, but I’m going to start out with the free ones from Gild and see where that takes me.
http://www.gild.com/
I stumbled across a website called SelectORacle. What it does is you input a style sheet and it breaks down exactly what is going on! Not too much help for me, but a nice resource to hold on to for newbies.
http://gallery.theopalgroup.com/selectoracle/
I’m always forgetting what the JavaScript equivalent is of certain CSS styles. for instance you could change the border by:
document.getElementById(‘myText’).style.border = ’1px solid #333′;
| CSS Property | JavaScript Reference |
| background | background |
| background-attachment | backgroundAttachment |
| background-color | backgroundColor |
| background-image | backgroundImage |
| background-position | backgroundPosition |
| background-repeat | backgroundRepeat |
| border | border |
| border-bottom | borderBottom |
| border-bottom-color | borderBottomColor |
| border-bottom-style | borderBottomStyle |
| border-bottom-width | borderBottomWidth |
| border-color | borderColor |
| border-left | borderLeft |
| border-left-color | borderLeftColor |
| border-left-style | borderLeftStyle |
| border-left-width | borderLeftWidth |
| border-right | borderRight |
| border-right-color | borderRightColor |
| border-right-style | borderRightStyle |
| border-right-width | borderRightWidth |
| border-style | borderStyle |
| border-top | borderTop |
| border-top-color | borderTopColor |
| border-top-style | borderTopStyle |
| border-top-width | borderTopWidth |
| border-width | borderWidth |
| clear | clear |
| clip | clip |
| color | color |
| cursor | cursor |
| display | display |
| filter | filter |
| font | font |
| font-family | fontFamily |
| font-size | fontSize |
| font-variant | fontVariant |
| font-weight | fontWeight |
| height | height |
| left | left |
| letter-spacing | letterSpacing |
| line-height | lineHeight |
| list-style | listStyle |
| list-style-image | listStyleImage |
| list-style-position | listStylePosition |
| list-style-type | listStyleType |
| margin | margin |
| margin-bottom | marginBottom |
| margin-left | marginLeft |
| margin-right | marginRight |
| margin-top | marginTop |
| overflow | overflow |
| padding | padding |
| padding-bottom | paddingBottom |
| padding-left | paddingLeft |
| padding-right | paddingRight |
| padding-top | paddingTop |
| page-break-after | pageBreakAfter |
| page-break-before | pageBreakBefore |
| position | position |
| float | styleFloat |
| text-align | textAlign |
| text-decoration | textDecoration |
| text-decoration: blink | textDecorationBlink |
| text-decoration: line-through | textDecorationLineThrough |
| text-decoration: none | textDecorationNone |
| text-decoration: overline | textDecorationOverline |
| text-decoration: underline | textDecorationUnderline |
| text-indent | textIndent |
| text-transform | textTransform |
| top | top |
| vertical-align | verticalAlign |
| visibility | visibility |
| width | width |
| z-index | z-index |
Javascript CSS Style reference
Shamelessly stolen from: http://codepunk.hardwar.org.uk/css2js.htm
Ever have this problem where your centered elements will “wiggle” out of place when you adjust the size of your browser? It’s just by one pixel, and annoys me to death.
I found this article about it: http://acko.net/blog/css-sub-pixel-background-misalignments
It seems like it’s a margin/padding issue. I took the offending div element and added “margin-left: 1px;” to it’s class and it worked! Beautifully You may also need to nudge any background images by one pixel.
It does concern me that other elements on the page align perfectly, where it was only the #footer div that was giving me grief.
UPDATE
The aformentioned fix applies to 100% divs that have a centered background. I came across this same problem in a div that was set to margin:auto;. I went ahead and added “margin-left: 1px;” to the body and that fixed everything up nicely
