Free: Remaking DMXzone in CSS and XHTML

Read for free the trials and tribulations of our intrepid tech team as they wade through 6000 articles-worth of tag spag hell, nested table horror, and emerge victorious with a fully validating CSS and XHTML site that loads twice as fast, renders better and is more maintainable!

The ASP and JavaScript we used to convert the all our articles into xhtml and the full DMXzone.com CSS file is included for download too!

Problem with the height

Now we had a problem with the height of some of the boxes, as the screenshot shows:

We first attempted to solve this by placing a div with the class clsSplitter just after the content. This class contains a clear:both and is placed at the bottom of the content.

This worked fine under IE, but still gave problems with other browsers. For these browsers we had to give a height to the div, else it did not work, and even then it wasn't always correct with forms and floating images. So again, we turned to a hack (body>div) for this. Now we finally had the box displaying correctly on all browsers we tested.

This is the css for the splitter used in the sidebar and all other boxes:

    .clsSplitter {
          clear: both;
    }
    /* Hide for all IE */
    body>div .clsSplitter {
          height: 1px;
    }
    /* End Hide */

Problem with tables

We used the same css for all the boxes, only the width was changed. But then we encountered another problem. In our property boxes (which describe extensions, download etc) we use tables and the box should be 180px width, but when the content of the table doesn't fit, it makes the table wider. Which is fine, but the div doesn't get wider and the table content spilled out over the right border:

OMG WTF!

Of course, the div having a width of auto should have been fine, except for our old friend IE/windows which would only display correctly when the width was set to 180px. The hack to over-ride the 180px with auto, except for IE is shown here:

    .properties_small {
          float: right;
          background-image: url(images/sb_br.gif);
          background-color: #F2F5FA;
          background-repeat: no-repeat;
          background-position: right bottom;
          margin: 0px;
          margin-bottom: 8px;
          width: 180px;
    }
    /* Hide for IE5/6 WIN */
    html>body .properties_small {width: auto;}
    /* End Hide */
    .properties_small table {
          width: 180px;
    }

LOL!