#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    674
    Rep Power
    38

    Looks good in IE 10, trouble in IE9 and 8


    OK, Here's the page: click here

    The issue is with the footer. It looks good in IE10 but not IE9 or 8. I've tried different style sheets for IE8, 9 and 10.

    IE8 style looks like this::
    Code:
    #footer{ 	
    position:fixed; 	
    top:100%;  }
    I'd prefer to not sett the #footer as being "fixed", but this seems to be the best I can do so far.

    IE9 CSS code looks like this::
    Code:
    #footer{
    	position:absolute;
    	top:90%; 
    }
    IE9 code is just like the IE10 code, except I try to move the footer up a bit as it's not appearing at all.

    IE10 CSS code looks like this::
    Code:
    #footer{
    	position:absolute;
    	top:100%; 
    }
    The IE10 code works perfectly, but does not work for IE8 or 9.

    Can anyone tell me how to get the code for IE 8 and 9 to work like it does for IE10?

    I'm pretty confused here.

    thanks
    Last edited by lelales; June 19th, 2013 at 06:20 AM. Reason: typo
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    "top:100%" says to put the top edge of the element all the way down, so for fixed position elements, that will cause the element to be inaccessible beyond the bottom of the page. Try using "bottom:0" instead.

    The footer looks fine to me in IE9 and IE8 once I've disabled the "#footer" styles in the IE-specific stylesheets.

    Remember that your conditional comments are set to apply both the IE9 and IE8 stylesheets in IE8 and both of those plus the IE7 stylesheet in IE7.

    By the way, ".social_media" is misplaced. You should give "position:relative" to "#header" or "#container" to create a new positioning context for it.

    Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo