flynny
asked on
problem with a:hover in ie 8?
Hi all i have a nav menu in my page.
the css works fine in firefox, etc but in ie8 the following class isn't working?? any ideas why?
#nav
{
position: relative;
border-top: solid 1px #666666;
border-bottom: solid 1px #666666;
height:50px;
background-image:url('../i mages/nav_ bg.png');
background-repeat:repeat;
cursor:pointer;
}
#nav ul
{
float:left;
list-style-image:none;
list-style-position:outsid e;
list-style-type:none;
margin:0;
padding:0;
width:120px;
}
#nav li
{
margin:0;
padding:0;
}
#nav a
{
-x-system-font:none;
border-left:solid 1px #CCCCCC;
color:#555555;
display:block;
font-family:sans-serif,ari al;
font-size:14px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
margin:0;
padding:17px 5px 17px 5px;
text-align:center;
text-decoration:none;
}
#nav .logo
{
float:left;
padding: 0 0 0 10px;
border:none;
width:210px;
}
#nav ul a:hover:not(.logo)
{
position: relative;
border-left:solid 1px #666666;
background-color:#000000;
background: url('../images/nav_bg_mous e_over.png ');
background-repeat:repeat-x ;
color:#666666;
}
#nav ul ul
{
display:none;
border-top:solid 1px #666666;
border-bottom:solid 1px #666666;
background-color:#666666;
background: url('../images/nav_bg.png' );
background-repeat:repeat-x ;
}
#nav ul li:hover ul
{
display: block;
}
#nav ul ul:hover
{
border-right:solid 1px #666666;
}
html is
<div id="nav">
<div class="logo" onclick="window.location = 'index.asp'">
<img src="./images/logo_small.p ng" alt="Home"/>
</div>
<ul>
<li>
<a href="personal.asp">Person al</a>
<ul>
<li>
<a href="faqs.asp">FAQ's</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="cost.asp">Costing</a >
</li>
</ul>
<ul>
<li>
<a href="about_us.asp">about us</a>
</li>
</ul>
<ul>
<li>
<a href="civil.asp">Civil</a>
</li>
</ul>
<ul>
<li>
<a href="infant.asp">Infant</ a>
</li>
</ul>
<ul>
<li>
<a href="contact.asp">Contact Us</a>
</li>
</ul>
</div>
the css works fine in firefox, etc but in ie8 the following class isn't working?? any ideas why?
#nav
{
position: relative;
border-top: solid 1px #666666;
border-bottom: solid 1px #666666;
height:50px;
background-image:url('../i
background-repeat:repeat;
cursor:pointer;
}
#nav ul
{
float:left;
list-style-image:none;
list-style-position:outsid
list-style-type:none;
margin:0;
padding:0;
width:120px;
}
#nav li
{
margin:0;
padding:0;
}
#nav a
{
-x-system-font:none;
border-left:solid 1px #CCCCCC;
color:#555555;
display:block;
font-family:sans-serif,ari
font-size:14px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
margin:0;
padding:17px 5px 17px 5px;
text-align:center;
text-decoration:none;
}
#nav .logo
{
float:left;
padding: 0 0 0 10px;
border:none;
width:210px;
}
#nav ul a:hover:not(.logo)
{
position: relative;
border-left:solid 1px #666666;
background-color:#000000;
background: url('../images/nav_bg_mous
background-repeat:repeat-x
color:#666666;
}
#nav ul ul
{
display:none;
border-top:solid 1px #666666;
border-bottom:solid 1px #666666;
background-color:#666666;
background: url('../images/nav_bg.png'
background-repeat:repeat-x
}
#nav ul li:hover ul
{
display: block;
}
#nav ul ul:hover
{
border-right:solid 1px #666666;
}
html is
<div id="nav">
<div class="logo" onclick="window.location = 'index.asp'">
<img src="./images/logo_small.p
</div>
<ul>
<li>
<a href="personal.asp">Person
<ul>
<li>
<a href="faqs.asp">FAQ's</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="cost.asp">Costing</a
</li>
</ul>
<ul>
<li>
<a href="about_us.asp">about us</a>
</li>
</ul>
<ul>
<li>
<a href="civil.asp">Civil</a>
</li>
</ul>
<ul>
<li>
<a href="infant.asp">Infant</
</li>
</ul>
<ul>
<li>
<a href="contact.asp">Contact
</li>
</ul>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
great thank you the link you provided showed this.
it wasd the not() in the css.
it wasd the not() in the css.
Can we have the link.