Tuesday, January 8, 2013

Fun Things I (Re-) Learned About IE CSS

We're building a customer's web application, which means I've been getting my hands dirty in CSS again. Our front end stack is pretty standard: Sass, 960 Grid System, and Compass. I frequently use bootstrap but here the design just doesn't work with it.

Now, I have two confessions to make that are relevant:

  1. I'm a mac user.
  2. The designer we're working with on this one has an aesthetic that I would call "application-oriented corporate clean".  (This is a compliment, I swear!)
The design language calls for gradients in a lot of places for texture, uses rounded corners and button edges, and favors text on whitespace over controls and cluttered layouts. 

So I went along styling things, and I think it looks pretty good. Here's what it looked like in Safari and Chrome:

Not too bad! There's still some polish needed, but it's looking pretty nice.

Then I launched Internet Explorer (this is IE9), and here's what I saw.

Oooops. Forget polish. That's just ugly. A few hours later, I've got it looking better. There were some fun things I learned (or re-learned) about IE9 CSS along the way. The rest of this post shares the changes I made to get Internet Explorer up to snuff. Note that I've just included the Compass includes where I was using them.

No Image Borders
The logo had that purple image border. No, I don't know why it does. Let's get rid of it. Just add this to the img tag CSS:
border: none;

Create Non-Gradient Backgrounds
I warned you - lots of gradients! IE9 doesn't like gradients. See that header? It looked like this:
@include background-image(linear-gradient(#7184a8, #27486b));

I changed it to look like this:
         background: #536d96;
@include background-image(linear-gradient(#7184a8, #27486b));

Notice that the background color is neither the start nor the end stop color from the gradient. It's in between the two. Also notice that I specified the background first.

IE9 Doesn't Like Text in Button Tags
This showed up with no text at all on the button. The text was in the DOM but it wouldn't display.

This worked like a charm:

jQuery Required for Placeholders
We use placeholder text in a few forms (not shown in the screenshots) for questions that might be confusing. Too bad placeholder is an HTML5 thing that isn't supported on IE9 and earlier. Unfortunately, you have two choices: put the text elsewhere on the page, or use JavaScript to set values. I added the jQuery placeholder plugin and a little bit of CSS styling, and it magically worked. (whoo hoo!)

And we're done! Sure, IE doesn't look quite as polished without the gradients, but it's at least not hugely bad. Just four things take"yikes" to "could use polish". It's amazing how big a difference just a few things can really make.

1 comment:

  1. You can use filters to style CSS gradients in IE6-9. Try:

    @include filter-gradient(#7184a8, #27486b, vertical);

    A useful, free resource for generating CSS gradients is http://www.colorzilla.com/gradient-editor/