Footer Help

[abzd]

Currently working on a site, my footer is correct in IE but wrong in Firefox.

Just wondering if there is a quick easy fix for the css.

Here is an example of my page:
http://www.dan-cepromotions.co.uk/testing/demo/prodops.htm

[BLiZZaRD]

Except for reading minds, which I only do on the weekends or when I need extra cash, what is the actual problem with the footer?

It looks fine to me centered well and all.

[abzd]

In firefox it adds too much space, pretty sure it has something to do with the padding in the content.

But if I take that out the footer is right in Firefox is right and then its wrong in IE.

Confused...

[BLiZZaRD]

Browser padding is different. In your CSS try the following (never hurts to try, yeah?)

at the top of the CSS find this:



html,
body {
margin:0;
padding:0;
height:96%;
font: 90%/1.5 Arial, Helvetica, sans-serif;
}


Replace it with this:



* {
padding:0;
margin: 0;
}

html,
body {
height:96%;
font: 90%/1.5 Arial, Helvetica, sans-serif;
}


This will force most browsers to set the margins first, before declaring the body and html sections.

[abzd]

Nope, that doesn't seem to work either.



#content {
float : left;
padding: 0px 0px 6em 0px;
width : 800px;
height : 55%;
}


If I take out the 6em here it works perfect in firefox. Very strange! I hate compability issues!!

[BLiZZaRD]

Use the position attribute. Have the containing div be relative positioned and use position:absolute on the footer div. That should work nicely for most all occasions.

[abzd]

Nope that didnt work either, it made the footer go into the header in Firefox.

[Medyman]

Nope, that doesn't seem to work either.



#content {
float : left;
padding: 0px 0px 6em 0px;
width : 800px;
height : 55%;
}


If I take out the 6em here it works perfect in firefox. Very strange! I hate compability issues!!

If you only need the padding in IE, just use a hack


#content { *padding: 0 0 6em 0;}

[abzd]

as easy as that...

thank you

is there any good sites with lists of hacks? I need one for my header too as it fits in firefox but not in IE.

[Medyman]

In general, relying on hacks isn't such a good idea. If you find yourself having to hack your way through CSS, then you might want to rethink how you're structuring your markup.

In general, most things do work in IE and FF. There are some thing which you'll always have to use a hack for (at least for the time being, until IE gets more CSS support).

Stick with the technique I used above...
add an asterisk(*) in front of any property that you want to only be read by IE. Remember to have the true value also listed for the sake of the standards complaint browsers.

[abzd]

Someone has just mentioned it isn't working in IE7.
Seems fine in firefox and IE6.

Anyone got a work around for this page?

http://www.dan-cepromotions.co.uk/testing/demo/publications.htm