CODEWITHSUNDEEP
internet-explorerinternet-explorer-8scroll
Stephan Pfaff
Stephan Pfaff

Reputation: 53

Scrolling not working in IE8

iI have a problem with IE8 (Version: 8.0.6001.18702) and this website (gute-tat.de) that I'm unable to solve on my own. In all other browsers scrolling is fine, but in IE8 scrolling only works occasionally or not at all. I couldn't find a solution via stackoverflow or google.

I tried to fix the problem by validating the site and fixing all errors. This page has only 2 errors left http://www.gute-tat.de/konzept.html, still scrolling remains corrupt. One of the two remaining errors, the "onLoad"-error isn't the cause either. I removed it temporarily and put it back in after it didn't solve the problem. (I just took over the job of maintaining this site, so I don't want to make too many changes too quick)

I also wanted to change the doctype, but Typolight only allows to choose between "XHTML Strict" and "XHTML Transitional".

It would make my day if somebody could point me in the right direction.

Thanks in advance, Stephan

Upvotes: 0

Views: 1609

Answers (1)

Stephan Pfaff
Stephan Pfaff

Reputation: 53

The problem is caused by the fullscreen background image, realized via a table.

<body>
    <div id="mainwrapper">
        <!-- the actual conent of the page... -->
    </div>
    <div id="bg">
        <div>
            <table cellspacing="0" cellpadding="0">
                <tbody><tr><td>
                    <img alt="" src="pathtobackgroundimage/bg_image.jpg">
                </td></tr></tbody>
            </table>
        </div>
    </div>
</body>

Scrolling is only broken as long as the mouse pointer resides over the background image. If the mouse pointer is placed on top of the actual content, scrolling works fine.

I know that a table is the wrong method to realize a fullscreen background image, but I didn't know that it causes scrolling not to work in IE8 (at least in this case).

I couldn't find out in reasonable time which exact part of the background causes the problem. Since I will replace the table with a more up-to-date method anyway, I don't want to waste more time on it. If however, someone can share more insight on this, I would appreciate it.

Here's the related CSS

html, body, #bg, #bg table, #bg td {
    height: 100%;
    overflow: hidden;
    width: 100%;
}
#bg div {
    height: 200%;
    left: -50%;
    position: absolute;
    top: -50%;
    width: 200%;
}
html, body, #bg, #bg table, #bg td {
    height: 100%;
    overflow: hidden;
    width: 100%;
}
#bg td {
    text-align: center;
    vertical-align: middle;
}
#bg img {
    margin: 0 auto;
    min-height: 50%;
    width: 50%;
}

Upvotes: 1

Related Questions