Firefox is inconsistent on li element

Question

_______________________EDIT_______________________

created an jsFiddle: Fiddle Link

_______________________EDIT_______________________

Hello,

I'm trying to fix this CSS bug, but i just cant see why this is happening! Firefox is failing to show this correctly while other browsers show it correctly.

When i look to the divs, it appears that the Li is higher then in the other browsers.

Any ideas?

Here is my HTML and my CSS code.

HTML

  <ul class="popnav" >
            <li><img src="@Url.Content("~/Content/Images/add.png")" width="32" height="32" />      
                <ul class="SideNav popnav"  >                        
                                <li> @Html.ActionImage("Create", "Event", new { Type = 1 }, "~/Content/Images/icon_event_smaller.png", "New", "Appointment")

                               </li>   

                                <li> @Html.ActionImage("Create", "Event", null, "~/Content/Images/task_smaller.png", "New", "Task")

                               </li>
                                <li> @Html.ActionImage("Create", "Document", null, "~/Content/Images/doc_smaller.png", "New", "Document")

                                </li>       
                                <li> @Html.ActionImage("Create", "Company", null, "~/Content/Images/comp_smaller.png", "New", "Company")</li>   
                                <li> @Html.ActionImage("Create", "Contact", null, "~/Content/Images/person_smaller.png", "New", "Contact")</li>                   

                </ul>
                <div class="clear"></div>
<li></li> 
....

CSS

     *
{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    font-size: 12px;
    font-family: Sans-serif;
    color: #404040;
}
  .clear
    {
        clear: both;
    }
    /* remove the list style */
    .popnav
    {
    }

    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    .popnav li
    {
        float: left;
        display: block;
        position: relative;
        z-index: 500;
    }

    .popnav li ul li:hover
    {
        background-color: #45a6cf;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -webkit-box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);
        -moz-box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);
        box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0.1);
    }
    .popnav li ul li:hover a
    {
        -webkit-transition: all 0.0s ease-out;
        -moz-transition: all 0.0s ease-out;
        -o-transition: all 0.0s ease-out;
        -ms-transition: all 0.0s ease-out;
        color: White;
    }

    .popnav li ul li:hover .SideSubNav a
    {
        color: #404040;
    }
    .popnav li ul li:hover .SideSubNav a:hover
    {
        color: White;
    }
    /* this is the parent menu */
    .popnav li a
    {
        display: block;
        height: 23px;
        text-decoration: none;
        text-align: left;
        margin-left: 8px;
        text-shadow: none;
        color: #404040;
    }

    #main #col1 ul li img
    {
        padding-right: 5px;
    }
    #bNav .popnav li img
    {
        padding-bottom: 10px;
    }

Answer 1

Just try to set a fixed height for .popnav li, this way you should resolve quickly. In other cases you may want to reset your CSS.

Every browser has different default settings in the visual representation of HTML elements. For this reason it is very useful to implement a CSS reset that removes and neutralizes the inconsistent default browser styling settings.

The Eric Meyer's CSS reset is one of the most popular, but you can always find other solutions by looking on search engines.