Cross-Browser issues when creating layout

[Boscardin]

Okay, so I'm having some major cross-browser compatibility issues. The layout works fine in both Firefox and Opera and this is what it should look like:
image1 (http://i19.tinypic.com/6sqrjf7.gif) image2 (http://i12.tinypic.com/81hd6xj.gif)

However, here are my issues with other browsers:
IE6 (http://i13.tinypic.com/6xahbao.gif)
Safari (http://i5.tinypic.com/8adtx5v.gif)
IE7 (http://i13.tinypic.com/8375vu1.gif)
IE5 (http://i6.tinypic.com/8b3widg.gif)

Also, both the stylesheet and coding have been validated.

You can all see the picture if you go to BrowserShots.org (http://www.browsershots.org/) with the url: http://clogged.boscardin.org/

I've racked my brain in trying to do this without hacks, except I don't know what to do here.

This is the main link: http://clogged.boscardin.org/
This is the style link: http://clogged.boscardin.org/wp-content/th...ewlay/style.css (http://clogged.boscardin.org/wp-content/themes/newlay/style.css)

Please, any help would be greatly appreciated. Thank you!

[_Aerospace_Eng_]

Looks like you are dealing with browser default margins and padding. Add this to the top of your CSS
* {
margin:0;
padding:0;
}
The * is called the universal selector. The above CSS sets all margins and/or padding to 0 for all elements, this way you get a better starting point. Adding this to your current stylesheet seems to fix most of your issues.

Now however you will need to manually add margin and/or padding to wherever you need it.

[Boscardin]

Okay, so the IE part lines up now. Safari still has that break between the "tabs" and the main content.

Also, I would like to be able to get rid of that black line when viewing in IE. I have a feeling I might have to use some relative positioning and z-indexes, but I figure if Firefox and Opera can do it... so can IE?

[_Aerospace_Eng_]

Well Firefox shouldn't be doing what its doing since the li's are display inline. Try this for your menu css instead
#menu ul {
padding:0;
margin: 6px 0;
list-style-type: none;
}

#menu li {
margin:0;
padding:0;
float:left;
padding: 6px;
position:relative;
top:2px;
}

#menu a:link, #menu a:visited, #menu a:hover {
color: #ffffff;
text-decoration: none;
}

#menu li#selected {
background-color: #ffffff;
color: #2a4461;
border: 1px solid #000000;
border-bottom:0;
padding-bottom:7px;
top:1px;
}

#menu li#selected a:link, #menu li#selected a:visited, #menu li#selected a:hover {
color: #2a4461;
text-decoration: none;
}
Also add clear:both; to your #container CSS.

[Boscardin]

It works a lot better now, thank you! It doesn't work in some of the older browsers like IE5 or Safari 1, but I figure that's not too much a problem to worry about.

Thank you for your help!