CODEWITHSUNDEEP
css
Chud37
Chud37

Reputation: 5007

Chrome Margin Error

A website I manage: http://www.charisbiblecollege.org.uk/

In Chrome, seems to have a gap between the footer and the bottom of the page. There is a white space there. It's not big but it's really bugging me.

I think it's connected to the margin: 0; and width: 100% on the <body> tags, can anyone explain/help?

It doesn't seem to happen in other browsers.

Upvotes: 0

Views: 69

Answers (3)

pavel
pavel

Reputation: 27082

It's caused by rule div.row:after where you add as a content .. There are 4 simple fixes, use want you need. The ideal will be probably the first one, content: ''. Below I put all options you have.

  1. You can put there just a blank string, content: '', or font-size: 0.

    div.row:after {content: ''; ...} /* OR */
div.row:after {font-size: 0; ...}

  2. Or put overflow: hidden to this rule:

    div.row:after {overflow: hidden}

  3. Or put overflow: hidden to #wrap:

    #wrap {overflow: hidden}

Upvotes: 1

maioman
maioman

Reputation: 18734

change 

div.row:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}

to

div.row:after {
clear: both;
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}

for more info check the clearfix-hack article

Upvotes: 0

Nick
Nick

Reputation: 3281

div.row:after made the white space, I also see it in firefox. Change content: "."; to content: "";

div.row:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

Upvotes: 0

Related Questions