Brilliante Blog Layout – Coding The PSD File Into CSS and HTML

Step 7

So here’s the CSS code for the layout.

[html]
/* —————– Layout —————- */

.top {
background: transparent url(img/top-bg.gif) repeat-x;
color: #fff;
position: relative;
height: 71px;
}

.top-content,
.logo,
.featured,
#content,
.footer-content,
#bottom {
margin: 0 auto;
width: 950px;
}

.main {
width: 550px;
float: left;
}

.sidebar {
width: 350px;
float: right;
}

#content, .featured, #footer, #bottom {
clear: both;
}

#footer {
background: #1a1e27 url(img/footer-bg.jpg) repeat-x 0 0;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
[/html]

Important!

Sharp-eye readers might ask: “Why the top area needs a background image when we could achieve the same with CSS?” As we clearly did with the footer. Answer is: IE. My first try was CSS for the top area background and the white border, but IE was not rendering the hover state as I want it to.

As you can see, when hovering over, IE cuts the arrow with a dark blue line. So I replaced the CSS code with a background image and then all browsers agreed. ;)

Top Content

Inside the header tag, the top content area has the main navigation, RSS feed and the search field.

Main nav: the links here have the Frutiger font. We could use CSS sprites for this special font, or rendering with one of the font-linking services out there, or using Cufón. I’ll stick to this last option, since the CSS sprites technique won’t be practical for the future WordPress theme implementation.

So, what’s Cufón?

By definition, it’s a fast text replacement with canvas and VML – no Flash or images required. If you want to learn more about Cufón, check here.

Step 8

First, you download the Cufón YUI from here and save it to your “js” folder. Download the font (or free similar ones) from here. Then, go to the Cufón Generator and browse for your local font file with the following options…

Finally, click the Let’s Do This! button and download your font file.

Rename the file with the font name frutiger.font.js and drop it to your “js” folder. Open your index.html file and include the following lines of code before the tag.

[html]
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/frutiger.font.js" type="text/javascript"></script>
<script src="js/func.js" type="text/javascript"></script>
[/html]

This is the correct order for the script tags: first the Cufón YUI, the font file next, and your func.js file at the end. Create this last file, we’ll need it later.

Step 9

Right after the opening div for “header” type this:

[html]
<div class="top">
<div class="top-content">

<ul>
<li class="first selected"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

</div><!– .top-content –>
</div><!– .top –>
[/html]

As we saw earlier, we’ll be needing “inner” sections in the markup (in this case, “top-content“) to accomplish the centered 950px wide content within the “fluid” background all along the viewport.

Step 10

Let’s code the CSS for this section.

[html]
/* —————– Top —————- */

.top-content ul {
float: left;
height: 42px;
margin-top: 29px;
}

.top-content li {
margin: 0 7px;
line-height: 14px;
height: 42px;
list-style: none;
float: left;
height: 42px;
display: inline;
}

.top-content li.first {
margin-left: 0;
}

.top-content li a {
color: white;
text-decoration: none;
height: 42px;
display: block;
cursor: pointer;
}

.top-content li.selected, .top-content li a:hover {
background: url(img/nav-arrow.gif) no-repeat scroll center bottom transparent;
}
[/html]

Here we floated our unordered list to the left, gave margins to the items, except the left margin on the first one, and applied the arrow image for the selected and hover state.

Note we don’t need to type url(../img/image.gif) with the dots before the image folder, because we already structured our images folder inside the css folder.

Step 11

Open the func.js file to style the links with Cufón.

[html]
Cufon.replace(‘.top-content a’);
[/html]

Here’s what the website should look like so far:

RSS feed: select the RSS icon and the text like this:

Step 12

Repeat the Photoshop steps we learnt in step 3 to export our images. We’ll name it feed.gif. The same for the search input field and submit button area.

First, we’ll export the search background and name it search-bg.gif. Before doing this, be sure to disable the submit button/arrow like this.

Then, enable it back and select and export it with the name search-arrow.gif.

Step 13

Now, after creating the navigation, we’ll need to create another inner section for both the RSS and search sections. Back to the index.html file we’ll type the code for the inner block section after the navigation “ul” closing tag.

[html]
<div class="block">
<p><a href="#">Grab our feeds</a></p>
<form id="search">
<input type="text" name="" class="search_input" value="Search…" name="s" id="s" onfocus="if (this.value == ‘Search…’) {this.value = ”;}" onblur="if (this.value == ”) {this.value = ‘Search…’;}"/>
<input type="submit" name="" class="search_submit" value="Go" />
</form>
</div><!– .block –>
[/html]

The javascript code you see inline is for the simple “onfocus” event – you know, when you click on the word “Search” in the input field, the field clears itself. If we click outside, the word shows again.

Step 14

In the CSS, we float the “block” div to the right and position its descendent elements with the absolute property.

[html]
.block {
float: right;
height: 71px;
position: relative;
}

.block a {
position: absolute;
right: 221px;
display: block;
height: 71px;
line-height: 71px;
text-indent: -9999px;
background: url(img/feed.gif) no-repeat 0 0 transparent;
width: 127px;
height: 21px;
margin-top: 25px;
}

#search {
position: absolute;
top: 0;
right: 0;
float: right;
width: 169px;
background: url(img/search-bg.gif) no-repeat 0 0 transparent;
height: 41px;
padding-left: 35px;
margin-top: 14px;
margin-left: 17px;
}

.search_input {
background: none repeat scroll 0 0 transparent;
border: 0 none;
color: #1a1e27;
display: inline;
font: italic 15px Arial, sans-serif;
height: 24px;
margin-top: 7px;
text-transform: lowercase;
width: 144px;
}

.search_submit {
background: url(img/search-arrow.gif) no-repeat scroll center top transparent;
width: 15px;
height: 17px;
font-size: 0;
text-indent: -9999px;
border: 0;
cursor: pointer;
position: absolute;
top: 12px;
right: 7px;
}
[/html]

This is what we have so far:

Step 15

Export the logo image, selecting the separation lines on the right.

Step 16

Still inside the “header” we type:

[html]
<div class="logo">
<a href="#"><img src="css/img/logo.jpg" width="196" height="42" alt="Brillante – A Brilliant Website Design" /></a>
<p>A very short description about the website goes here. And that’s it!</p>
</div><!– .logo –>
[/html]

Step 17

Style the logo area.

[html]
/* —————– Logo —————- */

.logo {
height: 148px;
overflow: hidden;
}

.logo img {
margin: 62px 22px auto 42px;
float: left;
}

.logo p {
margin-top: 67px;
width: 229px;
float: left;
font: italic 15px/17px Georgia, serif;
color: #646464;
}
[/html]

Step 18

Last div inside header is for the featured content. In Photoshop, we’ll select the elements, first, by selecting the layer, and then, doing Cmd+Click (Ctrl+Click on the PC) on it to obtain the selection as shown in the screenshots. This way you’ll go faster with the image exporting process. Disabled the “Hire Us” text and background, select and export the banner with pencils featured.jpg. Enable back the button and export it as hireUsButton.gif. Finally, select and export the thumbnails (th1.jpg, th2.jpg, th3.jpg), just the pictures without the borders.

Step 19

In our index.html file we type the code for the featured area, after the logo div.

[html]
<div class="featured">
<div class="img">
<img src="css/img/featured.jpg" width="600" height="248" alt="" />
<p class="button"><a href="#">Hire us</a></p>
</div><!– .img –>

<div class="desc">
<h3>It&rsquo;s Brilliant!</h3>
<p>Brilliante, Lorem ipsum dolor sit amet, con-<br />sectetur adipisicing elit, sf sed dos eiusmod lorem ipsum dolot sit amto. It is brillaint!</p>
<div class="thumbs">
<a href="#"><img src="css/img/th1.jpg" width="73" height="61" alt="" /></a>
<a href="#"><img src="css/img/th2.jpg" width="73" height="61" alt="" /></a>
<a href="#"><img class="last" src="css/img/th3.jpg" width="73" height="61" alt="" /></a>
</div><!– .thumbs –>
</div><!– .desc –>
</div><!– .featured –>
[/html]

Step 20

The CSS for the featured content.

[html]
/* —————– Featured —————- */

.featured {
height: 248px;
overflow: hidden;
}

.featured .img {
position: relative;
margin-left: 1px;
}

.featured .desc {
background-color: #1d1f25;
width: 316px;
height: 208px;
padding: 21px 15px 19px;
overflow: hidden;
}

.featured .img,
.featured .desc {
float: left;
}

.featured .thumbs {
padding: 20px 13px 19px;
border-top: 1px solid #393939;
height: 61px;
}

.featured .thumbs a img {
margin-right: 31px;
}

.featured .thumbs a img.last {
margin-right: 0;
}

.featured .desc h3, .featured .desc p {
padding: 0 13px;
font-weight: normal;
}

.featured .desc h3 {
margin-bottom: 7px; /*PSD 18px*/
}

.featured .desc p {
margin-bottom: 18px; /*PSD 25px*/
line-height: 23px;
}

.featured .button a {
position: absolute;
left: 1px;
bottom: 20px;
background: url(img/hireUsButton.gif) no-repeat 0 0 transparent;
display: block;
text-indent: -9999px;
width: 107px;
height: 37px;
}

.desc h3 {
font-size: 30px;
}

.desc h3, .desc p {
color: #ededed;
}
[/html]

We’re coding this banner section with a fixed height, assuming it will have a javascript fading effect, showing different big images when we click on the thumbnails. The text there have the same overflow:hidden to limit the number of lines in the paragraph, avoiding extra content messing with the layout.

Note the “PSD” comments in the code. They’re just little reminders from the measuring process in Photoshop. In both, the Photoshop ruler and Firefox Web Developer ruler there are little discrepancies when measuring and positioning elements in the browser. (Pixel-perfect geeks stuff.)

Step 21

The title “It’s Brilliant!” here is using the Frutiger font. So we’ll include the h3 tag in the func.js.

[html]
Cufon.replace(‘h3’);
[/html]

The webpage at this point:

Step 22 – Content: Main

We’ll start coding the content area, focusing on the main section with the blog posts. We need to export the posts images without the borders (post-img1.jpg, post-img2.jpg, post-img3.jpg) and the separation lines sep.gif you see in between the Categories and the Date. Remember to zoom-in deeply enough to select both lines accurately. And the Read More button readMoreButton.gif.

Step 23

Here’s the html code for the main section, inside the content div.

[html]
<div class="main">
<h2 class="cufon-h2"><span>Latest from the blog</span></h2>
<div class="post">
<h3><a href="#">An Example of a Post Goes Here.</a></h3>
<div class="cat-date">
<span class="posted">Posted in: </span>
<em><a href="#">Category One</a>, <a href="#">Category Two</a></em>
<span class="sep">&amp;nbsp;</span>
<span class="date">Date:
<em><a href="#">08 April 2010</a></em>
</span>
</div><!– .cat-date –>
<div class="post-teaser">
<img src="css/img/post-img1.jpg" width="142" height="140" alt="" />

<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf sed dos eiusmod tempor incididunt ut labore et dolorea ab magna aliqua. Utlo enim ad minim veniam, quis nostrudaw exercitation ullamco laboris nisi ut aliquip ex ea commodo!</p>

<div class="readMore">
<span>Author: </span>
<em><a href="#">Mahmoud Khaled</a></em><br />
<span>Reaction: </span>
<em><a href="#">10 comments</a>, <a href="#">5 Pingback</a></em>
<input type="submit" name="" class="readMoreButton notext" value="Read More" />
</div><!– .readMore –>
</div><!– .text –>
</div><!– .post-teaser –>

</div><!– .post –>

<div class="post">
<h3><a href="#">Another Post from the Blog Goes Here!</a></h3>

<div class="cat-date">
<span class="posted">Posted in: </span>
<em><a href="#">Category One</a>, <a href="#">Category Two</a></em>
<span class="sep">&amp;nbsp;</span>
<span class="date">Date:
<em><a href="#">10 April 2010</a></em>
</span>
</div><!– .cat-date –>

<div class="post-teaser">
<img src="css/img/post-img2.jpg" width="142" height="140" alt="" />
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf sed dos eiusmod tempor incididunt ut labore et dolorea ab magna aliqua. Utlo enim ad minim veniam, quis nostrudaw exercitation ullamco laboris nisi ut aliquip ex ea commodo!</p>

<div class="readMore">
<span>Author: </span>
<em><a href="#">Mahmoud Khaled</a></em><br />
<span>Reaction: </span>
<em><a href="#">3 comments</a>, <a href="#">10 Pingback</a></em>
<input type="submit" name="" class="readMoreButton notext" value="Read More" />
</div><!– .readMore –>
</div><!– .text –>
</div><!– .post-teaser –>

</div><!– .post –>

<div class="post">
<h3><a href="#">It’s Brilliant. Yes, It Is!</a></h3>

<div class="cat-date">
<span class="posted">Posted in: </span>
<em><a href="#">Category One</a>, <a href="#">Category Two</a></em>
<span class="sep">&amp;nbsp;</span>
<span class="date">Date:
<em><a href="#">12 April 2010</a></em>
</span>
</div><!– .cat-date –>

<div class="post-teaser">
<img src="css/img/post-img1.jpg" width="142" height="140" alt="" />

<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf sed dos eiusmod tempor incididunt ut labore et dolorea ab magna aliqua. Utlo enim ad minim veniam, quis nostrudaw exercitation ullamco laboris nisi ut aliquip ex ea commodo!</p>

<div class="readMore">
<span>Author: </span>
<em><a href="#">Mahmoud Khaled</a></em><br />
<span>Reaction: </span>
<em><a href="#">No comments</a>, <a href="#">2 Pingback</a></em>
<input type="submit" name="" class="readMoreButton notext" value="Read More" />
</div><!– .readMore –>
</div><!– .text –>
</div><!– .post-teaser –>

</div><!– .post –>
</div><!– .main –>
[/html]

Each blog post here will have a h3 title, a metadata section for categories and date, the post excerpt and a Read More section with the author, number of comments and a button linking to the full single post.

As you see, we applied the “notext” class we defined in the CSS Resets for the Read More button.

Step 24

[html]
/* —————– Content —————- */
.post {
margin-bottom: 40px;
}

span.sep {
text-indent: -9999px;
background: url(img/sep.gif) no-repeat center top;
}

.cat-date {
margin-bottom: 10px;
}

.post-teaser {
overflow: hidden;
}

.post-teaser img {
margin: 0 11px 11px 0;
border: 1px solid #cacaca;
padding: 3px;
float: left;
}

.post-teaser .text{
padding-left: 160px;
}

.post-teaser .text p {
margin-bottom: 9px;
line-height: 23px;
}

.readMore {
border-top: 1px solid #bdbdbd;
line-height: 17px;
padding-top: 9px;
}

.readMoreButton {
background: url(img/readMoreButton.gif) no-repeat;
width: 110px;
height: 29px;
float: right;
cursor: pointer;
border: 0 none;
margin-top: -15px;
}
[/html]

Note we did the post images borders with CSS, that’s why we ignored them when exporting the images.

Again, we have to think about the future WordPress theme impelementation for the h2 titles. So we assign a class h2 class="cufon-h2" for the Cufón titles with the dark blue background. And the tag to avoid the default block background. In other words, we give the heading a “span” just to color the text background, not its whole width. This way, the titles will be rendered dynamically via CMS.

Step 25

The func.js file will need one more line.

[html]
Cufon.replace(‘h2’);
[/html]

Step 26

It’s time to style our main fonts.

[html]
/* —————– Fonts —————- */

h2.cufon-h2 {
margin: 50px 0 25px;
font-size: 26px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
}

h2 span {
background-color: #1a1e27;
padding: 1px 6px;
text-align: center;
}

h3 a {
color: #1a1e27;
font-size: 25px;
text-decoration: none;
font-weight: normal;
}

h4 {
color: #646464;
font-size: 20px;
margin-bottom: -5px;
font-weight: normal;
}

.author em {
font: italic 15px Georgia, serif;
color: #646464;
margin-top: -3px;
}

.cat-date a, .readMore a {
font: italic 14px/20px Georgia, serif;
color: #646464;
text-decoration: none;
}
[/html]

Step 27 – Content: Sidebar

Export the author’s photo (author.jpg), the dummy-banners (advertiseHere.gif) and the categories arrow/bullet (cat-arrow.gif).

Note we had to modified the Advertise Here picture selection, because it has 1px border around, and we’ll just use CSS to do this. In Photoshop: Menu Select > Modify > Contract > 1px.

Step 28

Right after the main div, we type the sidebar html code.

[html]
<div class="sidebar">

<div class="author">
<h2 class="cufon-h2"><span>About the author</span></h2>

<img src="css/img/author.jpg" width="99" height="99" alt="" />
<h4>Mahmoud Khaled</h4>
<p><em>Web &amp; Graphics Designer</em></p>
<p>Sectetur adipisicing elit, sf sed dos eiusmod tempor incididunt utto po Web and graphics designer!</p>
</div><!– .author –>

<div class="sponsors">
<h2 class="cufon-h2"><span>Sponsors</span></h2>

<a href="#"><img src="css/img/advertiseHere.gif" width="164" height="164" alt="" /></a>
<a href="#"><img class="last" src="css/img/advertiseHere.gif" width="164" height="164" alt="" /></a>
</div><!– .sponsors –>

<h2 class="cufon-h2"><span>Categories</span></h2>

<ul class="cat">
<li><a href="#">Category Number One</a></li>
<li><a href="#">Photoshop Designs</a></li>
<li><a href="#">Identity Branding &amp; Logo Design</a></li>
<li><a href="#">Giveaways, and Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Another Category Goes Here</a></li>
</ul>
</div><!– .sidebar –>
[/html]

Step 29

The author’s name and the category links have the Frutiger font. Let’s include both in the func.js file.

[html]
Cufon.replace(‘h4’);
Cufon.replace(‘.cat a’);
[/html]

Step 30

Here, we style the picture borders with CSS one more time.

[html]
/* —————– Sidebar —————- */

.author img {
float: left;
margin: 0 10px 10px 0;
border: 1px solid #cacaca;
padding: 3px;
}

.sponsors img {
margin-right: 13px;
}

.sponsors img.last {
margin-right: 0;
}

.cat li {
list-style: none;
}

.cat li a {
text-decoration: none;
color: #1a1e27;
background: url(img/cat-arrow.gif) no-repeat left center transparent;
padding-left: 23px;
font-size: 16px;
line-height: 42px;
}

.cat li a:hover {
text-decoration: underline;
}
[/html]

This is how our awesome webpage look like so far:

Footer

We won’t apply Cufón in the footer headings. Here we’ll use the text-replacement technique, using images for the titles and hiding the heading text with CSS.

Step 31

In Photoshop, disable the footer background layer, so there’s nothing behind the titles, just transparency, and select one by one, as pixel-perfect as you can, including the border lines at the bottom. Export them in PNG format (txt-links.png, txt-flickr.png, txt-twitter.png).

Step 32

Select the footer background like this, just the blue area (there’s a subtle linear gradient). Export it as JPEG (footer-bg.jpg).

Step 33

And finally, the Twitter bird. Select it with Command+Click on the layer image (Control+Click on a PC). This way, you’ll have the bird icon selected like this…

Step 34

We need the footer background showing all along the browser width, that’s why we create the footer-content div inside the footer.

[html]
<div id="footer">
<div class="footer-content">

<div class="links">
<h2 class="notext-footer txt-links">Links worth spreading</h2>
<ul>
<li><a href="#">Link Number One Goes Here</a></li>
<li><a href="#">Link Number Two Should Go Here</a></li>
<li><a href="#">Another Link would Go Here</a></li>
<li><a href="#">And Maybe Yet Another One</a></li>
<li><a href="#">Awakening Website Design</a></li>
<li><a href="#">Mahmoud&rsquo;s Design Blog And Portfolio</a></li>
</ul>

</div><!– .links –>

<div class="flickr">
<h2 class="notext-footer txt-flickr">Watch us on flickr</h2>

<a href="#"><img src="css/img/flickr-th1.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th2.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th3.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th4.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th5.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th6.jpg" width="74" height="74" alt="" /></a>
</div><!– .flickr –>

<div class="twitter">
<h2 class="notext-footer txt-twitter">Tweet tweet!</h2>

<p><em>&#8220;Lorem ipsum dolor sitet ameto, is simply an example of a tweet. And probably some more blahs shoud actually go here which works as a tweet!&#8221;</em></p>

<p class="cufon">10 hours ago. From <a href="#">TweetDeck</a><br />
In reply to <a href="#">@MahmoudKhaled</a></p>

<h4><a href="#">Follow us on Twitter!</a></h4>
</div><!– .twitter –>
</div><!– .footer-content –>
</div><!– #footer –>
[/html]

Step 35

Here’s the h2 tag class notext-footer (we included this one at the very beginning on the CSS Resets), because there’s no need for the Cufón magic this time. Followed by new special classes for each title (txt-links, txt-flickr, txt-twitter).

[html]
/* —————– Footer —————- */

h2.notext-footer { height: 38px; }

h2.txt-links { background-image: url(img/txt-links.png) }
h2.txt-flickr { background-image: url(img/txt-flickr.png) }
h2.txt-twitter { background-image: url(img/txt-twitter.png) }

#footer {
overflow: hidden;
height: 288px;
}

.footer-content {
padding-top: 28px;
}

.footer-content h2 {
margin-bottom: 17px; /*PSD 22px*/
}

.links, .flickr, .twitter {
float: left;
width: 281px;
margin-right: 53px;
}

.twitter {
margin-right: 0;
}

.links li {
padding: 0;
margin: 0;
}

.links li a {
text-decoration: none;
color: #ededed;
font-size: 15px;
line-height: 29px;
}

.flickr a img {
margin-right: 10px;
border: 3px solid #646464;
}

.twitter {
background: url(img/twitter.png) no-repeat scroll 100% bottom transparent;
}

.twitter p, .twitter a {
color: #ededed;
}

.twitter a {
text-decoration: none;
}

.twitter h4 a {
color: #818181;
font-size: 20px;
}

.twitter em {
font: italic 15px Georgia, serif;
}
[/html]

Step 36

Well, there’s two more elements using Cufón here: the links and the Twitter text. Func.js:

[html]
Cufon.replace(‘.links a’);
Cufon.replace(‘.twitter p.cufon’);
[/html]

We could group all the Cufon.replace tags into one, like this:

[html]
Cufon.replace(‘h3, h4, .cat li a, .links li a, .twitter p.cufon, .top-content li’);
Cufon.replace(‘h2’);
[/html]

Note I’m extracting the “h2” tag from the group because it would mess everything on IE :-(

The webpage so far.

Step 37 – Bottom

Finally, the bottom area. There’s no need for nested divs this time, because no special background is showing.

[html]
<div id="bottom">
<ul>
<li class="selected"><a href="#">Home</a>&amp;nbsp;|&amp;nbsp;</li>
<li><a href="#">About Us</a>&amp;nbsp;|&amp;nbsp;</li>
<li><a href="#">Services</a>&amp;nbsp;|&amp;nbsp;</li>
<li><a href="#">Portfolio</a>&amp;nbsp;|&amp;nbsp;</li>
<li><a href="#">Blog</a>&amp;nbsp;|&amp;nbsp;</li>
<li><a href="#">Contact</a></li>
</ul>

<p>Copyright 2010 – <a href="#">Brilliante</a> – All rights reserved</p>
</div><!– #bottom –>
[/html]

Step 38

And its CSS.

[html]
/* —————– Bottom —————- */

#bottom {
height: 70px;
}

#bottom ul {
float:left;
}

#bottom li {
float:left;
list-style:none;
}

#bottom li a {
text-decoration:none;
color: #1a1e27;
}

#bottom li.selected a, #bottom li a:hover, #bottom p a {
text-decoration:none;
color: #646464;
}

#bottom p {
float:right;
}

#bottom ul, #bottom p {
line-height: 70px;
}
[/html]

We use the line height equal to the div height to center the elements vertically. Here’s our final website showing in a decent browser. ;)

IE CSS

Before jumpt into CSS fixing for Internet Explorer, there’s a little piece of code we need to add to our markup. This will help to prevent some IE speed and rendering issues with Cufón.

Step 39

Include this before the tag.

[html]
<script type="text/javascript"> Cufon.now(); </script>
[/html]

Step 40

Create the ie.css file inside your css folder, then call it from your markup with a conditional comment, right after the style.css line.

[html]
<!–[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" /> <![endif]–>
[/html]

You might be familiar with this one. This line here is adding some extra css rules only if the browser is Internet Explorer 6 or below.

There’s a good article here about conditional comment rules for your css files. Or if you wish to go really deep into css debugging, read about the In-CSS hacks technique.

We didn’t use HTML5 tags for this website (except for the Doctype, of course), but if you wish to ensure IE compatibility with HTML5 elements, I suggest you to read about these two awesome javascript frameworks: Modernizr and HTML5 Shiv.

Step 41

In our ie.css file, we group all the divs with margins on both sides, left and right, to prevent the (in)famous IE double-margin bug.

[html]
.readMoreButton,
#search,
.featured .img,
.featured .thumbs a img,
.featured .thumbs a img.last,
.featured .desc h3,
.top-content ul li,
.sponsors img {
display: inline;
}
[/html]

Step 42

First IE bug you see is on the top navigation links, aligned vertically. If you give them the CSS property “inline-block” they would show like we mean to, horizontal aligned.

[html]
.top-content li a {
display: inline-block;
}
[/html]

Step 43

We push down the search field a couple of pixels, because it was a little too high.

[html]
.search_input {
padding-top: 3px;
}
[/html]

Step 44

The Read More button was way too much on the right side, even trespassing on the sidebar, so we give it some more room from the right till it falls back in the blog post position, and pull it higher with negative margin-top.

[html]
.readMoreButton {
right: 190px;
margin-top: -35px;
}
[/html]

Step 45

We fix the padding for the h2 headings with the dark blue background.

[html]
h2 span {
padding: 3px 6px 1px;
}
[/html]

Step 46

Stretch the line-height for the category links on the sidebar.

[html]
.cat li a {
line-height: 40px;
}
[/html]

Step 47

Reduce the right margin for the three columns on the footer in 1px.

[html]
.links, .flickr, .twitter {
margin-right: 52px;
}
[/html]

And that’s it! It wasn’t that painful, was it?

IE PNG Fix

If you do some research about how to fix the PNG-images bug on IE, you’ll see there’s a ton of options. Here’s how our PNG footer headings look in Internet Explorer:

Step 48

We’ll use the “BelatedPNG” hack. Download the belatedPNG.js file to your js folder and include this conditional comment in your index.html, before the Cufón scripts. So both the conditional comments for IE css and PNG will be there together, just for the sake of simplicity.

[html]
<!–[if IE 6]>
<script src="js/belatedPNG.js"></script>
<script>
DD_belatedPNG.fix(‘*’);
</script>
<![endif]–>
[/html]

Cufón and the link selectors issue on IE

If you check the webpage on a Windows machine at this very point, you’ll note something’s missing with the links styling: top navigation links, sidebar category links and footer links and Twitter paragraph. Oh yeah, we already include this rules on our func.js file and the design looks amazing on Firefox, Safari, Chrome, etc.

Obviously Cufón and IE aren’t very good friends. No, they don’t hang out or have a beer together, when you try to apply custom font types on “a” tags for links. To be completely honest, I googled for this, and I found that including a Javascript framework (as jQuery) to our design helps IE to render link tags as we meant to. We’re not using jQuery in our website to create beautiful animations or effects, just to make IE a little smarter.

Step 49

We only need to include the jQuery library from the Google CDN in our mark-up before the Cufón scripts.

[html]
<!– jQuery makes Cufon rendering links properly on IE –>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
[/html]

I downloaded the jQuery file in the js folder and added it in the last line here (as fallback), just in case I want to work with this website offline.

Here’s how the website should look on IE6 now.

Cross-Browser Testing

I recommend you to test your websites in different browsers and platforms. A cool online tool for this is BrowserShots. In this case, you should deploy your website somewhere and paste the URL in the text field. Check or uncheck the different Browser/Platforms combinations to see the website screenshots.

Validate Your Code

Normally, I start with the Photoshop slicing and exporting, then the whole HTML and finally the CSS. It’s a good practice to validate your code when you finish any of them. In this tutorial I walked you through working with markup and presentational layers at once, and we didn’t have the chance, yet.

Step 50

So, go to W3C and validate your HTML…

…and your CSS.

Step 51 – Compress Your CSS and order the properties

Once your website is on production, working on a server, you would like to save some HTTP requests by minifying your CSS files. Here’s another handy online tool for this.

Step 52 – Minify your Javascript files

In our case, there’s no need for this, because all our javascript files are already compressed, but, if you wish to add some custom js flavors to the design, well, here you have two more online tools:

• JavaScript Compressor
• Online Javascript Compression Tool

Step 53 – Don’t forget the “alt” tags

Yeah, almost forgot about it. Doing some quick revision, I found we didn’t comment our alt tags in the images, except for the logo. I leave this to your own taste. Have in mind that completing the alt tags is a good SEO practice.

Step 54 – Create the FavIcon

Last, but not least, we’ll use html-kit to produce our “favicon”. We need a square image to upload, in this case I cropped the”featured.jpg” image with Photoshop.

Save the generated image (.ico file) in the website root, and include the following piece of code in the header, right before the css lines.

[html]
<link rel="shortcut icon" href="favicon.ico">
[/html]

Here’s how your favicon should look on a couple of browsers:

Be sure to deploy your website somewhere, favicons won’t show on your local machine.

Fork this project on Github!

If you liked this project and want to experiment with its last version to date, or if you discover and fix any other cross-browser bug, please let me know in the comments. Or, if you do version control with Git in your Mac or PC for development, you may also download or fork this project on Github.

Thanks!

Wow! That was a lot of reading, wasn’t it? Well guys, thank you and hope you enjoyed this tut. See you all in the 3rd part for the WordPress theme development!

Author: Taty Grassini

Taty Grassini is a 33 years old, freelance web developer from Argentina, based in Barcelona. He witnessed the table to CSS layouts transition and will see the day when HTML5 finally replaces Flash. He loves web standards, good jazz and foamy latte. He hates IE6. You may find him at Twitter and Github.