Question

I’m writing simple menu module for Joomla! and at this point I’m working on a core css structure – let’s say ataptable template – that will reset most important global css declarations. I have a problem w CSS hierarchy in the following HTML structure:

<div id="main" role="main">
<div id="top">
    <div class="menu">
        <ul class="main-level">
            <li class="main-level">
                <a class="main-level" href="/joomla17/index.php/using-joomla">Using Joomla!</a>
                    <ul class="sub-level">
                        <li class="sub-level">
                            Menu Item
                        </li>
                    </ul>
            </li>
        </ul>
    </div>
</div>

And CSS files:

Main layout css file (indepentent from the module):

/* PART OF MAIN LAYOUT FILE */          
    #main ul {    
list-style-position: outside;
        list-style-type: square;
        margin: 10px 0;
        padding: 0 0 0 15px;
    }

Module css file ( declarations that should reset css globals ):

    /* MY MODULE CLASSES */
.mod_sjqmenu ul.sub-level {
    border: 1px solid #666666;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: left;
    width: 100%;
}

.mod_sjqmenu ul {
    cursor: pointer;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 9999;
}

For some reason my module declarations do not overwrite margin and padding attributes (others as well). I’m confused – why? In my opinion thay should rule over #main ul and set margin and padding to 0 as they are deeper in hierarchy and closer to the DOM object.

What am I missing or where is my error?

Answer 1

I “think” its the order in which the rules are loaded but you can override by using !important if you want

so for instance
`list-style-position: outside !important;

    list-style-type: square !important;
    margin: 10px 0 !important;
    padding: 0 0 0 15px !important;
}`