css

Internet Explorer 8 comes with two different rendering engines. “Standards Mode” (they use the term loosely) and “Compatibility Mode”. I’m not going to debate the reasoning behind their choice to ship the browser in this form, smarter people than I have already beaten that horse to death. The problem I have with it is that by default IE ships with a setting that makes anything on your LAN show up in compatibility mode. The button to switch to standards mode isn’t displayed, and worst of all, there is nothing that tells you it is IN compatibility mode.

I recently discovered this when, after carefully testing a site in Internet Explorers 6, 7 and 8, I committed the release to the SVN repo and published it to the staging server. A quick test showed IE8 issues that weren’t there on my local version. Turns out the problem was this default compatibility mode setting. You can turn it off by going to “Tools > Compatibility View Settings” and unchecking the “Display intranet sites in Compatibility View” option. They did this to ensure old intranets are compatible with IE8 out the box, but in the process put every web designer in the awkward position of not knowing their site is broken until they upload.

Internet Explorer 8 isn’t all that bad. It does a pretty good job of fixing the (not so) little things that drove us crazy in previous incarnations, but it’s far from perfect. In the very likely event that you need to code some IE8 specific styles I recommend using conditional comments. In this case I needed one set of modifications for IE6, 7 and compatibility mode 8 (which mostly behaves like IE7) and another for IE8 specifically. To achieve this I used the following code:

<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/ie8.css" /><![endif]-->

It uses one stylesheet for everything less than 7 and another for IE8 specifically. Works like a charm, hopefully until IE9 comes along.

I’ve just completed my first design in pure CSS (sorry, can’t show it until it goes live) and the feeling I get is that it wasn’t harder than doing it with tables, just different. Well, that’s not true. It was harder because I didn’t know how a lot of the stuff needed to be done. But if I did know how it is supposed to be done the task wouldn’t have been harder than doing it the old-fashioned way with tables. I think it’ll be two or three designs before I get the hang of it. Then comes the cool part where I start doing things I never could before. Can’t wait for that to happen

I’m new to the blogosphere. I knew it existed, frequented a few blogs here and there and never thought about setting up my own. Which is rather weird, now that I think about it, since I’m all for trying out new stuff. Anyway, the reason I finally got involved was because I read a blog with a beautiful design, actually it was this very template.

As a web developer by profession I was naturally attracted to the simplicity of a page that lost none of it’s beauty because it didn’t have aqua buttons or flash or javascript trickery. I had no idea what I was getting into when I right clicked to view source. It was nothing short of a revelation.

Nestled comfortably in this elegantly coded html file was nothing whatsoever. That is to say there wasn’t the stuff I expected to see. Instead of the nested tables and IE/Netscape hacks with indentation from hell I saw no content formatting code at all. The content was there in simple <div>s and <p>s but that was all.

They had managed the holy grail of web design: Separation of content from formatting. CSS is finally living up to it’s promise.

Now I’m not an idiot. I know what CSS can do, hell I use CSS on every site I make. I just didn’t know how far people had managed to get it to go. There were always compatibility issues, unsupported properties and a plethora of other problems that had no solution.

Things have moved on since the last time I looked. I’ve been gobbling up information on the new way of doing things. A list apart, CSS Zen Garden and Douglas Bowman’s Stopdesign (he’s the guy that made the template I’m using and redesigned Blogger) have all been incredibly useful resources. Needless to say I’m moving ActivElement’s site to this kind of separation and all new projects will use this method alone. To hell with Netscape 4.

Job #1 is to redo my home page with pure CSS. It should then be relatively simple to get this blog to match.