CODEWITHSUNDEEP
htmlcss
Adam
Adam

Reputation: 51

Unwanted white areas on HTML page

I've made a site using with a CSS made from scratch.

The Page The CSS

Randomly there are unwanted white spaces in two places:

I've experimented with various methods of fixed the problem like margins and paddings but they didn't seem to work.

What could I do to get rid of these white areas?

Upvotes: 2

Views: 1383

Answers (6)

Matt Ball
Matt Ball

Reputation: 359776

The extra white space comes from the browser's default stylesheet. Add these rules:

h2 {
    margin: 0;
}

h4 {
    margin: 0;
}

To solve this problem, and prevent future ones, I recommend using a CSS reset. Eric Meyer's is a widely recommended one; another good option is the YUI CSS Reset.

Upvotes: 5

jeroen
jeroen

Reputation: 91734

You need a css reset. For example the white space below the menu bar is caused by the browser default margins of the .maincontent h2.

Personally I prefer to reset the styles for the selectors that I use, but there are general css resets like Eric Meyer's Reset CSS.

Upvotes: 2

Curtis
Curtis

Reputation: 103348

try adding the following to the top of your stylesheet:

body, h1, h2, h3, p
{
margin:0;padding:0;
}

This ensures that all browsers' default padding/margin are set to 0, so its consistent. Then you can add padding/margin where you need it.

Upvotes: 0

invalidsyntax
invalidsyntax

Reputation: 640

1.) The "Main Page" header has a top margin of 19 pixels. This causes that 19 pixel area of white space. 2.) The entire Footer has a top margin of 21 pixels. This causes that 21 pixel area of white space. Also, for fixing the issue below sidebar, solving 1 + 2 may automatically resolve this.

Upvotes: 0

Luke Duddridge
Luke Duddridge

Reputation: 4347

Have you checked out your css in IE?

.maincontent { background: #0F3; height: 300px; width: 580px; float: left; }

basically, you need to add float:left; to your maincontent css

Upvotes: 0

corroded
corroded

Reputation: 21564

Your maincontent h2 and footer h4 both have margins(.83em and 1.33 em respectively) set them both to 0

Upvotes: 0

Related Questions