trouble with IE 6+7 and FF layout

pnkmunky

join:2002-06-14
Ringwood, NJ

trouble with IE 6+7 and FF layout

www.lavabarrestaurant.com

Ok so the above link is the live version of the site that I have up right now. Everything is pretty much good with it except for the fact that in IE, the content area div is being shifted down below the navigation bar on the left. This is the closest I've gotten to getting the site to be cross browser compatible. In the CSS code you will notice I only have the navigation bar floated left, the content area to the right of it is not floated, it is positioned with margins next to the navigation bar. Now....

www.lavabarrestaurant.com/test

This is the site where I'm testing out new HTML/CSS code in order to get the site to look the same across all browsers (mainly IE is the one giving me trouble, as usual). Here I'm floating both the navigation bar and the content area. Problem is I'm running into new issues now that were not present before I floated the content area. I basically would like if someone could take a look at my code and help me figure out what I'm doing wrong or what I'm not doing so that my website will look the same across all browsers (mainly IE, Firefox, Safari, Opera).

CSS code for lavabarrestaurant.com

#wrapper{
margin-right: auto;
margin-left: auto;
width: 982px;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
height: auto;
}
#header{
margin: 0px;
padding: 0px;
height: 296px;
width: 982px;
background-image: url(images/header_bg_03.gif);
background-repeat: no-repeat;
min-height: 297px;
position: relative;
}
#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;
padding-top: 25px;
padding-right: 39px;
padding-bottom: 39px;
padding-left: 39px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 241px;
}
#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;
}

CSS code for lavabarrestaurant.com/test

#wrapper{
margin-right: auto;
margin-left: auto;
width: 982px;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
text-align: left;
height: auto;
}
#header{
margin: 0px;
padding: 0px;
height: 296px;
width: 982px;
background-image: url(images/header_bg_03.gif);
background-repeat: no-repeat;
min-height: 297px;
position: relative;
}
 
#nav_bar{
float: left;
width: 241px;
top: 0px;
padding: 0px;
margin: 0px;
}
#content_area{
background-image: url(images/layout1wslices_08_new.gif);
width: 741px;
max-width: 741px;
min-height: 607;
background-repeat: repeat-y;
overflow: auto;
float: right;
margin: 0px;
padding: 0px;
}
#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: auto;
}
#nav_highlight{
background-image: url(images/layout1wslices_23.gif);
height: 324px;
background-repeat: repeat-y;
margin-top: 0px;
}
#actual_content{
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 39px;
}

permalink · 2009-06-28 20:48:28 · Print ·


Tuesday, 01-Dec 10:22:12	Terms of Use \| Privacy Policy \| Hosting by www.nac.net - DSL,Hosting & Co-lo \| feedback \| contact over 10 years online! © 1999-2009 dslreports.com. page compression OFF