SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer appears ok under IE but not Firefox

    Hi all,

    My footer appears ok under IE but under firefox the text seems to appear below the rectangle area marked as paragraph - I have used the code for footer in a cnetered layout from this site.

    Here is the code:

    <div id=outer>
    <div id="clearfooter"> </div>
    <br>

    <div id="footer">
    <p align="center"><a href="contactus.html"> Contact Us |</a><a href="aboutus.html">
    About Us | </a><a href="site.html">Site Map</a></p>
    </div>
    </div>


    Here is the CSS:

    #footer {
    font-family:inherit;
    font-size: 1em;
    color: #000000;
    height:15px;
    background-color:#8FDCA8;
    font-weight: bolder;
    left: 0px;
    width:900px;
    position:absolute;
    }

    #absfooter {
    font-family:inherit;
    font-size: 1em;
    color: #000000;
    height:15px;
    background-color:#8FDCA8;
    font-weight: bolder;
    left: 0px;
    top:1100px;
    width:900px;
    position:absolute;
    }

    #clearfooter{clear:both;height:15px;width:100;}

    THis seems preplexing with Firefox.

    Regards

    Explorer

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going to have to see your entire page. But two things stick out at me like a sore thumb. The lack of semantic markup (HTML that describes what it's about and the job its doing), and the use of absolute positioning for your layout.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI Dan

    My problem seems to have been resolved by adding the following in the CSS: div>p {margin:0} - Its a fix for the Mozilla as apparently it puts an extra line in the beginning of a Paragraph thus explains why the texts appeared below where it should be.

    Regards

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mozilla usually doesn't need fixing. Like I said, I'm going to have to see your full HTML and CSS code.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Dan said, Mozilla usually doesn't need fixing. All browsers have default margins and paddings they apply to different elements, and each browser quite often implements these in different ways with different values. Starting your css with
    Code:
    * { margin: 0; padding: 0;}
    will reset these for an even start point. As your "fix" reads, the margin was the culprit. IE would have looked ok due to its buggy implementation of margin collapse.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan,

    I am going to post my code in a new thread to consolidate all the points.

    Regards


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •