It is February of the year two thousand and twelve, and while overall web stats claim that older Internet Explorer versions account for only ~ 15% of web traffic, the reality for your business could be quite different. What if you are looking to update your (company’s) website for the new year, but find that the majority of your visitors have not updated their web browsers in the past year (IE9 was released on 3/14/11)? While it may be true that with enough diligence, you can get IE6 – IE8 to do just about everything that modern browsers can do, there are a few things, specifically when working in CSS (Cascading Style Sheets), that can really throw a wrench in the works. Here are some CSS pitfalls to be sure and avoid:

1. “display: inline-block”

<ul class="menu">
<li>...</li>
<li>...</li>
</ul>


If you have some html like a menu, and you want that to appear inline (in a line) rather than as a default bullet list, you maybe be tempted to just set the style as display: inline-block. Be warned! Before IE9, previous versions will see your styling, and completely disregard it. Or rather, they will just say “oh, display: something- BLOCK, ok display: block. We’re cool, right?”

Wrong! To avoid this, you should be able to just use “float: left” instead. But the caveat there is once you start floating things, you may have to float a lot of elements to get them to play nice together. And don’t forget that IE6 likes to further wrench it up with the classic IE6 Box Model Bug, so you should really just replace that “display:inline-block” with “float: left; display:inline” (and a small amount of finger-crossing)

2. CSS selectors like ” > ” and “:”

What if you have some sort of menu structure, and you want to add styling for the top level of list items in that menu? In the latest and greatest CSS, you could say something like “ul.menu > li” or “ul.menu > li > a” to target the top level items. Those same selectors work in jQuery, even in lesser versions of IE! But in CSS, IE<9 will say “hey, Carrots are for horses, man!” and completely disregard what you were hoping for. So it is just better to add more classes to your HTML, and get more specific with your CSS rules.

<ul class="menu">
<li class="menu-item">
<a href="#" class="top-level">top level link</a>
<ul class="submenu">...</ul>
</li>
</ul>


Taken a step further, if you are looking to target the first-child or last-child in a list of elements, and you are thinking about using “:last-child” in CSS to do so, you should really just throw another class=”last-child” in to the HTML, and do it that way, to be sure IE picks up what you are putting down.

3. Fancy styling like border-radius, text-shadow, and box-shadow…

Check It Out

<h2 style="padding:20px; border: 1px solid #000; border-radius: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); text-shadow: 2px 2px 2px #333; -moz-border-radius: 10px">Check It Out</h2>

Nice Browsers that pay attention and follow directions, see something like:

IE8 sees it more like…

So check yourself before you wreck yourself. Is that box-shadow and/or rounded corners 100% vital to your site design? If so, you better look at using CSS background-images to replicate that functionality. But maybe IE<9 users can live without that stuff? Then you are ok. “Graceful degradation” is the key there.

And that about covers what I would figure are “the big 3″ here. Still with me? Here’s a quick jQuery snippet that is either another pitfall, or just something giving me the case of the Mondays on a Friday :

jQuery('#nav li').bind('mouseenter, mouseleave', function() { jQuery(this).toggleClass('hover'); });

vs

jQuery('#nav li').bind({
mouseenter: function() {
jQuery(this).addClass('hover');
},
mouseleave: function() {
jQuery(this).removeClass('hover');
}
});

Both should do exactly the same thing, but IE8 just did not like me trying to save a few lines…

Not only is David Choe known for doing amazingly off the wall crazy cool things with his artistic talent, he is now worth 200 million in facebook stock. Not bad for doing what you love and being fully expressed. Much love to artists that live by their own means and get paid like rock stars. Also check out his show called “Thumbs Up“

Yes, you read the headline correctly. And I was surprised when I read the tweet, but there it was : Threadless Tees in the Xbox Avatar Marketplace. I have a PS3, also known as the black box that only runs Madden, and I’ve never regretted siding with Sony over Microsoft… until now?

I mean, the very first shirt featured there is one of my favorite cat shirts, and 2 past that is another one that I was happy to wear IRL (“in real life”) on January 3rd. Oh yea, my new year’s resolution was to wear a different cat shirt every day, and I made a website to keep track : catshirts.chousmith.com

50 Best Websites of 2011

To go to the article, please click here: http://www.splashnology.com/article/50-best-creative-websites-of-2011/4144/

The video is linked from the blacked out page that is WordPress.org, from Vimeo user “Fight for the Future”.

You may have noticed it when you started up Firefox today. Or maybe you tried to find something on Wikipedia. In either case, you were probably greeted by a much darker page than you were used to. I would link this to the Wikipedia article all about SOPA, but, well, that wouldn’t work out very well. Check out sopastrike.com/strike/ for more of a run down of whats going on.

From Google’s blacked out logo, to WordPress.org, today could be a long day if you are hoping to look something up, and find yourself greeted with a protest instead. If you are interested in joining the protest today, WordPress has a list of plugins you can add to your site to send a message.

Check out Santa’s holiday search tip rap, fresh off the little snowflake in the bottom right of Google’s helpful “New Gadgets” page. Did you get a new gadget – Android phone, tablet, or computer – over the holidays? Then this is for you: Download Google Chrome, get the Google+ app to face time, er, face-to-face with up to 9 people, hit up the Android App Store, and more. Happy Holidays!

It’s that time of year again – that magical time of year – when all the “Best of…” lists are circulating as free as the eggnog and tree-shaped cookies. There are lots of “Best of” Music lists out there – Reddit has a nice collection of albums as voted by Reddit votes – but I particularly like Paste Magazine’s 50 Best Album Covers of 2011 list, featuring The Cool Kids, Tom Waits, the Hot Sauce Committee Part Two, Rome, and much much more. What’s your favorite?

Now watch this video…ranking it up there with Make the Logo Bigger

Happy Weekend and hope you all get a good laugh.