Background-Position Causes IE to Scroll

Aerdan · May 9th, 2008, 07:46

Here is the page with the problem (note: still going through design and graphics overhaul, so it'll load slow until I get through that phase)

http://www.castbuzz.com/newtest/

On the right side, in IE, if you roll over the links it'll cause the footer of the container to shift down a bit, taking down everything else in the page that's in the background area. It moves it a set amount that is independent of the -29px I have set in the CSS. Here is a copy of the relevant CSS for the entire container and the HTML. Note I am not including the CSS markup for the news loader since I've tested it out as being irrelevant:

HTML

Code: Select all

                <div class="box">
                    <div class="box-bg">
                        <div class="box-info">
                            <div class="maincolumn">
<!--begin main content-->
<!--CODE REMOVED FOR SPACE-->
<!--end main content-->
                            </div>
                            <div class="sidecolumn">
                                <div class="module">
                                    <div class="module-nav"></div>
                                    <div class="module-bg">
                                        <ul id="nav-side">
                                            <li><a href="#" class="latest-s">Latest News and Updates</a></li>
                                            <li><a href="#" class="guides">Program Guides and FAQs</a></li>
                                            <li><a href="#" class="articles">CastBuzz Articles</a></li>
                                            <li><a href="#" class="journal">Website Journal</a></li>
                                        </ul>
                                    </div>
                                    <div class="module-foot"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-foot"></div>
                </div>
            </div>

CSS

Code: Select all

/* main box */
#content .box {
    width:960px;
    overflow:hidden;
    clear:both;
}

#content .box-bg { background:url(../images/box-bg.jpg) repeat-y; }

#content .box-info {
    background:url(../images/box-top.jpg) no-repeat;
    width:936px;
    overflow:hidden;
    min-height:150px;
    padding:17px;
}

* html #content .box-info {
    overflow:visible;
    height:150px;
}

.maincolumn {
    float:left;
    width:672px;
    overflow:hidden;
    padding:0;
    position:relative;
}

.sidecolumn {
    float:left;
    width:262px;
    overflow:hidden;
    padding:0;
    position:relative;
}

#content .box-foot {
    background:url(../images/box-foot.png) no-repeat;
    width:960px;
    height:10px;
    margin:0 0 20px 0;
    overflow:hidden;
}

/* sidecolumn module */
.module {
    width:254px;
    overflow:hidden;
    clear:both;
}

.module-foot {
    width:254px;
    height:4px;
    background:url(../images/module-foot.gif) no-repeat;
    margin:0;
    padding:0;
    overflow:hidden;
}

.module-bg { background:url(../images/module-bg.gif) repeat-y; }

.module-nav {
    width:254px;
    height:43px;
    background:url(../images/module-nav-news.jpg) no-repeat;
    margin:0;
    padding:0;
    overflow:hidden;
}

/* nav */
#nav-side {
    width:250px;
    margin:0;
    padding:0 2px 0 2px;
    list-style:none;
    overflow:hidden;
}

#nav-side li {
    float:left;
    position:relative;
}

#nav-side li:hover ul, #nav-side-news li.hover ul { display:block; }

#nav-side li a {
    float:left;
    width:250px;
    height:29px;
    text-indent:-9999px;
}

#nav-side li a.latest { background:url(../images/nav-latest.jpg) no-repeat; }
#nav-side li a.latest:hover { background-position: 0 -29px; }
#nav-side li a.latest-s { background:url(../images/nav-latest.jpg) no-repeat 0 -58px; }

#nav-side li a.guides { background:url(../images/nav-guides.jpg) no-repeat; }
#nav-side li a.guides:hover { background-position: 0 -29px; }
#nav-side li a.guides-s { background:url(../images/nav-guides.jpg) 0 -58px; }

#nav-side li a.articles { background:url(../images/nav-articles.jpg) no-repeat; }
#nav-side li a.articles:hover { background-position: 0 -29px; }
#nav-side li a.articles-s { background:url(../images/nav-articles.jpg) 0 -58px; }

#nav-side li a.journal { background:url(../images/nav-journal.jpg) no-repeat; }
#nav-side li a.journal:hover { background-position: 0 -29px; }
#nav-side li a.journal-s { background:url(../images/nav-journal.jpg) 0 -58px; }

spinal007 · May 10th, 2008, 14:39

That's the infamous IE Peek-a-boo bug. This article tells you how to work around it:
http://www.positioniseverything.net/.../peekaboo.html

Aerdan · May 11th, 2008, 01:37

That makes sense, I looked at the code to see what it could be exposing and this is what I found...

The culprit code:

Code: Select all

#content .box-info {
    background:url(../images/box-top.jpg) no-repeat;
    width:936px;
    overflow:hidden;
    min-height:150px;
    padding:17px;

The displacement was 17px, and it fit the bill. When I removed this padding, the problem was solved. For my own CSS, I put the padding within the main and side column CSS code, and no more problem! Thank you!