Forum Moderators: not2easy
I have an unordored list of links -- this is the sites main navigation. This list is in the sidebar, which is floated left on the page.
When you hover over the list item links, the content below the list mysteriously starts to wander off down the page. Each time you hover over and off a link the content below travels down the page a little.
I cannot seem to find this bug referenced on the net anywhere although I suspect it has been recorded somewhere as I'm not using any experiemental code -- fairly bog standard stuff.
The only thing I'm doing differently to usual is I've written the left sidebar HTML underneath the content HTML, then floated the content to the right and the sidebar to the left.
Does anyone know of a good workaround for this bug?
Thanks,
PS
When you hover over the list item links, the content below the list mysteriously starts to wander off down the page.
Try putting borders on the list items, or the links themselves to see if it sheds any light.
#nav ul li { border: 1px solid #ff0000; }
#nav ul li a { border: 1px solid #00ff00; }
It's probably not a "bug" other than the way IE manages padding and margins; probably something in your hover selector is causing it to "grow" in size and push the other kids around. It only takes one pixel sometimes.
Minimize your page code to exemplify the problem and post it here, others will be able to help.
Here's the css for some quick examination:
#sidebar { float: left; width: 280px; background: url(images/sidebar.gif); margin: 0 0 20px 0; }
/* ##### #categories ##### */
#categories ul { background: url(images/sidebar_ul.gif) no-repeat top; padding: 10px 0 0 0; margin: 0; }
#categories ul li { width: 280px; height: 60px; background: url(images/categories_li.jpg) left bottom; line-height: 58px; text-align: left; font-size: 1.7em; }
#categories ul li a { width: 280px; height: 60px; background: url(images/categories_li.jpg) left top; display: block; color: #336699; text-decoration: none; text-indent: 30px; }
#categories ul li a:hover { background-position: left bottom; color: #cc3366; }
/* ##### /#categories ##### */
I'll try specifying heights and stuff on the hover to make sure it's not adjusting heights on hover.
I'll get back to you with further info after seeing what happens with the borders on.
Here's the HTML:
<div id="sidebar">
<ul>
<li id="categories">
<ul>
<li><a href="/category/reminiscence.asp">reminiscence</a></li>
<li><a href="/category/crafts.asp">crafts</a></li>
<li><a href="/category/dvd.asp">DVD</a></li>
<li><a href="/category/music.asp">music</a></li>
<li><a href="/category/games.asp">games</a></li>
<li><a href="/category/puzzles.asp">puzzles</a></li>
<li><a href="/category/outdoor.asp">outdoor activities</a></li>
</ul>
</li>
<!-- /#categories -->
</ul>
</div>
<!-- /#sidebar -->
The content below the ul is still moving down the page when you hover on and off the ul li a's in the category list.
You'll need to add some content below the said category list to witness this.
<ul>
<li id="categories">
<ul>
<li><a href="/category/reminiscence.asp">reminiscence</a></li>
<li><a href="/category/crafts.asp">crafts</a></li>
<li><a href="/category/dvd.asp">DVD</a></li>
<li><a href="/category/music.asp">music</a></li>
<li><a href="/category/games.asp">games</a></li>
<li><a href="/category/puzzles.asp">puzzles</a></li>
<li><a href="/category/outdoor.asp">outdoor activities</a></li>
</ul>
</li>
<!-- /#categories -->
<li id="accreditation-logos">
<ul>
<li><a href="http://www.example.com/"><img src="../images/napa.gif" alt="National Association for Providers of Activities for Old People" /></a></li>
</ul>
</li>
<!-- /#accreditation-logos -->
<li id="actividea-sidebar"><a href="#">view our customer's activideas</a></li>
<li id="suitability-legend">
<p>Where you see these icons on product pages, we have labelled the product with our suitabilitty guidelines, as follows.</p>
<ul>
<li class="r"><a href="/suitable-for-residential-home/">Suitable for residential homes</a></li>
<li class="n"><a href="/suitable-for-nursing-home/">Suitable for nursing homes</a></li>
<li class="d"><a href="/suitable-for-dementia/">Suitable for people with dementia</a></li>
</ul>
</li>
<!-- /#suitability-legend -->
<li id="email-newsletter">
<form action=newslettersignup.asp method=post>
<h4>Special offers by email</h4>
<p>To receive occassional discounts, special offers and new product information by email (only from activchoice) enter your name and email address below.</p>
<p class="aninput"><span>Name:</span> <input type="text" id="signupname" /></p>
<p class="aninput"><span>Email:</span> <input type="text" id="signupemail" /></p>
<p id="sign-up"><input value="Submit" type="image" src="/images/newsletter_signup.gif" /></p>
</form>
</li>
</ul>
</div>
<!-- /#sidebar -->
Note that the part that moves down the page is the newsletter li.
Here is the CSS for the content below the categories:
#accreditation-logos { padding: 20px 0; }
/* ##### #avtiveidea-sidebar ##### */
#actividea-sidebar { background: url(images/actividea_sidebar.jpg) left bottom; width: 240px; height: 58px; margin: 15px auto; }
#actividea-sidebar a { background: url(images/actividea_sidebar.jpg) left top; width: 240px; height: 58px; display: block; text-indent: -5000px; overflow: hidden; }
#actividea-sidebar a:hover { background-position: left bottom; }
/* ##### /#avtiveidea-sidebar ##### */
/* ##### #suitability-legend ##### */
#suitability-legend { background: url(images/suitability_icons_blue.gif); text-align: left; width: 240px; margin: 0 auto; }
#suitability-legend p { padding: 15px 15px 5px 15px; color: #666; }
#suitability-legend ul { padding: 0 15px 15px 15px; }
#suitability-legend ul li { height: 32px; line-height: 32px; color: #666; font-size: 1.1em; padding: 0 0 0 36px; }
#suitability-legend ul li.r { background: url(images/r.gif) no-repeat left -3px; }
#suitability-legend ul li.n { background: url(images/n.gif) no-repeat left -3px; }
#suitability-legend ul li.d { background: url(images/d.gif) no-repeat left -3px; }
/* ##### /#suitability-legend ##### */
/* ##### #email-newsletter ##### */
#sidebar ul li#email-newsletter { background: url(images/sidebar_bot.gif) no-repeat center bottom; padding: 20px 30px 30px 30px; text-align: left; }
#sidebar ul li#email-newsletter h4 { color: #3399cc; font: 1.5em Arial; margin: 0 0 10px 0; }
#sidebar ul li#email-newsletter p.aninput { padding: 2px 0; }
#sidebar ul li#email-newsletter input { float: right; }
#sidebar ul li#email-newsletter p span { float: left; }
#sidebar ul li#email-newsletter p { clear: right; color: #555; margin: 0 0 8px 0; font: 1.05em/1.4em Arial; }
#sidebar ul li#email-newsletter p#sign-up { text-align: center; padding: 6px 0; }
#sidebar ul li#email-newsletter p#sign-up a { background: url(images/newsletter_signup.gif); width: 144px; height: 34px; display: block; text-indent: -5000px; overflow: hidden; margin: 0px auto; }
/* ##### /#email-newsletter ##### */
[edited by: swa66 at 10:05 pm (utc) on May 20, 2009]
[edit reason] Use example.com for URLs [/edit]
...any ideas anyone?
