Project Report, Week 7 – HTML

Well, I’ve begun getting the site together. You can check out the work at http://www.cypheye.com/twc421. Right now, it works best in IE7+ and I’m working on getting it working right in Firefox.

Unfortunately, IE and Firefox have some subtle differences that present themselves when creating precision HTML/CSS that require goofy hacks to make it work in both. In this case, I’m adding “padding” to the element. This sets the content a certain pixel depth from the edge of that element. IE does this by adding that padded edge to the inside of the element. Firefox expands the element by the pixels defined to create that padding. If you’re familiar with Photoshop, you can think of it like adding a stroke to the element. IE places the stroke on the inside, which Firefox places it on the outside. It is just slightly difficult to make it all behave properly.

The hack you can use is kind of clever. IE has a habit of silently throwing away CSS values it doesn’t recognize. CSS principles stipulate that the last element gets used in a list of two or more keys that are the same. Example:

BODY {
color: #FFF;
color: #000;
}

In IE, the text color will be set to black (#000) even though white (#FFF) was set first, the last one listed takes precedence. But in Firefox, you can add a flag (!important) to the end of an element to ensure it is used no matter when it’s listed:

BODY {
color: #FFF!important;
color: #000;
}

Here, even though black is listed second, the white text color takes precedence (in Firefox only). If you visited a site with this code, in IE, the text would appear black, but in Firefox, it would be white. This works really nicely when I need the width set to one amount in IE and another in Firefox.

This week, I’ll need to nail down all the places this is affected. I’ll also want to take a look at the site in Safari or Google Chrome to make sure it’s working there as well. In addition to getting the site looking right on all reasonable platforms, I need to work on getting some good text into the “software” page.