X-Cart forums

[Sisom]

Hi, I can't seem to work out what is causing the footer on my site to be about 5px above the bottom of the page, in IE8. (It may or may not do the same in IE6 and IE7, I haven't tested those yet.)

You can view it on any page on the site:

http://www.mrdtrading.co.uk/store/home.php?shopkey=martin

Also, the top row of links, <ul class="helpbox">, is too near the top of the footer in IE8, but is fine in Firefox. I have tried adding a new style to altskinie7.css,

#footer .helpbox {
display: block;
margin: 5px 0px 0px 0px;
padding: 0px;
}

but that just moved the border of the footer up by five pixels, which looks even worse! I tried changing it to:

#footer .helpbox {
display: block;
margin: 0px 0px 0px 0px;
padding: 5px 0 0 0;
}

but that didn't work either.



(I know I don't have to put the "px" in for zero values, but it saves time when I am constantly changing from five to zero, so at the moment I'm leaving them in, until I finally fix it!)

I expect it's something very simple, but I've spent half an hour fiddling with it, and can't seem to work it out. Can anybody help?

[gb2world]

A quick solution to the bottom not being the same in IE8 would be to set the bottom to -5px for IE8
#footer {bottom: -5px;}

To help debug on IE - You can use the IE Developer Toolbar. It will not replace Firebug in your tool suite, but is indispensable when figuring out issues in IE. You can see how IE is interpreting your css.

One thing to note that might have something to do with your browser differences is how tight your css is in the footer. Firefox is allowing the height of the footer to expand to accommodate it. IE does not seem to want to. (Your css says the footer top would be 50px from the bottom, the divs inside your footer are very close to or greater than 50px in IE. IE may have a few pixels added because of differences in where it adds margin and padding.) You can mess with the heights and line heights of the elements in your footer in IE Developer Toolbar and find settings that fit.

Also for future reference - it is a good idea to normalize/initialize the css. There are padding and margin differences in the default way the different browsers interpret css. This manifests itself with 1 or 2 pixel differences here and there that can be quite frustrating to find. Here is a link to more information about normalizing css. (This may or may not have anything to do with what you are seeing - it is just an FYI). Normalizing causes you to be more disciplined in setting the margin and padding css for everything you use, but it removes browser differences.

[gb2world]

P.S. I just measured the height being taken by your footer on firefox using Measureit - it is 55px high. So that is the issue - IE is strictly interpreting your bottom setting of 50px, Firefox lets you get away with extra 5px. The stuff I told you about normalizing css does not apply to this situation.

[Sisom]

Thanks for your help, I've taken a different tact:

I removed the 'position: absolute' property, from main.css, line 311:
#footer {
width: 100%;
/* position: absolute !important; */
bottom: 0;
overflow: hidden;
float: left;
}

then I removed the 'padding-bottom: 50px' property from altskin.css, line 57 (this is something that I added while customising the site):
#content-container {
/* padding-bottom: 50px; */
margin-top: 150px;
}

then I removed the 'padding-bottom: 39px' property from main.css, line 266 (this was the way it was with the original installation):
#content-container {
clear: both;
float: left;
overflow: hidden;
position: relative;
width: 100%;
/* padding-bottom: 39px; */
margin-top: 140px;
}

and now it's almost okay in IE8 (I just need to move the top line down by 5px - I am going to try floating this div, as it hasn't been floated in the original CSS (quelle surprise).

[Sisom]

Originally Posted by gb2world

P.S. I just measured the height being taken by your footer on firefox using Measureit - it is 55px high. So that is the issue - IE is strictly interpreting your bottom setting of 50px, Firefox lets you get away with extra 5px. The stuff I told you about normalizing css does not apply to this situation.

That's odd, because I've just checked it with Faststone Capture, and it's 50px high - it uses a 50px high background image, and there would be a gap if it was greater than 50px high. Perhaps that was mid-editing, when I was changing the padding and margins.

Is there a bug in IE8 to do with margin or padding? You mentioned it in your previous post. (I have another problem with IE8, and will post that in a separate thread.)

[Sisom]

I think I have found the cause of the problem: in altskin.css, line 366:
#footer .subbox {
border-top: 0px none;
background: transparent none;
height: 30px;
position: absolute;
bottom: 5px;
right: 5px;
}

The .subbox style is absolutely positioned (Qualiteam strike again). And this explains (I think) why the subbox was 5px up from the bottom in IE8.
I am going to use floats for everything inside the #footer div, the way it should be done.
I have had to remove the 'vertical-align: middle' property in main.css line 522:

#footer .subbox {
position: relative;
border-top: #ffd30d 1px solid;
background: #f4f5f7 none;
color: #667d92;
height: 40px;
/* vertical-align: middle; */
padding: 0px;
}

so that the subbox does what it's supposed to in the first place. These problems are all caused by Qualiteam's insistence on using absolute positioning when it is not necessary, because they don't understand the float property.

[Sisom]

Hurrah! All fixed, works fine in IE8 now!

[gb2world]

This is what I used: Measueit. I can't explain why the background would expand - it is 50px now with the changes you made.

It is not an IE8 bug - just the way the browsers set default padding and margins is different. So if your css uses default settings, there could be differences across browsers on elements not specifically defined in your css. The link I provided explains the issue that the normalization is trying to solve.

[gb2world]

I still see the white space at the bottom on both IE7 and IE8, just not as big. I think you may still have an unintended bottom definition on .subbox .right div? Not sure what you are trying to do with it.

Setting the bottom property has a different effect on relatively vs absolutely positioned divs. It is not wrong to use one or the other, it just depends what you are trying to achieve.

[Sisom]

Thanks gb2world, I was using the bottom value before, when I was experimenting with fixing the IE8 problem, and had done so many changes I forgot I had done it!
It's all fixed now, many thanks.