X-Cart forums

[davidsaldana]

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):

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.

[balinor]

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.

[davidsaldana]

Originally Posted by balinor

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.

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

.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.

[balinor]

Which version of IE is giving you trouble?

[davidsaldana]

Originally Posted by balinor

Which version of IE is giving you trouble?

7.0

[balinor]

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

[davidsaldana]

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

[balinor]

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

[davidsaldana]

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

[balinor]

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