ems base their font size off the parent, (without looking at the code) it would suggest that you have a font size set elsewhere on a parent which would make the fonts differ 
Hi,
I am taking a look at it but I am a little confused by the background image here:
Not sure what is going on with the five different levels.
The first part is the left side of the nav (over state) 9 x 60px (background-position:0 0)
The next part of the image image the right side (normal state) (background-position:100% -60px)
Then we have the left side normal state (background-position:0 -120px)
Followed by the main repeating section that is repeated all the way along (background-position:0 -180px)
Finally the over state of the links (background-position:0 -240px)
Combined into one image like this they are only 1k in file size and one handshake to the server and results in instant rollovers and a nav drawn immediately.
They are then attached to relevant hooks in the mark up to produce the whole nav while trying to avoid adding extra elements just for background.
The image under the text would preferably be a background image as you donât want decorative images in the html mark up itself.
Hereâs a demo and explanation that I put up for another thread a couple of weeks ago with a strange looking image that the OP wanted rollovers for.
The over state of the image is include in the same image and then you just swap the background position on hover.
Now I am on to what I think will be the hardest part. The green bar and main content.
http://bloggerfusion.com/bfsample.png
Could be interesting.
Your code was pretty clean anyway itâs just that you tended to use a div when there was a more semantic element available.
I think youâre doing fine
I thought about the multiple testimonial thing so I made quote a class and sbTestimonial a container for all the quotes, if that makes any sense.
Overall would you say I am doing an okay job with this? I am trying to not use DIVs so much but it is going to take a little practice.
You are awesome, thanks for your help.
Yes itâs looking pretty good now
I think you can still save a div and also improve semantics with the testimonial by doing this.
<ul class="adBlock">
<li><img src="http://dev.bloggerfusion.com/images/125ad.png"></li>
<li><img src="http://dev.bloggerfusion.com/images/125ad.png"> </li>
<li><img src="http://dev.bloggerfusion.com/images/125ad.png"></li>
<li><img src="http://dev.bloggerfusion.com/images/125ad.png"> </li>
</ul>
[B]<blockquote class="sbTestimonial">
<p>We always strive to surpass client's expectations, help them communicate their business ideas effectively to their target audience via an effective.</p>
<p><cite><span>George C.</span> - IBlogEverything.com </cite></p>
</blockquote>[/B]
I also though a class would be better because you may want to have more than one testimonial.
.sbTestimonial {
font-size: .875em;
margin: 0 0 5px 0;
border-left: 4px solid #e4e5e1;
padding: 0 0 0 8px;
font-style: italic;
line-height: 1.4em;
}
.sbTestimonial p{margin:0 0 10px}
.sbTestimonial cite {
padding: 10px 0 0 0;
font-style: normal;
color: #aac33c;
}
.sbTestimonial span {
font-weight: bold;
color: #ff4242;
}
We use the blockquote element for the testimonial rather than a div along with the cite element for the author (although html5 rather stupidly says we shouldnât use cite for the authors name so you can remove it if it worries you but hopefully they will see sense and change it back).
If you look at your html now to what it was before you can almost read it like a book now and it makes semantic sense rather than just divs and more divs. Itâs also easier to manage and to target because you have more elements to play with.
Lastly you still need to pull those conditional comments into the head of the page otherwise IE8 wonât like you.
New question. To code the block of ads on the right will I need to do each one separately in order to have them centered and evenly spaced?
I really appreciate it. I am trying to style the links in the header now. How do I make it so the links to not move on hover?
Believe it or not I do research before I ask here but I am stumpled.
Here is the site:
Here is the goal: http://bloggerfusion.com/bfsample.png
Thanks
There was no RSS feed in the div when you showed the page originally so I couldnât have known about it
You donât need an extra div anyway and why is everything a div?
Just add it in the same element.
I would do something like this.
.rss {margin-left:20px;}
#social span {display:none}
<p id="social"> <a href="http://twitter.com/bloggerfusion" title="@bloggerfusion"><img src="http://bloggerfusion.com/images/twitter.png"><b>@</b>bloggerfusion</a> <span>|</span> <a class="rss" href="#" title="RSS Feeds"><img src="http://bloggerfusion.com/images/rss.png">RSS Feeds</a></p>
Full code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" >
<meta name="#" keywords="#">
<meta name="#" description="#">
<title>Blogger Fusion</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<style type="text/css">
/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End Reset */
html, body {
height: 100%;
background: #f0f2eb;
font-family: arial, helvetica, serif;
font-size: 100%;
}
#wrap {
min-height: 100%;
width:940px;
margin: 0 auto;
}
* html #wrap {
height:100%
}
#main {
overflow:auto;
padding-bottom: 45px; /* must be same height as the footer */
}
#social {
background: #f0f2eb url(http://bloggerfusion.com/images/socialbg.png) no-repeat;
width: 265px;
height: 31px;
float: right;
color: #f0f2eb;
padding:5px 0 0 15px;
}
#social img {
margin: 0 8px 0 0;
vertical-align:middle
}
#social a {
color: #f0f2eb;
text-decoration: none;
font-size: 81.3%;
}
#social a:hover {
color: #e5f798;
}
#social a b {
color:white
}
#social a:hover b {
color:red
}
/* Footer CSS */
#footer {
position: relative;
margin-top: -45px; /* negative value of footer height */
height: 45px;
clear:both;
background: #333;
}
#footerText {
width:940px;
font-size: 81.3%;
margin: 0 auto;
padding: 15px 0 0 0;
}
#footerText a {
color: #f0f2eb;
text-decoration: none;
}
#footerText a:hover {
color: #e5f798;
}
#footerLinks li a {
margin: 0 20px 0 0;
display:inline;
float: left;
text-align:left;
}
#footerCopy {
float: right;
color: #b0aa98;
}
/* Opera Fix */
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
.rss {margin-left:20px;}
#social span {display:none}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css /> <![endif]-->
</head>
<body id="index">
<div id="wrap">
<div id="main">
<p id="social"> <a href="http://twitter.com/bloggerfusion" title="@bloggerfusion"><img src="http://bloggerfusion.com/images/twitter.png"><b>@</b>bloggerfusion</a> <span>|</span> <a class="rss" href="#" title="RSS Feeds"><img src="http://bloggerfusion.com/images/rss.png">RSS Feeds</a></p>
</div>
</div>
<div id="footer">
<div id="footerText">
<div id="footerLinks">
<ul>
<li> <a href="#">All Jobs</a> </li>
<li> <a href="#">Post A Job</a> </li>
<li> <a href="#">Contact Us</a> </li>
</ul>
</div>
<div id="footerCopy"> © Blogger Fusion | Design by <a href="http://www.andycrofford.com" title="AndyCrofford.com">Andy Crofford</a> </div>
</div>
</div>
</body>
</html>
You still have this code in your stylesheet which needs to be placed as shown in my example.
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
Itâs very important to remove that and place it as shown or IE8 will break.
Try not to go div crazy but use the correct and most semantic element for the job in hand.
You seem to have added a top bar div and a header div and all are inside other divs. make sure that you do actually need them as your page is already getting very nested looking. 
Wow, thank you so much. This is exactly the kind of help I need.
I am also struggling with font size. I know PCs are 96DPI, which I am using. But how come I have font size set in âsocialâ to 1.125em and the same for the footer but the one in the footer is much bigger?
I have no idea where it is basing the font size off of in the footer.
Thanks again for your awesome help.
Andy