Link to home
Create AccountLog in
Avatar of larissap

asked on

IE 8 Only Bug with :hover

I'm running into an IE 8 *only* problem/bug when hovering over both horizontal and vertical navbars.

I have tested it in Mac and Windows, in all major browsers (including IE 7, FF-mac and pc, chrome-mac and pc, opera-mac, and safari mac and pc) and the rollovers respond as desired. I don't care about IE 6 or IE9 beta.... but desired results in IE 7 and 8 are crucial. (sample page that this is happening... code is below) and the CSS is listed below.

The horizontal nav bar is #navbar.... the vertical navbar is #sidebar. I'm *well aware* that the #allcontent css does not validate. It is the shadow surrounding the content. It has nothing to do with this problem, as the hover issues happens in IE 8 regardless of this code or not.

I've read about many people having this issue but no solutions. I'm hoping that "the experts" can handle this and will resolve my problem.

I'm hoping that I will get constructive possible solutions instead of snarky responses that I should leave designing up to the experts.  I won't have access to a PC until morning to test out possible solutions (i have a mac only at home)

@charset "UTF-8";
/* CSS Document */

body{background-color:#ffffff;font-family: Arial, Helvetica, sans-serif;margin:0;padding:0;}

a img {border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;}
a {outline:none}

#allcontent{background-color:#00747a;width:1050px;border: 20px solid #00747a;margin-left:auto; margin-right:auto;min-width:250px; text-shadow:0 -1px 0 rgba(0,0,0,.8); box-shadow: 3px 3px 19px rgba(0,0,0,.8); -webkit-box-shadow: 3px 3px 19px rgba(0,0,0,.8); -moz-box-shadow: 3px 3px 19px rgba(0,0,0,.8);   filter:progid:DXImageTransform.Microsoft.Shadow(color=#7f7f7f,direction=0,strength=7)progid:DXImageTransform.Microsoft.Shadow(color=#7f7f7f,direction=90,strength=10)progid:DXImageTransform.Microsoft.Shadow(color=#7f7f7f,direction=180,strength=10)progid:DXImageTransform.Microsoft.Shadow(color=#7f7f7f,direction=270,strength=7)}


#navbar{background-color:#ffffff;width:1050px;height:16px;font-size:14px;font-family:Arial, Helvetica, sans-serif;border-bottom:10px solid #00747a;}

#navbar a
{color: #00747a;background: #ffffff;text-decoration: none;padding-left:15px;}

#navbar a span

#navbar a, #navigation a span
{display: block;float: left;}

#navbar a:hover, #navbar hover a
{color:#ffffff; background:#00747a;}

#navbar ul
{list-style: none;padding: 0;margin: 0;}

#navbar li {float: left;margin: 0;}

#sidebar {font-family:Arial, Helvetica, sans-serif; ; font-size:13px;  font-weight:bold; border-right:1px solid #00747a; padding: 0; margin-bottom:1em; color:#ffffff;width:225px;float:left;}

#sidebar ul {list-style:none; margin:0; padding:0;}

#sidebar ul li{margin:0; border-top: 1px solid #00747a;} 

#sidebar ul li a:link, #sidebar ul li a:visited {
display:block; padding:4px 4px 4px 0.5em; 
border-left: 10px solid #00747a; 
border-right: 1px solid #00747a; 
border-bottom: 1px solid #00747a; 

#sidebar ul li a:hover, #sidebar ul ul li a:hover, #sidebar ul li:hover a, #sidebar ul ul li:hover a
{border-left: 10px solid #ffffff; 
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
background:#ffffff url("../images/hover.gif") left center no-repeat;;

#sidebar .indent{margin-left:20px;} 

#sidebar .indent a:hover {margin-left:20px;border-left: 10px solid #ffffff; 
border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;
background:#ffffff url("../images/hover.gif") left center no-repeat;

#main{margin-top:0px;margin-right:0px;margin-bottom:0px; margin-left:230px; background-color:#ffffff;font-size:12px;padding-top:20px; padding-bottom:5px;padding-right:5px;padding-left:5px;color:#000000;}
#main a:link{color:#024548;}


.blue {color:#00747a;}
.tabledata{color:#00747a;margin-left:auto; margin-right:auto;}

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""><!-- InstanceBegin template="/Templates/bodypages.dwt" codeOutsideHTMLIsLocked="false" -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>About ERLLC</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="../css/body.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
	<meta http-equiv="Content-Language" content="en-US"/>
	<meta name="Copyright" content="(c)2008, Engineered Resources, LLC."/>
	<meta name="Keywords" content="Systems Engineering, Engineered Resources, Project Managment, Program Management, Project Planning, program execution, Process development, SBA, engineering services, engineering staff augmentation, qwik risk, risk assessment, erllc, construction support, process planning, engineering support, government support, construction project, project streamlining"/>
	<meta name="Description" content="Engineered Resources, ERLLC, has experience providing long and short-term Consulting Engineering and Construction Project Services emphasizing Engineering/Construction Contractor services and Systems Engineering"/>
	<meta name="revisit-after" content="15 days"/>
	<meta name="classification" content="Engineering"/>
	<meta http-equiv="reply-to" content=""/>
	<meta name="language" content="English"/>
	<meta name="doc-type" content="Web Page"/>
	<meta name="doc-class" content="Completed"/>
	<meta name="doc-rights" content="Copywritten Work"/>
	<meta name="robots" content="ALL"/>
	<meta name="distribution" content="Global"/>
	<meta name="rating" content="Safe For Kids"/>

<div id="allcontent">
<div id="logo"><a href=""><img src="../images/logo.png" width="1050" height="100" alt="Engineered Resources"/></a></div>

<div id="navbar">
<li><a href="index.html"><span>About Us</span></a></li>
<li><a href="../employment/index.html"><span>Employment</span></a></li>
<li><a href="../contact/index.html"><span>Contact Us</span></a></li>
<li><a href="../environmental/index.html"><span>Environmental Services</span></a></li>
<li><a href="../systems/index.html"><span>Systems &amp; Resources Integration</span></a></li>
<li><a href="../construction/index.html"><span>Construction &amp;  Engineering Support</span></a></li>
<li><a href="../index.html"><span>Home</span></a></li>

<!-- InstanceBeginEditable name="templatesidebar" -->
<div id="sidebar">
        <ul class="menu"><li><a href="index.html">About Us</a></li>
       <li><a href="index.html">Company Overview</a></li>
    <li><a href="erllcway.html">The ERLLC Way</a></li>
    <li><a href="index.html#mission_vision_values">Mission/Vision/Values</a></li>
    <li><a href="contractvehicles.html">Contract Vehicles</a></li>
    <li><a href="mentor.html">Mentor-Protégé</a></li>
    <li><a href="customers.html">What Our Customers Say</a></li>
    <li><a href="experience.html">Company Experience</a>
    <ul><li class="indent"><a href="experience.html#nuclear">Nuclear</a></li>
    <li class="indent"><a href="experience.html#commercial">Commercial</a></li>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="templatemain" -->
<div id="main"><p>Engineered Resources LCC (ERLLC) is an 8(a) small business enterprise with the capabilities and reach of many major American corporations. Over the past decade, we have established a strong reputation for excellence in providing management, consulting, and engineering services to government and private-sector clients. </p>
    <p>Our history, like many of our projects, is rooted in the U.S. Department of Energy, the National Nuclear Security Administration, its weapons production complex and prime contractors, and the Department of Defense. In recent years, we have expanded our scope to include a wide variety of commercial construction and engineering activities nationally and around the world.</p>
    <p>ERLLC provides short and long-term engineering and environmental services, with an emphasis on Success Staging. ERLLC's professional staff can provide project skills in the areas of Program/Project Management, Project Controls, Cost Estimating, Risk Management, Planning/Scheduling, Procurement, Contract/Project Administrators, Environmental Assessments, Quality, and various other technical specializations. The staff utilizes systems engineering methods as their foundation for approaching and executing all tasks (Problem/Opportunity Definition, Functional &amp; Requirements Analysis, Alternative/Decision Analysis, Verification &amp; Validation Assessment, Risk &amp; Opportunity Management, Interface Management).</p></div>
<!-- InstanceEndEditable -->

<div id="footer"><a href="../sitemap.html"><img src="../images/footer.png" width="1024" height="50" alt="footer"/></a></div>


<script type="text/javascript"> 
var $buoop = {vs:{i:6,f:2,o:10.01,s:3,n:9}} 
$buoop.ol = window.onload; 
 if ($buoop.ol) $buoop.ol(); 
 var e = document.createElement("script"); 
 e.setAttribute("type", "text/javascript"); 
 e.setAttribute("src", ""); 
<!-- InstanceEnd --></html>

Open in new window

Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of larissap


Thanks... I'll try that... can you provide your commenting?

I'm fairly new to CSS and usually include or discard code instead of commenting things out. Would it be "/* If IE 8 */ "?

If it's possible to include that code (it's for the drop shadow-like effect that adds that extra umph to the design) in IE 7 and just comment it out for IE 8, that would be ideal. It's currently working in IE 7 and like the overall design. I admit that I'm a designer over programmer and have a tendency to think that way.

The other browsers do ignore that code... it was added to get IE 7 and 8 to fake a drop shadow. Adds a lot to the overall look....but breaks another part apparently.

Thanks again

I don't have IE7 so I didn't see it at all.  In CSS, you use /* csssss */ to create comments.

/* filter:progid:DXImageTransform.Microsoft.Shadow(color=#7f7f7f,direction=0,strength=7)progid:DXImageTransform.Microsoft.Shadow(color=#7f7f7f,direction=90,strength=10)progid:DXImageTransform.Microsoft.Shadow(color=#7f7f7f,direction=180,strength=10)progid:DXImageTransform.Microsoft.Shadow(color=#7f7f7f,direction=270,strength=7) */
If you have any other browser (FF, Chrome Safari etc.)  you'll see the rollovers as they are supposed to be. On the top nav bar, the text turns from blue to white and the background reverses from white to blue. Similar reverse text and background changes happen on the sidebar in all other browsers.

Just for my knowledge, why would you comment it out entirely (as opposed to commenting it out for a specific version) instead of just getting rid of it?

Thanks again
I was just checking to see if that was what was causing the problem.  I have all the other browsers and I avoid using IE because it's slower on my machines.  According to this page , IE7's market share is less than IE6 now.  I wouldn't include anything that only worked in IE7.
Good to know... thanks... I'll  be able to test it out for myself in the am... I'll award points after I can see a solution with my own eyes.

I admit that I haven't kept up in the browser wars and have only recently gotten back into web design (from basic html pages 10 years ago..usually designed in Photoshop and used slices in a table....nothing sophisticated) and for years was in an industry that was 99% Mac... any problems on PC's and you could very easily get away with saying "well if you used a mac you wouldn't have any of those problems" with no further comments... so IE was never an issue after IE for Mac was discontinued. I'm just getting to know what its issues are.
There are three main browser families: Microsoft's IE, Firefox/Mozilla and it's derivatives, and Safari/Chrome which are Webkit based.  Amongst my Mac clients, Firefox is now the preferred browser.  Safari has come a long ways but many switched a few years ago when it was kind of crippled.
I have to agree. I use FF almost exclusively... there are a few sites that I need to use (like my banking) that don't like FF and I need to switch to Safari .... but the majority of everything that I browse is done in FF
Thanks again. You were right... problem solved!
Thanks for the points.