CODEWITHSUNDEEP
javascripthtmlcssangularjsfooter
Joan Yin
Joan Yin

Reputation: 81

Why didn't the css footer links work?

I am a developer, but now I need to fix a css bug. I have an angular app. There are some general links in the footer. But they are no longer clickable.

Here is my html code

<!doctype html>
<html lang="en" ng-app="example">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Globalization Resource Center</title>
    <link rel="stylesheet" type="text/css" href="./style.css"/>
<body>
    <div id="content">
        <div class="container-fluid">
            <div class="row-fluid" ng-view></div>
        </div>
    </div>
    <div id="footer">
        Copyright Text goes here.
        <a onclick="window.open(this.href);return false;" href="http://www.google.com" title="Privacy Policy"> Example Link</a> |
        <a href="mailto:[email protected]" title="Contact Us">Contact Us</a>
    </div>
</body>
</html>

Here is the style.css

#content {
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 100%;
  padding-bottom: 54px;
  margin: 0 auto -54px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}

.container-fluid {
  padding-right: 20px;
  padding-left: 20px;
  *zoom: 1;
}

.row-fluid {
  width: 100%;
  *zoom: 1;
}

#footer {
  height: 54px;
  margin: 0 auto;
}

I stripped down the code and put it in plunker at: http://plnkr.co/edit/Upvm5A7ksGT3mzXIcXTp

Upvotes: 0

Views: 77

Answers (3)

TiltedListener
TiltedListener

Reputation: 26

The problem is the combination of 

padding-bottom: 54px;
margin: 0 auto -54px;

This is causing two things to happen at once. First, your <div id="content"> is sliding up with the negative margin, pulling #footer below up relative to it.

Second, your padding is only adding space respective to inside #content. It's not pushing down against #footer.

This is related to another issue - since #footer is by default position:static, but #content is position:relative, #footer is rendering in order of position in the document flow, not against the position communicated by #content.

So what you have is simple overlap of the two <div> pieces, which means you can't click on the links since #content is absorbing those clicks.

As for a solution to your problem, you can simply cut the 54px/-54px entirely, as your #footer content presumably is going to be smack against #content anyhow.

OR you could set both #content and #footer to the same position type, static or relative.

Given that I can't see the rest of your content, I wouldn't know the best solution for the overall layout you're looking for.

Upvotes: 0

j08691
j08691

Reputation: 207919

Your margin: 0 auto -54px; rule is causing this. The footer links end up sitting under the content. Either fix the margin or add a z-index to the footer:

#footer {
    height: 54px;
    margin: 0 auto;
    z-index:1;
    position:relative;
}

jsFiddle example

Upvotes: 5

keypaul
keypaul

Reputation: 497

Remove or position: relative; or margin

Upvotes: 0

Related Questions