Background shifts over a pixel in IE.

[missgee]

That 1px bug in is IE is driving me nuts! It’s supposed to be a background that floats over to the right, but IE keeps pushing it over to the left. I tried adding the padding-left: 1px; hack, but it’s not working. Here’s the code:

It’s one container within the other:

#container{
background-color: transparent;
margin-left: auto;
margin-right: auto;
width: 1000px;
z-index: 1;
}

#containertwo{
height: 754px;
background-image: url(/images/bgdesign.png);
background-repeat: no-repeat;
background-position: bottom right;
margin-left: auto;
margin-right: auto;
}

Thanks!

[TommiChi]

What does your HTML look like? Is it one DI|V tag nested in another? What other attributes are present? Could you also insert your HTML markup just so i'm sure i'm giving you the right answer?

[RyanReese]

Or more preferably give us a site-have you an image on the body element? Read the FAQ as that causes a 1px shift

[missgee]

It can be viewed by going <a href="http://www.zurieshe.com">here</a>. Please excuse the messy code. I even have tables inside a few of the divs just to test out some things.

[RyanReese]

HI, I don't know where exactly the shifting is though I notice you se ta bg on the body which is causing a 1px shift (probably) in IE. Read hte FAQ for more

body{
	background-color: #fff;
	background-image: url(/images/bg.png);
	background-position:  top left;
	background-repeat:repeat-x;
	font-family: tahoma;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	width: 99.8%;
}

Also I should tell you z-index only applies to elements that have a position set-aka position:relative;

Also on "#menu ul" your falling to IE6's double float margin bug where the horizontal margin set as the same direction as the float doubles the margin. Add display:inline; to fix it

#menu ul{
	float: left;
	list-style: none;
	margin: 0;
           display:inline;
	padding: 0 0 0 0;
	padding: 0px;
	margin-left: 30px;/*would be 60 in IE6*/
}

.mainbox is also in need of display:inline; to fix the bug, along with h1#logo, , .widget-btn, .home-spot, .multi-address-checkout-box .legend, and .quick-access

I see you are setting display:table; (probably to contain floats maybe) but you should know that IE6/7 don't support that and that right there is a huge majority of the market.

On ".base-mini .product-images" I see you set float and absolute positioning. Remove the float as in conjunction with AP it does absolutely nothing. As defined by the specs

And one final thing. You set min-height but IE6 down don't support that so you need to set a CC (you have one, but the file was 404 for me ) and feed the height property to taht (IE6 treats that almost as min-height)

[missgee]

HI, I don't know where exactly the shifting is though I notice you se ta bg on the body which is causing a 1px shift (probably) in IE. Read hte FAQ for more

body{
	background-color: #fff;
	background-image: url(/images/bg.png);
	background-position:  top left;
	background-repeat:repeat-x;
	font-family: tahoma;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	width: 99.8%;
}

Also I should tell you z-index only applies to elements that have a position set-aka position:relative;

Also on "#menu ul" your falling to IE6's double float margin bug where the horizontal margin set as the same direction as the float doubles the margin. Add display:inline; to fix it

#menu ul{
	float: left;
	list-style: none;
	margin: 0;
           display:inline;
	padding: 0 0 0 0;
	padding: 0px;
	margin-left: 30px;/*would be 60 in IE6*/
}

.mainbox is also in need of display:inline; to fix the bug, along with h1#logo, , .widget-btn, .home-spot, .multi-address-checkout-box .legend, and .quick-access

I see you are setting display:table; (probably to contain floats maybe) but you should know that IE6/7 don't support that and that right there is a huge majority of the market.

On ".base-mini .product-images" I see you set float and absolute positioning. Remove the float as in conjunction with AP it does absolutely nothing. As defined by the specs

And one final thing. You set min-height but IE6 down don't support that so you need to set a CC (you have one, but the file was 404 for me ) and feed the height property to taht (IE6 treats that almost as min-height)

I made sure to implement those changes. Thank you for that!

I still wish I can figure out how to stop the background from shifting.

I can't wait until we live in the days where Internet Explorer is either nonexistent, or at least the more buggy versions are completely wiped off the face of the planet.

[RyanReese]

Well if you SS and post a picture of the shifting I can see where the shifting is and I can tlel you how to fix it

[missgee]

Well if you SS and post a picture of the shifting I can see where the shifting is and I can tlel you how to fix it

Sure!

[Paul O'B]

That looks a lot bigger than a 1px gap - It looks like a 60&#37; gap

I'm guessing the problem is that you are using javascript to get png transparency in ie6 but you can't use repeated pngs with the script you are using.

As a test remove this script and see if the image displays correctly.

src="http://www.zurieshe.com/js/index.php?c=auto&amp;f=,lib/ds-sleight.js,varien/iehover-fix.js" ></script>

It doesn't look to me as though that image needs to be transparent anyway so make it a gif or jpg and see if it works.

You need to validate the page as there are some missing tags and also tidy up the ie stylesheets as you should only have the differences in the ie file and not everything. It makes debuggung and maintenance a nightmare.

[RyanReese]

Oops didn't post it here...I told him via pm to give IE6 gifs lolz...

That looks a lot bigger than a 1px gap - It looks like a 60% gap

I'm guessing the problem is that you are using javascript to get png transparency in ie6 but you can't use repeated pngs with the script you are using.

As a test remove this script and see if the image displays correctly.

src="http://www.zurieshe.com/js/index.php?c=auto&amp;f=,lib/ds-sleight.js,varien/iehover-fix.js" ></script>

It doesn't look to me as though that image needs to be transparent anyway so make it a gif or jpg and see if it works.

You need to validate the page as there are some missing tags and also tidy up the ie stylesheets as you should only have the differences in the ie file and not everything. It makes debuggung and maintenance a nightmare.

[missgee]

That looks a lot bigger than a 1px gap - It looks like a 60% gap

I'm guessing the problem is that you are using javascript to get png transparency in ie6 but you can't use repeated pngs with the script you are using.

As a test remove this script and see if the image displays correctly.

src="http://www.zurieshe.com/js/index.php?c=auto&amp;f=,lib/ds-sleight.js,varien/iehover-fix.js" ></script>

It doesn't look to me as though that image needs to be transparent anyway so make it a gif or jpg and see if it works.

I assumed that too, but even after I remove them, it still does it. Even after I changed it as a gift to test IE, it still shifts. It's so weird.

[Paul O'B]

I assumed that too, but even after I remove them, it still does it. Even after I changed it as a gift to test IE, it still shifts. It's so weird.

Did you remove the script and test as I mentioned above?

I tested locally and it was displaying fine (I deleted the local test so can't try again right now).

[missgee]

Did you remove the script and test as I mentioned above?

I tested locally and it was displaying fine (I deleted the local test so can't try again right now).

Yes. That's what I meant to say. Sorry for not being clear. I keep refreshing in IE and it still looks the same.

However, I'm certain that something with this script is causing it because before the script was implemented into the layout, it was showing just fine. I'm about to go remove some other js files to see if it helps.