Like I said, I didn't see any misalignment in Firefox, hence my question above. IE6 has some alignment problems and that looked like it was coming from the graphics.

ok so I made a test page where I uploaded the version of the site with the content area floated right and the nav wrapper with the overflow: auto.

http://lavabarrestaurant.com/test/index.php

This is what it looks like.

CSS code

#wrapper{
    margin-right: auto;
    margin-left: auto;
    width: 982px;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
}
#header{
    margin: 0px;
    padding: 0px;
    height: 297px;
    width: 982px;
}
#header_right_bg{
    background-image: url(images/layout1wslices_04.gif);
    text-align: right;
    min-height: 297px;
    color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-left: 265px;
    padding-right: 50px;
    padding-bottom: 0px;
    padding-left: 0px;
    background-repeat: no-repeat;
    margin-top: -297px;
    height: 297px;
}
#nav_bar{
    float: left;
    width: 241px;
    top: 0px;
    padding: 0px;
    margin: 0px;
    height: auto;
    background-image: url(images/layout1wslices_22.gif);
    background-repeat: repeat-y;
}
#content_area{
    background-image: url(images/layout1wslices_08_new.gif);
    width: 741px;
    max-width: 741px;
    min-height: 607px;
    background-repeat: repeat-y;
    position: relative;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 241px;
    padding-top: 25px;
    padding-right: 39px;
    padding-bottom: 39px;
    padding-left: 39px;
    float: right;
    overflow: auto;
}
#footer{
    width: 981px;
    height: 69px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    text-align: center;
    background-image: url(images/main_bg.gif);
    background-repeat: repeat-x;

}
.style3 {font-size: 14px}
.style6 {
    font-size: 24px;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style7 {
    font-size: 16px;
    font-weight: bold;
}
.style1 {color: #FF0000}
.style8 {color: #000000}
.style9 {font-size: 21px}
.style10 {font-size: 21px; font-weight: bold; }

#nav_content_wrapper{
    background-image: url(images/nav_content_bg.gif);
    background-repeat: repeat-y;
    overflow: hidden;
}
#nav_highlight{
    background-image: url(images/layout1wslices_23.gif);
    height: 324px;
    background-repeat: repeat-y;
    position: static;
    margin-top: -324px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

Well, you do have something out of place here (red);

<div id="header">
<link href="stylesheet4.css" rel="stylesheet" type="text/css" />
<img src="http://www.webmaster-talk.com/images/layout1wslices_03.gif" width="265" height="297" />

I would make the header background 1 image the width of your layout without the logo. Then you can put the logo in separately in the header div and make it linkable.

Wow.. I just dug into your layout and code - you are really making this harder than it needs to be.

ok fixed both of those issues. now what should my next step be to get this to look right in IE 6+7 & Firefox?

Originally Posted by LadynRed

Well, you do have something out of place here (red);
I would make the header background 1 image the width of your layout without the logo. Then you can put the logo in separately in the header div and make it linkable.

Wow.. I just dug into your layout and code - you are really making this harder than it needs to be.

Yeah the thing is their are certain little details that I'm not quite aware of, but I think I will be alot better off once I get through this cause your pointing out things that are making alot more sense to me now, and I really appreciate the help.

Would you be able to point out exactly what you see wrong with my code?

why don't you just change the style altogether? It looks terrible. Btw, no offence, just a bit of criticism that's all.

well thanks for the input, I'm already aware that I should do a re-design. The only thing is I want to have something up in the mean time for the client so that there isn't a blank page..ya know? That's why I'm still pushing to get it to look right across browsers...plus I want to gain that knowledge anyway for future websites.

most of the new web designers encounter this problem, so you need to test it first in all of the browser available right now and also on mobile phones. And I've also encounter this problem before I just check carefully the codes and I found out there is a break but sometimes a special character that shouldn't be there on that part.