Topic: IE10 Background

[psp83]

Hey All..

Been a little while since posting on here..

So I've been building a site for a client, it works in all browsers except an issue in IE 10..

The site uses 3 containing div's for the background (not using CSS3 multiple backgrounds on this site)

Basically the following..

<div class="bg1">
<div class="bg2">
<div class="bg3">
    ...site content here....
</div>
</div>
</div>

Class bg1 has a repeatable background, class bg2 has a non repeatable background positioned top center and class bg3 has a non repeatable background positioned bottom center.

So as the content grows, the top and bottom bg spreads and the repeatable background fills in the middle..

The site uses a lot of expandable divs (jquery accordion) and infinite scroll areas instead of pagination. The trouble I am having is that when the infinite scroll is activated and adds more content or an accordion is clicked and the content expands, the bottom background doesn't move with the content in IE10, it glitches at the viewport end.

As you can see with this image



If I scroll up and down on the page once the content has been expanded/added, the back ground fixes itself and appears correctly.

To me, this seems like an IE10 rendering issue and not fixable ? any ideas ?

Paul

[Simon]

Hi Paul,

This is probably one for Sam, who's busy being all paternal at the moment, but will hopefully look in fairly soon. 

[sam]

Reading what you have posted would indicate an IE10 rendering issue, it does have some oddities. Does it work fine with IE7-9? What happens in compatibility mode? Without the full code it would be hard to find the issue but I expect you will be spending hours trying to get the compatibility for IE10 - maybe worth looking to see if there are any IE10 quick fixes, or make a condition in the CSS to detect and display differently for IE10.

[psp83]

Hi Sam.

IE 7, 8 & 9 all work as expected, when a div is expanded the background moves down with it and the repeatable background takes over.

IE 10 Compatibility mode also works fine, but makes the fonts look small and ugly.

Its very basic html/css and I don't know why IE10 has such a problem with it.

Here's the basic HTML structure :

Code: [Select]

<div class="wrapper">
<div class="banner-wrapper">
<div class="banner">
<div class="logo"></div>
<div class="utilities">... ul + li's ...</div>
<div class="navigation">... ul + li's ...</div>
</div>
</div>

<div class="content-wrapper">
<div class="content-container">
<div class="content">
<div class="content-inner">

... site content here ...

</div>
</div>
</div>
</div>

<div class="footer-wrapper">
<div class="footer">

</div>
</div>
</div>
An here's a quick brief of the CSS

Code: [Select]

.wrapper is width 100%

.banner-wrapper is width 100%, height 145px & with a non-repeatable background
.banner is width 966px, height 145px & margin 0px auto

.content-wrapper is width 100%, with a repeatable background
.content-container is width 100%, with a non-repeatable background positioned top center
.content is width 100%, with a non-repeatable background positioned bottom center and a min-height of 500px
.content-inner is width 966px, margin 0px auto

.footer-wrapper is width 100%, height 75px & with a non-repeatable background
.footer is width 966px, margin 0px auto
It's not like its ground breaking CSS, doing things this way has been around for ages and even works in IE6 lol..

[Simon]

Never work with children, animals, or Internet Explorer! 

[sam]

hmm looks like it should all work.

I'd suggest trying CSS3 gradients - I've used them before to good effect - http://bristowe.com/blog/2011/4/29/css3-gradients-in-ie10-pp1.html

or just a background image. Here: http://css3wizardry.com/tag/ie10/ might be useful too.