Tidying CSS and XHTML - a case study tutorial
By Murray Bourne, 16 Jan 2007
One of my readers used my Adding Feeds With CGFeedread tutorial [no longer available] and got it to work with some Yahoo! news and other feeds. Dan (the reader) is using a WordPress template for consistency across his site.
I gave him some feedback about the design being broken in Firefox and I detected some desperation in his request for help.
So here is a quick overview of what I did for him. The final result needs a few bits of tidying up, but I will leave that to Dan.
The Original
The original page was a confusing mix of tables and DIVs and it was very difficult to figure out what was supposed to be going on. It worked OK in IE, but not in Forefox. It did not validate using the W3C validator.
The Fixed Version
Dan had already changed the doctype to the correct XHTML type.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
Next job was to clear out all of the tables, so we were left with DIVs only.
This was the desired layout. Simple, standards compliant, and works in both IE and Firefox:
With a simpler layout, I could remove mountains of unnecessary CSS coding. The XHTML file is a lot simpler, too. My general process when doing this exercise is to strip out ALL of the CSS and put classes and id's back one at a time into the CSS file. This helps to identify where things are going funny.
Here's how the CSS looks for the menu items and the 3 columns:
#menus {
padding:145px 70px 0 20px;
font-size:1.2em;
}
#leftCol {
padding-left:20px;
float:left;
width:160px;
}
#cgfeed {
width:360px;
float:left;
}
#rightCol {
width:180px;
float:left;
padding-left:20px;
}
Next, I had to ensure standards compliance. The following do not belong in XHTML: <br> and <img ... >. You have to close them properly, as follows:
<br /> <img ... />
There were several other things like mismatched DIVs to sort out. The <font> tag is deprecated and so they all had to go. Finally it was starting to look good.
Next step involved some lining up, tidying up and fixing font sizes. It's not perfect yet, but as I said, I will leave the final touches to Dan.
See the 3 Comments below.
