X-Cart forums - 1px Difference between IE and FF, killing me

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - 1px Difference between IE and FF, killing me (https://forum.x-cart.com/showthread.php?t=44878)

1px Difference between IE and FF, killing me

Trying to line up container, and container bottom, and getting a 1px difference, between IE and FF. I know its not a lot, but it looks totally stupid because the footer is designed to integrate into the container.

Here is my code (including body):

Code:

HTML,BODY { margin: 0; background: url('images/body_bg.jpg') repeat-x #e2e9ef; text-align:center; }



#Container { 

 padding:10px; color:#ffffff;  background: repeat-y center url('images/container_bg.png'); 

margin-left: auto;

margin-right: auto;

width: 974px;

text-align: left;

padding-bottom:0px;

padding-top:0px;

margin-top:-3px;

}



.Container_Bottom {  padding-top:20px; background: no-repeat center url('images/container_bottom.png');  

 }

Please help, as I am pulling my hair out with this one.

Re: 1px Difference between IE and FF, killing me

Welcome to the wonderful world of IE compatibility. This is one of the most annoying things about web development - trying to get something to look exactly the same cross-browser. There are a few solutions:

First, you can specify a different stylesheet all together for IE, but that is a bunch of extra work.

Next, you can use display: inline; or display: table-cell; which sometimes fixes the issue.

Last, you can use the IE hack to give a different margin to IE, which is putting an _ before something. For example, if you want padding to be 20px for FF, but 19 for IE, you'd show it like this:

padding-top: 20px; _padding-top: 19px;

Try one of those and see if they help.

Re: 1px Difference between IE and FF, killing me

Quote:

Originally Posted by balinor

Thanks Balinor,
I tried the last one, but it didnt seem to work, this is the code I have:

Code:

.Container_Bottom {  padding-top:20px; background: no-repeat center url('images/container_bottom.png'); margin-left:0px; _margin-left:-1px;  



 }

Please let me know if I did something wrong.

Re: 1px Difference between IE and FF, killing me

Which version of IE is giving you trouble?

Re: 1px Difference between IE and FF, killing me

Quote:

Originally Posted by balinor

Which version of IE is giving you trouble?

7.0

Re: 1px Difference between IE and FF, killing me

Ah, that hack won't work then. Try the display: inline; method.

Re: 1px Difference between IE and FF, killing me

Quote:

Originally Posted by balinor

Ah, that hack won't work then. Try the display: inline; method.

Never used that before, where would it go in the code?

-ds

Re: 1px Difference between IE and FF, killing me

.Container_Bottom { padding-top:20px; background: no-repeat center url('images/container_bottom.png'); display: inline; }

Re: 1px Difference between IE and FF, killing me

Quote:

Originally Posted by balinor

.Container_Bottom { padding-top:20px; background: no-repeat center url('images/container_bottom.png'); display: inline; }

Just makes the whole bottom part disappear

Re: 1px Difference between IE and FF, killing me

Tough to assist on this one as I usually have to try about 10 different things before it works :(