CODEWITHSUNDEEP
htmlcss
user2783193
user2783193

Reputation: 1022

css compatibility, in chrome one extra list item

I have html 

<div id="leftDiv">
<ul>
    <li class="submenu_items" style="display: list-item;">
        <ul class="nomargin"> 
            <li><a href="/link1.php">One</a></li>
            <li><a href="/link2.php">Two</a></li>
        </ul>
    </li>                
</ul>
</div>

css is

#leftDiv ul li.submenu_items ul.nomargin{
    margin:0;             
    list-style-image:none!important;
}

and I have

#leftDiv ul li{
   list-style-image: url("/images/spacer.png");
}

in ff everything looks fine but in chrome and opera I have extra image from ul li bg(/images/spacer.png) it looks like I have one extra list item in chrome and opera

enter image description here enter image description here

Upvotes: 1

Views: 73

Answers (1)

SW4
SW4

Reputation: 71160

See this Fiddle

You actually have 3 <li> nodes, your CSS isnt accomodating correctly for your desired output.

You may want to change your CSS to:

#leftDiv ul{
   list-style:none;
}
#leftDiv ul li.submenu_items ul.nomargin{
   margin:0; list-style:none!important; 
} 
#leftDiv ul ul li{ 
   list-style-image: url(/images/spacer.png); 
}

Upvotes: 1

Related Questions