Positioning problem in opera

Small problem, pretty minor but i cant seem to get my head around it. Excuse my messy coding in advance. There is a small glitch when viewing
http://deetro.growmedia.ca/industry/index.htm
The background image is either positioned 1px to the right or the wraping div is one px to the left. I think the later isnt happening because if you look down the background image for div#main which is the "home" png on the left is positioned correctly.
/*
v 0.9
copyright growmedia 2005
http://www.growmedia.ca
last edited:09 08 2005
edited by:dieter
*/

/*default begins - applied by default to entire document*/

*{
margin: 0;
padding: 0;
}

body {
background-color: #DED9CA;
background-repeat: repeat-y;
background-position: 50% 0;
margin: 0;
padding: 0;
background-image: url(images/ind_background.png);
}

img{
border: 0;
margin: 0;
padding: 0;
}

/*default ends*/

#wrap {
left: 50%;
margin-left: -326px;
padding: 0;
position: absolute;
top: 0;
width: 652px;
}

#header {
background-color: #DED9CA;
background-image: url(images/ind_header.png);
background-position: top left;
height: 172px;
margin: 0;
padding: 0;
width: 652px;
}

/*main begins - contextual markup styling*/

#main {
background-color: #FFFFFF;
background-image: url(images/ind_about.png);
background-position: top left;
background-repeat: no-repeat;
padding-top: 30px;
padding-left: 89px;
width: 563px;
}

#main p{
margin-top: 15px;
color: #696969;
padding-left: 4px;
padding-right: 4px;
font: .9em Arial,Sans-serif;
text-indent: 0px;
margin-bottom: 8px;
}

#main ul{
margin-top: 15px;
color: #696969;
padding-left: 20px;
font: .9em Arial,Sans-serif;
margin-bottom: 8px;
}

#main li{
color: #696969;
padding-left: 10px;
padding-right: 4px;
font: 1em Arial,Sans-serif;
margin-bottom: 8px;
}

#main h1 {
color: #464646;
padding-bottom: 3px;
font: bold 18px Arial,Sans-serif;
}

#main h2 {
color: #464646;
padding-bottom: 2px;
font: bold 15px Arial,Sans-serif;
}

#main h3 {
color: #464646;
padding-bottom: 2px;
font: bold 13px Arial,Sans-serif;
}

#main h4{
color: #172A74;
padding-top: 3px;
padding-left: 23px;
font: bold 13px Arial,Sans-serif;
}

#main a:link, #main a:visited {
font: 15px tahoma,arial,sans-serif;
color: #799047;
text-decoration: underline;
}

#main a:hover {
font: 15px tahoma,arial,sans-serif;
color: #063E5B;
text-decoration: none;
}

#main em{
color: #476B90;
font-style: normal;
font-family: "trebuchet ms",Arial,Sans-serif;
}

#main q{
color: #2F2F2F;
font-size: 13px;
font-style: italic;
}

/*main ends - contextual markup styling*/

/*main Layout options begins*/

.nofloat{
float: none;
clear: both;
}

.break{
clear: both;
padding-top: 5px;
padding-bottom: 5px;
}

.floatleft{
padding-right: 6px;
margin-bottom: 15px;
margin-top: 15px;
float: left;
}

/*main Layout options ends*/

/*top menu/nav layout&style begins*/

#containernav{
display: block;
height: 32px;
width: 652px;
}

#lnav{
display: inline;
background: url(images/ind_menuleft.png) no-repeat top left;
float: left;
height: 32px;
width: 89px;
}

#nav{
display: inline;
background: transparent;
font: 13px Arial,Sans-serif;
height: 32px;
width: 563px;
}

#nav a:link, #nav a:visited {
background-image: url(images/ind_menutop.png);
background-position: top left;
background-repeat: no-repeat;
color: #999999;
float: left;
height: 17px;
line-height: 17px;
padding-left: 4px;
padding-right: 4px;
padding-top: 15px;
text-decoration: none;
}

#nav a:link#current, #nav a:visited#current, #nav a:hover {
background-image: url(images/ind_menutop2.png);
background-position: top left;
background-repeat: no-repeat;
color: #999999;
height: 17px;
line-height: 17px;
padding-left: 4px;
padding-right: 4px;
padding-top: 15px;
text-decoration: none;
}

#nav ul,#nav li{
height: 17px;
background: transparent;
display: inline;
list-style-type: none;
text-align: center;
}

/*top menu layout&style ends*/

/*footer begins*/

#footer {
clear: both;
padding-top: 8px;
height: 32px;
width: 652px;
color: #ABA68D;
font: normal 14px "trebuchet ms",Arial,Sans-serif;
background: url(images/ind_footer_background.png) no-repeat top;
}


#footerleft{
padding-left: 10px;
float: left;
}

#footerright{
padding-right: 10px;
float: right;
text-align: right;
}

#footer a{
color: #ABA68D;
text-decoration: none;
border-left: 5px #FFFFFF;
border-right: 5px #FFFFFF;
}

#footer a:visited, #footer a:link{
color: #ABA68D;
text-decoration: none;
}

#footer a:hover{
color: #506698;
text-decoration: none;
}

#footerright a:hover{
color: #8BB021;
}

/*footer ends*/

There is a chance that this problem stems from the negative margin used to align the wrapping container div. Im still unsure.

Edit: upon removing block level elements bit by bit ive traced the problem to the something in div#main. Im not sure what it is but it might have something to do with my sloppy floating and clearing. Any help?

Edit Edit: Ive rechecked my previous assumption and it wasnt actually div#main that was causing the problems, just the fact the divs created enough content to make the page have a scroll bar. So its an issue with the page interacting with a v. scroll

try this:

#header {
background-color: #DED9CA;
background-image: url(images/ind_header.png);
background-position: top left;
height: 172px;
margin: 0;
padding: 0;
width: 652px;
}
@media all and (min-width: 0px){
#header {
margin-left: -1px;
}
}


and see if that helps any. It looks like your header is being pushed to the right 1px in Opera. I had a similar problem just recently.

If you notice you can collapse the browser some and as you manually make it smaller/bigger, you can can see it lines up sometimes and shifts off 1px other times. I found this peice of code will make it look all right on a maximized screen. It will still shift some on a mnimized screen. So it's not the most graceful answer but it's what I used to fix my similar problem.

Maybe someone can help us with a real answer.

Harbringer, thankyou for the reply. I wasnt sure if anyone was actually going to take a stab at that code. : :p After reading your post and looking over the code i opened opera to take a closer look at what was going on when the window was resizing, to my amazement something appeared. When you resize the window by hand it looks as though the 1px shift on the background flickers.
...
...
...


Slowly resize the window, and it is flickering. The background is shifting 1px unrelative to the centered content. So if you line it up right it works just fine, but when its fullsize, or an uneven number of pixels wide. The background has to round and is 1px different from the centered wrapping div.

Does that make any sense? It has to do with even and odd numbers, the window i believe should either resize by two, or the centered div with a negative margin should behave the same way. It looks like the box model might be seperate from the rendering of the body.

Does anyone have anymore information on this subject? Ive only been coding for 4 months, and i have no idea what im actually talking about.

edit: I guess you could reverse that whole thing and assume the wrapped content is shifting, or the header or the footer. But because it works on windows without scroll bars that are maximized, im really not sure.

Cmon' now, 61 views and only one reply? Is anyone else sharing this same problem? Is there anyone who has any more information on this?