Lee Munroe » ie

A better way to deal with Internet Explorer conditional styles

Lee — Mon, 30 May 2011 09:01:03 +0000

For a few years now I’ve been using one or two conditional stylesheets to help with cross browser support, or in other words ‘to help fix Internet Explorer’. But recently I’ve been trying out Paul Irish’s technique.

HTML5 Boilerplate

If you haven’t already go over to HTML5 Boilerplate and take a look at the notes. In particular look through the code for each file.

HTML5 Boilerplate is a bare bones framework for any web project, with all the best practice resets, styles, htaccess settings etc. in place.

I’ve been using bits and pieces of the HTML5 boilerplate for a while now and one of the things I like in particular is how it deals with conditional styles for Internet Explorer.

IE conditional stylesheets

Most of the sites I work on usually include something like this:

This was to fix anything that looked out of place in IE6, usually fixes for pngs, floats, widths, positioning etc.

In some cases the site might have 2 or 3 of these conditional stylesheets for IE7 and IE8 fixes also.

Adding conditional classes to the html tag

Recently I’ve started using something like this instead:

This adds classes to the HTML tag in the different versions of IE, enabling you to target them with different CSS rules.

If the user isn’t using Internet Explorer then it only recognises the html lang=”en-GB” tag.

So you can do stuff like this in your core stylesheet:

fieldset legend{background-color:#f6f6f6;}
.ie6 fieldset{position:relative;}
.ie6 fieldset legend{position: absolute;top: -.5em;left: .2em;}

This works better for a couple of reasons:

Less HTTP requests (calling 1 stylesheet rather than 2 or 3)
It keeps your CSS rule in one place

What do you think, nice technique?

Internet Explorer Users Don’t Care About Rounded Corners

Lee — Mon, 19 Oct 2009 14:30:39 +0000

Internet Explorer users don’t care about rounded corners. Bold statement? Perhaps. But recently I’ve taken this approach to a few designs as I’m tired of having to use some sort of rounded corner hack to support IE. It’s a lot easier to just use the CSS 3 declaration.

If you’re up-to-date with your CSS knowledge, you’ll know that CSS 3 has introduced rounded corners, among other ‘goodies’. The problem is though that IE doesn’t support CSS 3 yet but Firefox, Safari and Chrome do.

Some CSS 3 techniques I’ve been using on Sharethrough and Lookaly:

CSS 3 rounded corners

div{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

CSS 3 text shadow

div{
text-shadow: -1px -1px 3px rgba(0,0,0,0.25);
}

CSS 3 box shadow

img{
-webkit-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
-moz-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
}

But how do you deal with clients?

This is where it gets tricky. If you show a client a mockup with rounded corners and the final solution doesn’t have these (because they use IE) they’ll probably not be too happy.

If you’re working with computer savvy clients, who use Safari or Firefox, they should understand. If you’re working on your own personal or side project, happy days. If not, you can try Andy Clarke’s approach of designing in the browser. Time to stop showing clients static design visuals is a very good article about skipping the static mockup stage.

Conclusion

The point I’m trying to make here is that as long as it looks OK in all browsers, we can afford to take liberties when it comes to making it look nicer for those who use Firefox and Safari. Most designers use Firefox or Safari and they’ll appreciate the rounded corners more. IE users *probably* don’t care.

What do you think? Have you started using CSS 3 in your designs? Do you think IE users should get to see the rounded corners too? Share your thoughts below.

Connecting to MAMP in Windows using Parallels on a Mac

Lee — Sat, 29 Nov 2008 12:20:30 +0000

I use MAMP for running Apache, MySQL and PHP on the Mac. A simple click and all 3 are up and running in 5 seconds and you can easily configure your ports and root folder.

However, I was having trouble accessing my MAMP server through Parallels. I use Parallels to test my sites on Internet Explorer and it’s pretty important that I’m able to do this in development before going live.

I found this excellent solution from Tim Fletcher and thought I’d summarize it below so you too can get testing your Wordpess, CodeIgniter, PHP sites etc. through Parallels.

1. Install Bonjour for Windows

Download and install (in your Windows OS) Apple’s Bonjour For Windows.

2. Enable file sharing

Now back in Mac OSX, enable file sharing. System Preferences > Sharing > File Sharing.

3. Change your computer name

From the ‘Sharing’ window you have open, change your computers name to localhost.local.

4. Change your Apache and MySQL ports in MAMP

Run MAMP and open up ‘Preferences’. Change the Apache Port to 80 and the MySQL Port to 3306

N.B. Make sure there are no other instances of MySQL running.

5. Configure your framework

Change the settings on your framework to reflect the new settings.

The example I’ve used here is WordPress. Change your WordPress address (& blog address) to http://localhost.local (Settings > General).

Volia!

You should now be able to access your site from your Parallels Windows environment using the URL http://localhost.local and you can test your site in IE.