strip golive elements but still will not Validate? Help 1

[boulef]

Hi there,

I can't get my web pages to validate. I search and found some posts related to that, strip golive elements, metadata and also checked flatten script library but I am still showing 6 errors. Could anybody look at the pages markup and tell me what I did wrong?

http://www.africagrooves.com.

any help will be appreciated.

 

[wiser3]

The first 4 errors are all because the standard body tag doesn't support those attributes. Some browsers may support those tags, but the official standard doesn't. To be compliant you would have to change doctype to one that supports it, or remove those attributes and use other methods (CSS) to accomplish that.

For the fifth error xhtml doesn't allow attributes without values. Change checked to checked="checked".

For the final error is telling you that you have a div tag that was never closed. I briefly looked for it, but wasn't able to find it.

Great looking site! I really like it - and i don't give compliments often.

I noticed your using a lot of font tags. I recommend using CSS instead. Everything is already well id'd and classed. CSS would allow you to get rid of all those empty paragraphs and br tags and make site wide color, layout, and padding changes easy.

 

[boulef]

Thank you much wiser3

You are 100% correct for the font tags. I am still trying to figure out how to use css to go around that. While the whole site was built with css, I still have a lot to learn in it.
As to the font tags, how could I use css to instead?

Thanks again for the great help.

 

[wiser3]

Lets take a small item as an example. Here's the copyright notice at the bottom of every page:
< div class="padbox_Copyright">
<font color="#000033">
© Copyright 2007 Africa Grooves Media
</font>
</div>

First, remove the start and end font tag to get this:
< div class="padbox_Copyright">
© Copyright 2007 Africa Grooves Media
</div>

Now we'll style the text inside that box by specifying only divs with a class of padbox_Copyright:
div.padbox_Copyright {font-size:1em; text-align:center; color:black; }

Three months later you decide the copyright is too tight with the box above it. Instead of changing all your html pages you just add padding-top:0.5em; to the CSS declaration, so it becomes:
div.padbox_Copyright {font-size:1em; text-align:center; color:black; padding-top:0.5em; }

In this case your copyright html is probably part of a template and changing it's html is as easy as changing the template. But what about changing things in editable parts of the template? What if you needed to change the color or padding around all your paragraphs? They are in editable areas that won't update with the template. You would have to go to every paragraph on every page of your site and change it. A very time consuming, monotonous task. With CSS you only need to change one place in one file!

CSS is a huge topic, i suggest you get a book or check out some online sites to learn more.

 

[boulef]

You are a real life saver. The more you talk, the more possibilities I see with CSS. As a matter of fact I have 2 books on CSS that I am reading like crazy. I also invest in Total training dvd but I would have done a better investment by just spending most of my days here. For every problem I have encountered, there is a fix here. I will spend more time looking into ways of making CSS work best for me.

Thank you and I really appreciate the help.

Cheers.

 

[wiser3]

Here's a site that's an example of the power of CSS:

http://www.csszengarden.com/

The opening design is rather plain, but notice the "Select a design" area in the right column. Select one and the look will completely change. There are hundreds of different desings in the archives. The amazing thing is that for every design uses the exact same html! It really show off how dramatically CSS can be used to completely redesign a site by changing only one CSS file in an hour instead of rebuilding your site from scratch.