2

I was expecting this from Internet Explorer, but my beloved Firefox let me down on this one.

This fiddle will not work (at least for me it did not) on Firefox and I would like to know why. I have seen a lot of documentation and I guess this should be working.

Here is the fiddle: http://jsfiddle.net/6UFX7/11300/

HTML:

<div id="nav">
    <ul>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
    </ul>
</div>

CSS:

#nav 
{   
height:60px;
background-color:#FFFFFF;
overflow:hidden;
}

#nav ul 
{
color: #f2f2f2;
margin-top:20px;
list-style-type: none;
text-align: center;
float:left;
}

#nav ul li
{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 10px;   
}

#nav ul li a 
{
color: #8198A0;
font-style: normal;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}

#nav ul li a:after 
{
margin-top:16px;
content: "";
display: block;
height: 5px;
width: 0;
-webkit-transition: width 0.5s ease, background-color 0.5s ease;
-moz-transition: width 0.5s ease, background-color 0.5s ease;
-o-transition: width 0.5s ease, background-color 0.5s ease;
transition: width 0.5s ease, background-color 0.5s ease;
pointer-events:none;
}

#nav ul li a:hover:after 
{
width: 100%;
background-color:#8198A0;
}

#nav ul li a:hover
{
cursor: pointer;
}

One more quick question about "pointer-events:none":

It is working fine on Internet Explorer but not on Chrome (I could not test it on Firefox because the above problem).

Thanks in advance!

0

1 Answer 1

2

This appears to be because the #nav ul li a elements are the default display: inline. Adding display: inline-block; to these elements fixes the issue.

Working Example:

#nav 
{   
    height:60px;
    background-color:#FFFFFF;
    overflow:hidden;
}

#nav ul 
{
    color: #f2f2f2;
    margin-top:20px;
    list-style-type: none;
    text-align: center;
    float:left;
}

#nav ul li
{
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0 10px;   
}

#nav ul li a 
{
    color: #8198A0;
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
    transition: color 0.5s ease;
}

#nav ul li a:after 
{
    margin-top:16px;
    content: "";
    display: block;
    height: 5px;
    width: 0;
    -webkit-transition: width 0.5s ease, background-color 0.5s ease;
    -moz-transition: width 0.5s ease, background-color 0.5s ease;
    -o-transition: width 0.5s ease, background-color 0.5s ease;
    transition: width 0.5s ease, background-color 0.5s ease;
    pointer-events:none;
}

#nav ul li a:hover:after 
{
    width: 100%;
    background-color:#8198A0;
}

#nav ul li a:hover
{
    cursor: pointer;
}
<div id="nav">
    <ul>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
    </ul>
</div>

As for the pointer-events issue, if this does not solve that issue as-well, you should probably ask a question specifically about that.

1
  • It fixes the first problem, thanks a lot! However when I applied the changes that you suggested the "pointer-events" problem stops working on internet explorer. I think I can live with that ehehe Jan 22, 2015 at 22:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.