Sunday, March 11, 2007

Valid XHTML - blog post

pencil icon, that"s clickable to start editing the post

One of the problem areas I had to address before I could produce valid XHTML was the contents of my posts. I thought I did it all right until i started validating just to discover that the structure was not what I had expected. I had expected that the posts would be embedded in a <div> tag but it isn't it's in a <p> tag, which limits that valid child elements, as can be seen from this overview of the paragraph tag. I produce my postings in the Edit Html mode but the problem would also be there if I used Compose mode, and in fact it's only with raw XHTML that I'll produce valid markup. In the compose mode one can make an ordered list with the normal <ul; and <li> tags but they are not allowed inside the <p> tag, so I've decided to drop them for now. Also <blockquote> and headlines with ex. <h2> are not allowed and not the lease <pre>. To overcome this I've added my own css classes to be used with <span>

/* custom classes due to limitation in markup allowed in 

tags*/ tiny { font-size:78%; } .small { font-size:85%; } .normal { font-size:100%; } .large { font-size:130%; } .huge { font-size:180%; } .h2 { font-size:130%; font-weight: bold; } .pre { color: black; white-space: pre; background-color:lightgrey; display: block; } .blockquote { margin:1em 20px; }

Here'a an example using the font sizes:
* This is Tiny text
* This is Small text
* This is Normal text
* This is Large text
* This is Huge text