First, see fixing common validation problems.
Then see these additional steps tips:
<font>. How to define or to replace
<font> with CSS?
The purpose of the deprecated
FONT element is to specify typeface, color and size of the enclosed text. This functionality has been offloaded from HTML to CSS. The FONT element can be directly replaced with a
SPAN element that includes the same style information:
<p><font color="blue" face="Helvetica"> A really <font size="+1">big</font> shoe. </font></p>
<p><span style="color: blue; font-family: Helvetica, sans-serif;"> A really <span style="font-size: larger;">big</span> shoe. </span></p>
... or even more concisely:
<p style="color: blue; font-family: Helvetica, sans-serif;"> A really <span style="font-size: larger;">big</span> shoe.</p>
This is appropriate usage for a local change to the font. However, this is not the best use of styles; the strength of CSS lies in the ability to gather text and other styling into logical groupings that can be applied across a document, without repeating the specific styling on every element that requires it.
More on conversion of <FONT>: W3C Quality Assurance tip for webmaster: Care With Font Size, Forget <font> and use CSS
align="center". How to align with CSS?
The CSS1 text-align property specifies how text or inline elements (like an image) are aligned within an element.
<p style="text-align: center;"><img src="..." width="..." height="..." alt="..."></p> // will center the image inside the <p> element
margin-left: auto; margin-right: auto; properties will center a block-level element within its containing block. Defining margin-left and margin-right is for block-level elements. When both
auto, they are set to equal values, thus centering a block-level element within its parent.
CSS1 horizontal formating
Worth mentioning is the excellent tutorial:
Centring using CSS by David Dorward
Also Interactive demo on CSS horizontal alignment and horizontal formating by Gérard Talbot
How to replace
bgcolor? How to colorize background with CSS?
bgcolor attribute can be replaced with CSS1 background-color property.
If you have
<td bgcolor="green" width="150"> ... content here ... </td>
... can replace it with:
<td style="background-color: green;" width="150"> ... content here ... </td>
How to upgrade markup code in specific cases:
What if I use
<embed> for Flash or for a video?
Explaining in details how to do this would go beyond the scope of this article. Nevertheless, we recommend the following articles so that you can have a Flash movie or a video in your web page and, at the same time, have your page validate.
- Embedding Flash While Supporting Standards by Drew McLellan, November 2002
- Bye Bye Embed: Embedding a video by Elizabeth Castro, July 2006
- Embedding Object with valid code by MediaWiki, March 2007
- Embedding flash without <embed> by Ian "Hixie" Hickson, April 2004
- Flash Embedding Cage Match by Bobby van der Sluis, February 2006
What if I use
We recommend these resources:
- Java applet using <object> tag by Shayne Steele
- HTML 4.01 on Including an applet
- HTML 4.01 on Including an object
Worth mentioning here: Java Upgrade Guide: Migrating From the Microsoft VM for Java to the Sun JRE http://java.sun.com/j2se/1.4.2/docs/...ide/index.html "after December, 2007, Microsoft will no longer support or provide a Java implementation with any of its products. (...) Those running applets in the Internet Explorer web browser will need to download and install an alternate VM."
What if I use
Marquee can be replaced with content string inside a
Cross-browser and web standard compliant Stock Ticker example by D. Rosenberg
Comprehensive web standard compliant alternative to <marquee> by D. Rosenberg
Firefox 2 and Firefox 3 support the non-standard
<marquee> element. On the other hand, Firefox users can disable such support by customizing an userContent.css
What if I have
Then use HTML 4.01
<OBJECT data="audiofile.wav" type="audio/wav" ...></OBJECT>
See this DevEdge article for information on rendering a sound OBJECT invisible within the page.
Web page background sound often slows down considerably web page loading; like the text effects above, music or sound accompanying a page is seldom appreciated. According to the survey page What we really hate on the web, 41.9% of survey respondents will avoid sites that automatically play music; 71.1% strongly dislike sites that automatically play music.
Why Playing Music on your Web Site is a Bad Idea by A. Gulez
Step 3: Validate your CSS code
Where can I validate my CSS code?
Free Online CSS validation services:
Built-in report of CSS parsing errors in modern browsers:
- Error console in Firefox 3. From the menu, Tools/Error console; the error console reports CSS parsing errors.
- Error console in Opera 9.5. From the menu, Tools/Advanced/Error console; the error console reports CSS parsing errors.
- Error console in Safari 3. From the menu, Develop/Show Error console: the error console reports CSS parsing errors.
- Error console in Icab 4. From the menu, Preferences/Show All/Other/Error report: the error console reports CSS parsing errors.
There are also other possible and excellent debugging CSS and DHTML tools, useful tools (Addons, Toolbars, Extensions) for developers. Here is a list of recommendable and free debugging tools from http://css.tests.free.fr/