CODEWITHSUNDEEP
htmlcss
Marcel
Marcel

Reputation: 906

List Style Conflicting CSS

I am using the code below to generate a side menu, But wherever I include the menu, all the list icons on those pages also disapear...

How can I limit the list style changes to this php file only, or change the css so that it only applies to this UL?

<style type="text/css">
ul li li:before {
    content: none !important;
    font-size:100px;
}

.art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before{
    content:none !important;    
}

.art-postcontent ul>li, .art-post ul>li, .art-textblock ul>li{
    padding-left:0px !important;    
}
</style>
<div class="art-vmenublock clearfix" style="width:100%">
        <div class="art-vmenublockheader" style="width:100%">
            <h3 class="t">Welcome <br/> <? echo $full_name; ?></h3>
        </div>
        <div class="art-vmenublockcontent" style="width:100%">
<ul class="art-vmenu leftmenu" style="margin-top: -2px; margin-left: -1px;">
    <li><a href="index.php/my-account" <? if($_SERVER['REQUEST_URI']=='/index.php/my-account'){echo 'class="active"';}?> >Dashboard</a>
        <? /* <ul class="active">
            <li><a href="main/new-page.html">New Page</a>
            </li>
                <li><a href="main/new-page-2.html">New Page 2</a></li>
                <li><a href="main/new-page-3.html">New Page 3</a></li>
            </ul>*/?>
        </li>
        <li><a href="index.php/my-account/companies" <? if($_SERVER['REQUEST_URI']=='/index.php/my-account/companies'){echo 'class="active"';}?> >Companies</a></li>
        <li><a href="index.php/my-account/logout">Log-Out</a></li>       
       </ul>  
</div>
</div>

Upvotes: 0

Views: 263

Answers (1)

Robin James Kerrison
Robin James Kerrison

Reputation: 1757

Give your ul an id attribute with a value of say, no-list-style and then change any references to ul in your CSS to be ul#no-list-style.

Your <ul> tag would now be

<ul id="no-list-style" class="art-vmenu leftmenu" style="margin-top: -2px; margin-left: -1px;">

and your CSS would now be

ul#no-list-style li li:before {
    content: none !important;
    font-size:100px;
}

.art-postcontent ul#no-list-style>li:before, .art-post ul#no-list-style>li:before, .art-textblock ul#no-list-style>li:before{
    content:none !important;    
}

.art-postcontent ul#no-list-style>li, .art-post ul#no-list-style>li, .art-textblock ul#no-list-style>li{
    padding-left:0px !important;    
}

Upvotes: 1

Related Questions