[SOLVED] Background-Position Causes IE to Scroll

[Hartley]

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

				<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

/* 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; }

[Hartley]

I've adjusted the values for the height, and no matter the height, it "pops" the footer by the same 20-some pixels each time. I could do an image-replace, but background-position is more efficient and this is a... weird issue!

 

Thanks in advance!

[Hartley]

Posting the solution:

 

The culprit code:

 

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

 

Coupled with the following bug: http://www.positioniseverything.net/explorer/peekaboo.html

 

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!

[dbrimlow]

Just a little advice, if you use FF and have the Developer toolbar installed, disable images. Then in "options" disable java script.

 

Your whole page layout is based on graphics and javascript whereas the same look can be done with text, css and minimal graphics.

 

Because of this, your design markup has a bad case of "DIVitus". It will not do well in natural SEO ranking and people with visual disabilities.

[Hartley]

I appreciate the advice: just installed it and I see what you mean. Unfortunately I'm pressed to release soon, but I'll still have time to fix a lot of this shortly after launch. My target audience is college age students, so based off of that I should be relatively safe while I take the time to fix it.

 

Again, thanks for the program suggestion! =)

[dbrimlow]

Unfortunately I'm pressed to release soon, but I'll still have time to fix a lot of this shortly after launch.

 

Ahhh, understood. I live with that every day!