Tidying CSS and XHTML – a case study tutorial

One of my readers used my Adding Feeds With CGFeedread tutorial 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. Go here for a copy of the original page. View it in Firefox and you will see what I mean about broken. The menu at the top is overlaying the image. Look at it in IE, and it works okay. 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:

Layout

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 finished version.

Related posts:

  1. Adding feeds with CG-FeedRead – a tutorial Someone recently asked for a recommended method for pulling feeds...
  2. Youth comparison study – Hong Kong, Shanghai and U.S. How widespread is testing and instant messaging among 15 to...
  3. Designing Effective e-Learning Case Studies Maish Nichani recently gave an interesting talk on designing e-Learning...
  4. HTML non-compliance – does it matter? An experiment to see if non-compliant HTML code really matters...
  5. Which websites are most popular in Singapore? You get an interesting insight into what people do on...

Posted in Computers & Internet - January 16th, 2007.

4 Comments on “Tidying CSS and XHTML – a case study tutorial”

  1. Constance Says:
    5 Feb 2007 at 3:31 am Link to this comment

    This was a helpful post, thanks.

    Did that guy ever get back to you? Seems he has not responded here.

  2. zac Says:
    5 Feb 2007 at 12:34 pm Link to this comment

    No, Constance, he never did. So I’m not sure whether he got any benefit from this at all. Anyway, I agree with several of the views in his site, so hopefully there is some good outcome.

  3. Dan Gargus Says:
    6 Jun 2007 at 2:52 am Link to this comment

    Hi Zac,

    Sorry I didn’t followup… just had to many projects going… would ultimately need someone to do the re-coding for me thus I’ve just been adding content as time allows.

    Quick question, how can I lessen the space between posts/items on the pages linked below?:

    http://www.gargusgazette.com/
    http://www.gargusgazette.com/department_of_peace.php

    I’ve tried many combos in the css style sheet with no luck.

    Thx As Always,

    Danny

  4. zac Says:
    6 Jun 2007 at 3:28 am Link to this comment

    Hi Dan. You really need to re-organise all of your blog, since just changing a few things here and there is much like re-arranging the deck chairs on the Titanic.

    The blog reading community has a higher proportion of Firefox users compared to IE users – you really have to cater for them. (Around 50% of my blog readers are Firefox users, compared to about 20% for my math site.) Also, a broken site is harder for visually disabled users to read – and runs the risk of not working at all in future browser versions.

    It is worth spending the time to have a look at what I did above to tidy your site and try to follow through the changes.

    Good luck with it.

Leave a comment