CSS positioning and layout in FX and IE

If you have a background image for your website, you made found some strange spacing on the top and left of your background. Usually only occurs in IE, sometimes FX too.

It is because <html> and <body> have some strange default spacing.

Anyway, add this to your CSS and fix it.

html, body, form, fieldset {
    margin: 0;
    padding: 0;
}

And I found out that empty <div> in IE have a strange 1px height problem.

Here are three fix that people said it works.

1) Put a comment inside the

2) Put inside the

and add this to its style: font-size:0px;
line-height:0.
3) Setting your website to strict mode by using this DOCTYPE

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

1+3 should work well enough.

BTW, here is the position value that I always forget their meaning.

Value Description
static Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)
relative An element with position: relative moves an element relative to its normal position, so “left:20” adds 20 pixels to the element’s LEFT position
absolute An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties
fixed An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

Cheers 😀

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s