Everything is Crap » css http://everythingiscrap.com Notes on the crap we've been subjected to Wed, 11 Jan 2012 21:10:15 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 CSS is crap! http://everythingiscrap.com/css-is-crap/ http://everythingiscrap.com/css-is-crap/#comments Wed, 07 Jul 2010 13:49:15 +0000 paul http://www.everythingiscrap.com/?p=583

…not that I want to go back to straight HTML, because that's crap, but CSS is crap too.

After pulling my hair out for a bit and wondering why my styles weren't applying I found this helpful article on CSS specificity. Here's the good part:

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

(1,0,0,0) is the most specific, (0,0,0,1) is the least. When conflicts exist, the most specific wins. So, (0,0,1,0) always wins out over (0,0,0,15). Also if two are in conflict and have the same specificity, then the one declared last wins.

Good to note. Back to work!

]]> http://everythingiscrap.com/css-is-crap/feed/ 2 The order matters! Are you kidding me? http://everythingiscrap.com/the-order-matters-are-you-kidding-me/ http://everythingiscrap.com/the-order-matters-are-you-kidding-me/#comments Tue, 15 Dec 2009 02:58:56 +0000 paul http://piotrouble.wordpress.com/?p=107 While carefully coding a web site template by hand I couldn't figure out why my "a:hover" selector wasn't working. I Googled it and came across this website that explains that order matters in CSS…

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Coding is hard.

]]> http://everythingiscrap.com/the-order-matters-are-you-kidding-me/feed/ 0 Justification and Orphans with paragraphs displayed on the web http://everythingiscrap.com/justification-and-orphans-with-paragraphs-displayed-on-the-web/ http://everythingiscrap.com/justification-and-orphans-with-paragraphs-displayed-on-the-web/#comments Mon, 21 Jan 2008 23:28:00 +0000 paul http://piotrouble.wordpress.com/2008/01/21/justification-and-orphans-with-paragraphs-displayed-on-the-web What do you know! You can fully justify text using CSS (text-align: justify). You can also control orphans (single words on a line at the end of a paragraph) by adding a <span> element and setting the white-space style to no-wrap (white-space: nowrap). Who knew! As a note, the Chicago Manual of Style is silent on orphans and how many words you should include to avoid orphans. In general I've seen the requirement of 5 characters plus an ending punctuation mark. But, that's not a rule, and Kathie didn't want any single-word lines in her paragraphs. So, I just went through and spanned the last few words of each paragraph. That did the trick.

]]> http://everythingiscrap.com/justification-and-orphans-with-paragraphs-displayed-on-the-web/feed/ 0