Conversion from HTML to XHTML

At Ecommerce Partners.net, we (HTML Production Department) were producing html codes for websites using tables for layout. Ah, good old tables! Then about three months ago, XHTML was made the standard in our company. This implied all our websites are now coded using XHTML, no HTML at all.

Well, that’s no problem! All we need to do is:
1. add the right Document Type Definitions;
2. close all our tags including empty tags;
3. all tags should be in lowercase; and
4. all tags must be properly nested

We could handle this for sure.

Then we were given a fifteen page handout on Using XHTML and CSS. This handout outlined that we have to validate our XHTML and CSS, no inline styles and no use of table for layout purposes. Also, we were stripped of using non-semantic tags such as <br />, &nbsp and the use of spacer.gif’s. As far as I am concerned, I was feeling dizzy. How are we going to do this?

My first project using XHTML and complying with all the given instructions took me about twelve hours to code just the home page. It was so difficult to work with <div>’s. I was so tempted to use table. Then, I decided to know them in and out so that I could predict their behavior. The result – "htmling" web pages wasn’t as much fun ever before. So, here are the tricks that worked for me.

The tricks of the trade that I learned were:

1. Use Web Developer’s Tool in FireFox. It’s a blessing!

2. When you receive a psd, slice your psd into blocks (each block representing a div). Note the width, padding, border and margin values for each block. Now start "htmling" by laying out div’s exactly as your blocks on your psd. Specify width, padding, border and margin for each div. When you specify width for a div, subtract padding, border and margin from the width. Please note that Internet Explorer calculates the width wrong. And so, you might need to use the box model hack. Just do a search on the internet for "box model hack" and you will find the required hack.

3. Always use a container div that holds all the rest of the divs. In the stylesheet, specify "position: relative" for this container div. Trust me, it will be useful when you start using absolute positioning for any element on the web page.

4. In order to center a div horizontally, specify "margin: auto" for left and right sides in your stylesheet for the concerned div.

5. Whenever you use float property, always specify width as well.

6. To make two columns using div, follow the following hypothetical example.
#div1 {float:left; width:50%;}
#div2 {margin-left:51%; width:49%;}

7. To make two columnar divs, say div1 and div2, stretch vertically equal to each other. All we can do is make it appear that two div are stretching vertically equal to each other. For reference, look at the source code for ECPGroup.net.

Here, the CSS declaration that is making it work is:
#mainDiv {width:721px; background: #FFF url(../images/content_bg.gif) repeat-y 0% 0%;}

Yes, as far as my knowledge goes we need to use background image for the main container div that holds the two columnar divs – div1 and div2. Or else, you can use min-height to make two columns stretch vertically equal.

8. When you use lists and if you have a background image for your individual list items, sometimes Internet Explorer puts extra padding in between two list items. In order to remove this extra padding, all you need to do is remove white space in your code between the two <li> tags. So, basically just put the entire section of <ul> or <ol> tags in one line removing all the white space in between the tags. Or, make <li> inline element by declaring "display:inline" in CSS.

9. Validate both the XHTML and CSS. It’s very helpful.

10. Finally, table is not the bad guy. Do not throw out tables completely. Tables are still perfectly all right to use where you have columnar data to display. Just don’t use table solely for layout purposes.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.