CSS Bug: Footer under images on Firefox, but on top of Images on other WebBrowsers

I am doing a website with wordpress and I have this problem. While editing some of the css of the page, I wanted to make the footer go a little bit closer to the image widgets. The problem is on Firefox, the site is perfect, but when we look at it from other browsers (eg: chrome or safari) it is on top of the images.

Can anyone figure this one out? I have spent hours trying to change this but it doesn’t really work.

Read More

Here is the link of the website:
http://portugalweddingphotographer.com/

Thank you very much

Related posts

2 comments

  1. I agree, refresh your cache. To make footer closer than what it is currently, remove/adjust padding and margin for:

    footer#footer-container p.copyright {
      margin: 30px 0; /*can make this 10px for example*/
    }
    
    footer#footer-container {
      padding: 30px 0; /*can make this 10px for example*/
    }
    
  2. I like doing something like this:

    html {
      position: relative;
      min-height: 100%;
    }
    
    body {
      /* Margin bottom by footer height */
      margin-bottom: 60px;
    }
    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
    

    Where .footer is the class on your outermost footer wrapper, and it’s the last thing inside the body but below your content wrapper or whatever. And you’d change the 60px to whatever height that entire footer is.

    It’s hard to say for sure what’s happening though because I couldn’t reproduce the bug just looking at the website — could you post the html/css of your site?

Comments are closed.