Im getting a 20px margin at the bottom of my page, and cannot figure it out, html and body both have margin:0; padding:0;

It's your float clearing stuff that's mucking you up. All those rules at the bottom of defaults.css.

 

IMO you should be doing float clearing by setting overflow:auto;

 

http://www.quirksmode.org/css/clearing.html

 

The only gotcha is to make sure haslayout is triggered for the element in IE6, which can usually be achieved by setting a width or height on the element, or failing that an IE specific rule such as zoom:1;

 

Anyway, that's beyond the scope of your problem - but it definitely looks like the .clear-block selectors that are causing the extra space.

Thanks for the quick reply, helped me see the problem. This clear-block style is built into drupals default css and it was the

clear-block:after { content:'.'; }

that was causing the margin.

 

Ive overridden it on two containers with .clear-block class like this:

 

 

#footer-region:after {content:'';}
#page:after {content:'';}

 

and that fixed the problem.

 

Thanks for your insight.

 

 

Changed to

overflow:hidden;

and works better in other browsers.

that fixed the problem.

 

Thanks for your insight.

 

No worries, I'm pleased you got it sorted