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.

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…)

Just as North is at the top of most maps, web site design has developed some fundamental ‘conventions’ that the majority of internet users have come to expect.

As Vincent Flanders points out (to which I agree), you can throw all of the upcoming concepts out when developing: Personal, Band, Movie or Web Site Design company sites.

(more…)