Jump to content

[SOLVED] Background-Position Causes IE to Scroll


Hartley

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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! =)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.