Give IE some love?

Working with a bunch of ‘Internet Explorer Lovers’ has swayed me (a little) in ceasing my zealous distaste for IE. I now recall the fond feelings I had for IE before my Mozilla enlightenment. The crushing reality is that, without a doubt, Internet Explorer is the browser of choice default browser for the masses. Thus, it’s imperative to make sure your CSS layout works in it.

Not only works, but shines!

I’d even admit when faced with the option of a clients site looking a tad off in Firefox to ensure it looks dead-on in Internet Explorer, I choose the ‘Blue e’. There is a trick that you can use in your CSS stylesheet though to level the playing field amongst the browsers.

Play your wildcard

Like in most things computing, the ‘*’ (asterik) is a CSS wildcard. It means everything. Headlines, margins, padding, paragraphs, lists, et al.

So, a CSS declaration like this will make all of the browsers behave more alike.

* {margin:0; padding:0;}

Since Internet Explorer has a different default padding (or margin, etc) associated with paragraph (or headline) than Firefox (or Opera or Netscape), using that simple CSS declaration essentially sets everything to zero.

Now, you can add uniform pixel or em padding (or margin) to your elements as you need them and achieve more consistent styling among the different browsers.

Turn on the borders when designing

How often do you get to use dotted red, dashed purple, solid green or yellow borders?

CSS Stylesheet

#header {border: 1px dotted red;}
#sidebar {border: 1px dashed purple;}
#content {border: 1px solid green;}
#footer {border: 1px solid yellow;}

I use them on most all new CSS layouts. Until I have a good feel for my layout, then poof! I make them disappear.

Adding borders to all your divs is a helpful trick when designing a CSS table-less web site. This helps you ’see’ what you are doing. It’s a great tool for those just coming over to CSS design from table design.

I’ve solved many a margin and padding issue with this trick as well. By applying a border to my divs, I’ve been able to see when divs where overlapping.

Two excellent resources to begin or continue your education with CSS & Web Standards are discussion mailing lists.

• The Web Standards Group is for web designers & developers who are interested in web standards (HTML, XHTML, XML, CSS, XSLT etc.) and best practices (accessible sites using valid and semantically correct code)
• CSS-Discuss is a mailing list devoted to talking about CSS and ways to use it in the real world; in other words, practical uses and applications.

Both of these mailing lists are High Volume. Read their policies and guidelines before subscribing. You’ll get upwards of 150 email a day between the two of them. I’ve set up different email addresses and seperated my email accounts on Thunderbird to better manage them.

No CSS Style in Internet Explorer

Although cross-browser compatibility is high priority for my clients sites, I admit I don’t often fire up Internet Explorer to view this site. I had a reason to do that today and was dismayed at what I saw.

No, I haven’t been an extended participant in the CSS Naked Day.

So why is my site unstyled in Internet Explorer? It worked fine in my trusty Firefox, Opera displayed it ok, Netscape didn’t have any problems.

I viewed the source of some web sites I trust. I was looking at how they linked their stylesheet. I don’t think I have a hard and fast rule for how I normally do it. The few web sites I browsed had relative, absolute and @import links to their stylesheet. I figured I’d change mine from relative to absolute and see if that did the trick. Sure enough it did.

For those just wrapping your head around links:

Relative link to stylesheet

<link rel=”stylesheet” href=”css/stylesheet.css” type=”text/css” />

Absolute link to stylesheet

<link rel=”stylesheet” href=”http://www.darrenfauth.com/css/stylesheet.css” type=”text/css” />

One reason some HTML documents are so over-populated with <div> & <span> tags, is they lack the power of the CSS CLASS selector.

When first learning CSS, I slapped ID’s on everything. I didn’t understand when to choose a class or an id. So, I ran roughshod with ID’s (and thus more <div> & <span> tags) everywhere.

I kept learning and created my own mnemonic for remembering the difference between id’s and classes.

(more…)