CODEWITHSUNDEEP
phphtmlcss
jennyshen
jennyshen

Reputation: 33

How to remove extra space in the header

This is the site: http://www.indiansummerfestival.ca

Basically I want the webpage to start right at the top of the orange banner (i.e. no white space between banner and top of the page).

I tried using Chrome inspector but I have no idea where the extra 100-ish pixel amount of white space came from. The files involved is style.css and there's another chunk of css outside of the stylesheet.

I tried pasting the code but it looks pretty messy, so I think the best way is to find <div id="header"> in the HTML code.

Thank you so much.

Upvotes: 1

Views: 455

Answers (4)

user1425096
user1425096

Reputation:

You can apply this to compensate?

#header {
    margin-top:-45px;
}

Semi-hacks, but works? :)

Upvotes: 0

cHeWeE-_-
cHeWeE-_-

Reputation: 68

A similar problem with firefox I resolved adding in my CSS :

*{margin:0; padding:0;}

Ps: I am somehow unable use comments... :(

Upvotes: 1

Matt Dodge
Matt Dodge

Reputation: 11142

It has something to do with the mailchimp and social plugins that you are using. They each seem to be adding some pixels to the top. If you remove those the orange header is aligned with the top. You'll have to take a look at how those style sheets are playing with your own.

Upvotes: 0

Christian
Christian

Reputation: 19740

Your #socialLinks and #mc_embed_signup divs are positioned relatively as siblings to #logo. Despite the fact you're ofsetting those divs, they are still calculated as being in the flow, thus pushing the #logo down. Try positioning those 2 divs absolutely; that should fix it.

Upvotes: 3

Related Questions