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!
Fonts
Getting the font-size for all browsers to similar sizes was another difficult
job. The easiest way would be to use a static font-size in pixels, but we
wanted resizable text in all browsers. To solve this we used the solution
that is described on Café Phespirit:
div , p , th , td , span {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : small;
}
body div , body p , body th , body td , body span
{
font-size : x-small;
}
html > head:first-child + body div , html >
head:first-child + body p , html > head:first-child + body th , html >
head:first-child + body td , html > head:first-child + body span {
font-size : small;
}
With the above code it will display the text on all browsers about the same
size. This size is used as base for the whole css. We then base other classes
on it using percentages, so a title for example will become a fontsize of
140%. This works only with IE in quirks mode, which is why we keep the XML
prolog in the XHTML.
Tools
For development we used Firefox
a lot since it has some fantastic plug-ins (especially the Web
Developer plug-in). Beneath screenshots are made from Firefox using the
plugin outlining the tables.
The old table structure
The new table structure
You can see that we still use a table as an interim measure to get the fields
to align in the log-in box on the top left; it's easier to use a simple table
with the remaining presentational markup in the CSS than using floats etc.
If you don't have Firefox and want to duplicate the table-highlighting in
Internet Explorer, we recommend a toolbar developed by the Accessible
Information Solutions team at the National Information and Library Service,
Australia and have a free tutorial
on using it on available at DMXzone.
Converting to XHTML
We didn't only want to reduce the size of HTML by removing the tables, but
also we wanted to make the site fully XHTML compliant. For this we had to
go thru all the ASP code to check the HTML tags that where used and make them
XHTML compliant.
Underneath a list of what we have changed:
- Include the XML prolog <?xml version="1.0" encoding="iso-8859-1"
?>. Although an IE bug means that including this (or anything else for
that matter) before the DOCTYPE declaration throws IE into "quirks
mode", we didn't mind this, as our font-sizing depends on IE's quirks
mode. Of course, your mileage may vary. See http://www.positioniseverything.net/articles/doctypes.HTML
for a discussion of this.
- Adding the appropriate Doctype
- Namespace in HTML tag: <html xmlns=http://www.w3.org/1999/xhtml lang="EN">
- All tags to lowercase
- All tags must be closed and be nested properly (for example: <li><b><i>test</b></i>
did work, but it is not valid for xhtml. It must be: <li><b><i>test</i></b></li>)
- Tags that does not have a closing tag should have a / at the end, so <br>
becomes <br/>
- All attribute names must be lowercase and the values must be inside quotes
- Instead of using the name attribute the id attribute is used now (Netscape
does not know the name attribute)
- All & characters used in attribute values must be converted to &
- <table> may not contain height, <td> can have it instead
- Background attribute may not be used, this now will be done in css
- At all images the alt attribute must be applied
- For the script tag and style tag the type attribute is obliged
DMXzone
George Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. The most popular for its over high-quality Dreamweaver extensions and templates.
George is also the founder of Wappler.io - the most Advanced Web & App Builder
See All Postings From George Petrov >>
Reviews
Standards compliant perhaps, but not usability...
Ever since the redesign, the size of much of the text throughout the site (especially in sidebars and bulleted lists) has become entirely unreadable due to its small size. For example, within this this little form field used to write this comment, the type is so small I can't read what I'm writing.
I'm running Firefox and to be honest, don't have this sizing problem with pretty much any other site I browse. Making a user manually increase the type size just to view a particular site is not the best approach around.
You must me logged in to write a review.
