1. Home
  2. Forums Index
  3. Browser Side / CSS 7:22 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

ie7 floating image

         

bytesofknow

4:51 pm on Sep 29, 2009 (gmt 0)

10+ Year Member



I have a strange issue that is only coming up in IE7, in my dropdown navigation i have an image as the last list item, for some reason in IE7 if you scroll through all the navigation in a fast manner it will start randomly appearing in the screen. I have tried adding it as a background image to the last item and also a div with the same results. This one has me stumped, any ideas?
<snip>

[edited by: swa66 at 5:42 pm (utc) on Sep. 29, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

D_Blackwell

5:35 pm on Sep 29, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



bytesofknow - Welcome to WebmasterWorld. The link is going to get chopped, and there is not enough information in the post to hazard a guess at the cause of the issue.

My recommendation is to strip the HTML and CSS down to the problem itself. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.
..............................

...in a fast manner...

How fast? Is the browser waiting for images or JS to catch up to mouse movement?

bytesofknow

9:42 pm on Sep 29, 2009 (gmt 0)

10+ Year Member



I am having an issue that is only showing in IE7. 6, 8, firefox and safari all work with no issues. There are three levels in the nav and the last level i am using an image in the last <li>. In ie7 once browsing through the navigation the image will start randomly showing. I have stripped all the code to just the css for the navigation and the nav itself. It all validates also, i am not figuring it out.
the code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Page</title>
<style type="text/css" media="all">
@import "css/undohtml.css";
</style>
<style type="text/css">
body {
margin:0 auto;
padding:0;
background:#f2f2f2;
font:12px Arial, Helvetica, sans-serif;
color:#303030;
}
#nav
{
float: left;
position: relative;
display: inline;
width: 964px;
margin-left: 3px;
height: 34px;
background: url(./images/nav_one_bg.png) repeat-x;
z-index: 99999;
bottom: -52px;
font-size: 18px;
color: #fff;
}
#nav ul
{
margin: 0;
}
#nav ul li
{
float: left;
display: inline-block;
}
#nav a
{
color: #fff;
text-decoration: none;
display: inline-block;
text-align: center;
padding: 6px 20px 8px 20px;
}
#nav li ul
{
list-style: none;
display: none;
z-index: 99;
font-size: 14px;
font-weight: bold;
width: 964px;
}
#nav li#nav_services ul,
#nav li#nav_providers ul,
#nav li#nav_members ul,
#nav li#nav_abouts ul,
#nav li#nav_careers ul
{
padding-left: 10px;
}
#nav li#nav_services ul li a,
#nav li#nav_providers ul li a,
#nav li#nav_members ul li a,
#nav li#nav_abouts ul li a,
#nav li#nav_careers ul li a
{
display: inline-block;
float: left;
position: relative;
padding: 8px 30px 7px 10px;
}
#nav li#nav_services:hover ul,
#nav li#nav_providers:hover ul,
#nav li#nav_members:hover ul,
#nav li#nav_abouts:hover ul,
#nav li#nav_careers:hover ul
{
float: left;
display: inline-block;
position: absolute;
width: 954px;
top: 33px;
left: 0;
margin: 0;
z-index: 9999999;
}
#nav li#nav_services ul.selected,
#nav li#nav_providers ul.selected,
#nav li#nav_members ul.selected,
#nav li#nav_abouts ul.selected,
#nav li#nav_careers ul.selected
{
float: left;
display: inline-block;
position: absolute;
width: 954px;
top: 33px;
left: 0;
margin: 0;
}
#nav li#nav_services ul a,
#nav li#nav_providers ul a,
#nav li#nav_members ul a,
#nav li#nav_abouts ul a,
#nav li#nav_careers ul a
{
padding-top: 8px;
z-index: 999999;
}
#nav li#nav_services ul a:hover,
#nav li#nav_providers ul a:hover,
#nav li#nav_members ul a:hover,
#nav li#nav_abouts ul a:hover,
#nav li#nav_careers ul a:hover,
#nav li#nav_services ul a.selected,
#nav li#nav_providers ul a.selected,
#nav li#nav_members ul a.selected,
#nav li#nav_abouts ul a.selected,
#nav li#nav_careers ul a.selected
{
text-decoration: underline;
z-index: 999999;
background: none;
}
#nav li#nav_home a:hover,
#nav li#nav_home a.selected
{
color: #a6a6a6;
}
#nav li#nav_services:hover,
#nav li#nav_services a.selected
{
background: url(./images/services_hover.png) no-repeat;
float: left;
}
#nav li#nav_services:hover ul,
#nav li#nav_services ul.selected
{
background-color: #85a264;
}
#nav li#nav_providers:hover,
#nav li#nav_providers a.selected
{
background: url(./images/providers_hover.png) no-repeat;
float: left;
}
#nav li#nav_providers:hover ul,
#nav li#nav_providers ul.selected
{
background-color: #613f5f;
}
#nav li#nav_members:hover,
#nav li#nav_members a.selected
{
background: url(./images/members_hover.png) no-repeat;
float: left;
}
#nav li#nav_members:hover ul,
#nav li#nav_members ul.selected
{
background-color: #782429;
}
#nav li#nav_abouts:hover,
#nav li#nav_careers:hover,
#nav li#nav_abouts a.selected,
#nav li#nav_careers a.selected
{
background: url(./images/about_hover.png) no-repeat;
float: left;
}
#nav li#nav_abouts:hover ul,
#nav li#nav_careers:hover ul,
#nav li#nav_abouts ul.selected,
#nav li#nav_careers ul.selected
{
background-color: #003145;
}
#nav li#nav_careers:hover,
#nav li#nav_careers a.selected
{
background: url(./images/about_hover.png) no-repeat;
float: left;
}
#nav li#nav_services ul:hover li ul,
#nav li#nav_services ul.selected li ul,
#nav li#nav_services:hover li ul,
#nav li#nav_abouts ul:hover li ul,
#nav li#nav_abouts ul.selected li ul,
#nav li#nav_abouts:hover li ul
{
display: none;
visibility: hidden;
background: none;
background-image: none;
}

#nav li#nav_services ul li ul,
#nav li#nav_abouts ul li ul
{
padding-top: 0px;
}
#nav li#nav_services ul li ul li a,
#nav li#nav_abouts ul li ul li a
{
text-align: left;
font-size: 13px;
font-weight: bold;
padding: 10px 0 0 1px;
width: 180px;
}
#nav li#nav_services ul li:hover ul,
#nav li#nav_abouts ul li:hover ul
{
float: left;
position: absolute;
visibility: visible;
background: url(./images/dropNavBg.png) repeat-y;
display: inline;
width: 193px;
top: 31px;
z-index: 1;
}
#nav li#nav_services ul li.dropNavBtm,
#nav li#nav_abouts ul li.dropNavBtm
{
padding: 0;
margin: 0px 0 0 0;
line-height: 0;
height: 0;
}
#nav li#nav_services ul li.dropBtm,
#nav li#nav_abouts ul li.dropBtm
{

margin-bottom: -8px;
}
#nav li#nav_services ul li .dropNavBtm img,
#nav li#nav_abouts ul li .dropNavBtm img
{
float: left;
position: absolute;
display: inline;
margin-left: -191px;
margin-top: 17px;
line-height: 0;
padding: 0;
width: 193px;
height: 28px;
}
#nav li#nav_services ul li:hover ul a,
#nav li#nav_abouts ul li:hover ul a
{
background: none;
}
#nav li#nav_abouts ul li ul.ulNews
{
left: 307px;
}
#nav li#nav_abouts ul li ul.ulResults
{
left: 449px;
}
#nav li#nav_abouts ul li ul.ulContact
{
left: 543px;
}
#nav li#nav_services ul li ul.ulone
{
left: 8px;
}
#nav li#nav_services ul li ul.ultwo
{
left: 181px;
}
#nav li#nav_services ul li ul.ulthree
{
left: 375px;
}
#nav li#nav_services ul li ul.ulfour
{
left: 574px;
}
#nav li#nav_services ul li ul.ulfive
{
left: 713px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li id="nav_home"><a href="#">Home</a></li>
<li id="nav_services"><a href="#">Services</a>
<ul>
<li><a href="#">Medicaid Agencies</a>
<ul class="ulone">
<li><a href="#">Disease Management</a></li>
<li><a href="#">Preventive &amp; Wellness</a></li>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">Utilization Management</a></li>
<li><a href="#">External Quality Review</a></li>
<li><a href="#">Pre-Admission Screening</a></li>
<li><a href="#">Clinical Best Practice</a></li>
<li class="dropBtm"><a href="#">Health Intelligence</a></li>
<li class="dropNavBtm"><img src="./images/dropNavBtm.png" alt="Navigation Bottom Curve" /></li>
</ul>
</li>
<li><a href="#">State/Local Employers</a>
<ul class="ultwo">
<li><a href="#">Preventive &amp; Wellness</a></li>
<li><a href="#">Disease Management</a></li>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">EAP &amp; Work-Life</a></li>
<li class="dropBtm"><a href="#">Health Intelligence</a></li>
<li class="dropNavBtm"><img src="./images/dropNavBtm.png" alt="Navigation Bottom Curve" /></li>
</ul>
</li>
<li><a href="#">Commercial Employers</a>
<ul class="ulthree">
<li><a href="#">Preventive &amp; Wellness</a></li>
<li><a href="#">Disease Management</a></li>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">EAP &amp; Work-Life</a></li>
<li class="dropBtm"><a href="#">Health Intelligence</a></li>
<li class="dropNavBtm"><img src="./images/dropNavBtm.png" alt="Navigation Bottom Curve" /></li>
</ul>
</li>
<li><a href="#">Labor &amp; Union</a>
<ul class="ulfour">
<li><a href="#">Preventive &amp; Wellness</a></li>
<li><a href="#">Disease Management</a></li>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">EAP &amp; Work-Life</a></li>
<li class="dropBtm"><a href="#">Health Intelligence</a></li>
<li class="dropNavBtm"><img src="./images/dropNavBtm.png" alt="Navigation Bottom Curve" /></li>
</ul>
</li>
<li><a href="#">Health Plans</a>
<ul class="ulfive">
<li><a href="#">Disease Management</a></li>
<li><a href="#">Preventive &amp; Wellness</a></li>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">Utilization Management</a></li>
<li class="dropBtm"><a href="#">Health Intelligence</a></li>
<li class="dropNavBtm"><img src="./images/dropNavBtm.png" alt="Navigation Bottom Curve" /></li>
</ul>
</li>
</ul>
</li>
<li id="nav_providers"><a href="#">Providers</a>
<ul>
<li><a href="#">Provider Relations Contacts</a></li>
<li><a href="#">Tools and Materials</a></li>
<li><a href="#">Provider Claims</a></li>
</ul>
</li>
<li id="nav_members"><a href="#">Members</a>
<ul>
<li><a href="#">APSHelpLink</a></li>
<li><a href="#">Knowledgebase</a></li>
<li><a href="#">Online Provider Locator</a></li>
</ul>
</li>
<li id="nav_abouts"><a href="#">About</a>
<ul>
<li><a href="#">Company Overview</a></li>
<li><a href="#">Leadership</a></li>
<li><a href="#">News &amp; Events</a>
<ul class="ulNews">
<li><a href="#">APS In The News</a></li>
<li><a href="#">Press Releases</a></li>
<li><a href="#">Events</a></li>
<li class="dropBtm"><a href="#">Media Contact</a></li>
<li class="dropNavBtm"><img src="./images/dropNavBtm.png" alt="Navigation Bottom Curve" /></li>
</ul>
</li>
<li><a href="#">Results</a>
<ul class="ulResults">
<li><a href="#">Program Results</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Presentations &amp; Posters</a></li>
<li class="dropBtm"><a href="#">White Papers</a></li>
<li class="dropNavBtm"><img src="./images/dropNavBtm.png" alt="Navigation Bottom Curve" /></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul class="ulContact">
<li><a href="#">Corporate Contacts</a></li>
<li><a href="#">Provider Contacts</a></li>
<li class="dropBtm"><a href="#">APS Locations</a></li>
<li class="dropNavBtm"><img src="./images/dropNavBtm.png" alt="Navigation Bottom Curve" /></li>
</ul>
</li>
</ul>
</li>
<li id="nav_careers"><a href="#">Careers</a>
<ul>
<li><a href="#" target="_blank">Current Job Openings</a></li>
<li><a href="#">Benefits</a></li>
</ul>
</li>
</ul>
</div><!--end nav-->

</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 7:22 pm May 1, 2026