http://www.dslreports.com/forum/r22625560 en Thu, 10 Dec 2009 23:32:04 EDT Thu, 10 Dec 2009 23:32:04 EDT http://www.dslreports.com/forum/remark,22625560 pnkmunky : 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;} ]]> http://www.dslreports.com/forum/remark,22625560 Sun, 28 Jun 2009 20:48:28 EDT