What is causing my screen to not be flush with the browser. Looks like there is a padding, but there isnt.

Question

I have started to use the CSS framework Bluetrip, and I just noticed that for some reason my layout doesnt line up exactly with the browser.

I only have one example to show, http://justcollect.com/ebay_app/index.php/home/index, but if you look closely, my footer doesnt line up with the bottom of the browser. There is some whitespace there.

Any ideas. Thanks.

Answer 1

Use a CSS reset first:

http://meyerweb.com/eric/tools/css/reset/

Answer 2

Have you looked at in Firefox using Firebug - that is a great tool to look at what styling is being applied to each particular DOM element, and where each CSS attribute is originating from, what is inheriting, what is overridden. You can quickly solve a bunch of strange things like that.

Answer 3

In screen.css, change content: "." to content: " " for .clearfix:after, .container:after. The period seems to be confusing the browser.

Answer 4

put as answer so you can accept :)

do you see the effect of the content: "." from your screen.css in your browser(s)?