June 19th, 2013, 05:19 AM
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::
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::
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::
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.
Last edited by lelales; June 19th, 2013 at 05:20 AM.
June 19th, 2013, 07:16 PM
"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://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)