Coding for consistency across browsers

Hi Everyone:

Please help me out if you can.

Like most novices, I’m having a hard time getting my site to render correctly across the most commonly used browsers.

I am running my site on Wordpress and have modified an existing theme.

I have run W3C’s CSS and XHTML validators to correct most problems. There were still a couple issues that the validator pointed out, but I didn’t know how to correct.

Right now, my biggest issues is with Internet Explorer. I know that IE does not meet most standards that modern browsers do, but at the same time the majority of the viewers of my site use IE.

Firstly, my site is supposed to look like it does in Firefox:

This is how it looks in IE:

The 3 big issues w/ IE

  1. The logo at the top right is not spaced correctly on the vertical plane. It should be lower than where it is and the gap between it and the menu bar should be smaller.

  2. The menu bar itself is stretched. It appears to be shifted to the right instead of parallel with the body content. In addition, there is part of the bar missing to the left of the first button “Home.”

  3. The Lifestream box on the right has 2 extra scroll bars, a horizontal and a vertical one, which do not belong there.

Please help.

Thank you.

remove
#lefta {
float:left;
width:10px;
}
from stylesheet,

then remove
top:80px from #top

then remove or adjust
margin-top: 100px from #righta
and
margin-top:100px from .ppost background-image

replace #nav with the following:
#nav
{
background-image: url(images/nav.png); POSITION: relative;
list-style-type: none;
margin-top: 30px;
width: 797px;
background-repeat: no-repeat;
height: 45px;
left: 0px;
margin-left:0;
padding-left:10px;

}

change overflow on #righta to overflow:hidden (to get rid of the scrollbars around twitter).

That did it! I truly appreciate your help.