Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Footers driving me crazy in IE!

    I've got two pages in which my footer is randomly moving in IE, it's perfect in FF and Chrome..

    http://fier.co.uk/services.html
    and
    http://fier.co.uk/blog/

    It's strangely jolting to the side? I'm puzzled as to what's causing this, I know a lot of things on the page don't validate (which I'll deal with later) but I'm sure they aren't related to the problem!

    Any help would be much appreciated, thankyou

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Code:
    #footer {margin-top:25px;}
    #footer a {text-decoration:none; color:#43fe2a;}
    #footer a:hover {color:#FFF;}
    #connect {float:left;}
    #footerlinks {float:right; text-align:right;}
    #footerlinks p {font-size:10px;}
    you aren't clearing the #footer float, which may cause unwanted effects, however it displays fine for me in ie/ff/chrome so can't really see a problem

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Hmm, this is what it shows for me

    I've updated the footer div to have a clear in, but it isn't showing that it's updated on mine, for some reason, does your css show a clear? strange

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Crispy,
    You have a lot of errors that need fixed - http://validator.w3.org/check?verbos...fservices.html
    See the links about validation in my sig below.

    If you add a background color to your #container, you will see what met is talking about. Try this once -
    #container { width:1024px; height:1024px; margin:0 auto; background: #fff;}

    If you remove that height:1024px; and clear the floats with overflow:auto; it would work better. Try this instead - #container { width:1024px; margin:0 auto; overflow: auto; background: #fff;}
    Here is an explanation of how clearing floats like that works.

    ---------------

    Of course, that shows other problems in your code. Your #upper is 800px wide but your many #porfolio's are 959px wide.
    After you change #porfolio to .portfolio, make sure their total width -includes margin/padding/border, will fit inside their container.
    Have a look at how the box model works.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks for your help, I am trying to change the things you guys have suggested, IE won't read my new stylesheet though, only the old one, strange - even when i clear browsing history, but once that figures itself out ill try them out


  •  

    Posting Permissions

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