CODEWITHSUNDEEP
csslayoutstylinghtml
Genadinik
Genadinik

Reputation: 18639

Same footer div on different pages looks different

I just fixed one problem with the footer div I have, and made another one :)

Currently, I have the footer broken broken on this page:

http://www.comehike.com/hikes/scheduled_hike.php?hike_id=189

See how the footer goes across the entire page?

Now take a look here:

http://www.comehike.com/earn_money.php

The footer is across the entire page, and also has bigger letters.

Here is the styling for my footer that I think is used by both pages. Although that thinking might be the problem here :)

/* styles for footer */

.footer
{
    padding: 0.5em 0;
    margin: 0 auto;
    margin-bottom: 20px;  
    text-align: center;
    vertical-align:center;
    background: #fff;
    color: #462c1f;
    border: 10px solid #fff;  
}
.footer a, .footer span {
    color: #462c1f;
    font-size:85%;
}
.footer a {
    color: #7E9940;
    font-size:85%;
}

.footer a:hover {
    text-decoration: underline;
    color: #3f6b30;
}

Upvotes: 1

Views: 924

Answers (3)

Dan
Dan

Reputation: 4663

I bet you close a div tag too early or something relatively simply like that. Try playing around with adding a </div> tag before and then after the footer, and see what this does. Alternately delete a </div> tag and see what this does. The route overlay may be a contributing factor, but it's hard to say without being able to debug this extensively to see.

Upvotes: 1

jackJoe
jackJoe

Reputation: 11148

the second case (which I think is correct) http://www.comehike.com/earn_money.php, has the .footer inside the .mainBody

The first case (http://www.comehike.com/hikes/scheduled_hike.php?hike_id=189) is outside!

That's why it is different.

The problem is not at the CSS (in this case) but more with the where the footer is at the html, which inherits styles from other containers.

Upvotes: 5

Nightfirecat
Nightfirecat

Reputation: 11610

The footer is centered because with the border, it is the same width as the main section above it, and doesn't have any margin/padding outside of it affecting its placement.

As for the text size, the footer at http://www.comehike.com/hikes/scheduled_hike.php?hike_id=189 is inheriting the text size from the body, which has the style font-size: 1em;, and the footer at http://www.comehike.com/earn_money.php is inheriting the text size from div#layout2.content, where the .content class has the style font-size: 13px;

Upvotes: 2

Related Questions