Part 1: Slicing the PSD and Creating the XHTML

Part 2: CSS

I won't lie to you. This video is a bit boring. It just isn't fun to watch someone enter margin values for thirty minutes. But it's essential.

Part 3: Implementing a Bit of Javascript

Part 4: Kicking IE6's Butt

Could we really call ourselves web developers if we didn't have to fight with IE6? And is it a coincidence that "6" is also the number associated with the devil? Who knows.

Mostly, the site looks just fine in IE6, but we should change a few quirks. Create a new stylesheet and call it "ie6.css". Place it in your CSS folder. Then paste in the following.

#container #mainContent #tier2
{
	margin-bottom: 273px !important;
}

#tier3 #news
{
	position: relative;
	left: .56em;
}

#header
{
height: 158px;
}

#header #login
{
	top: 1em;
	right: 1.5em;
}

There's nothing that we really need to go over. Mostly, I'm adjusting the positioning of a few elements.

The last step is to reference our new stylesheet in the head tag of our document.

    <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie6.css" />
    <![endif]-->

The PSD

The Website: 100% XHTML and CSS

I hope this helped you. Everyone has their own way of doing things; So I'd be interested to hear your thoughts. This tutorial was a huge undertaking. I'd appreciate a Digg if you found it to be beneficial.

This entry was posted on Saturday, January 2nd, 2010 at 8:59 am and is filed under PSD to XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.