CODEWITHSUNDEEP
htmlcss
sark9012
sark9012

Reputation: 5737

Style ul and li

I'm trying to style some unordered lists and running into problems...it isn't affecting the output!

The example I can't get to change.

<div id="footer">
    <div id="foot-nav">
        <ul>
            <li><a href="">home</a></li>
            <li><a href="">site map</a></li>
            <li>three</li>
        </ul>
    </div>
</div>

The CSS:

#footer #foot-nav ul.blah {
    list-style-type: none;
}

#footer #foot-nav ul.blah li.blah {
    padding:2px 0;  
}

#footer #foot-nav ul.blah li.blah a {
    color:#333;
    text-decoration: none;
}

#footer #foot-nav ul.blah li.blah a:hover {
    text-decoration: underline;
}

Another UL from the same page

.mobile-menu #mobile-menu-links ul{
    list-style-type: none;
    margin:0;
    padding-left:3%;
}

.mobile-menu #mobile-menu-links ul li{
   padding-bottom:2px;
   border-bottom:1px solid #bababa;
}

<div class="mobile-menu" id="mobile-account">
    <div id="mobile-menu-links">
        <h4>General:</h4>
        <ul>
            <li><a href="">View your profile</a></li>
            <li><a href="">Change your settings</a></li>
            <li><a href="">View your messages</a></li>
        </ul>
    </div>
</div>

The rules from the #mobile-menu ul is taking preference with the ul from the top of the question?

I'm obviously doing something wrong, could you help? Thanks!

Upvotes: 0

Views: 327

Answers (3)

Jim
Jim

Reputation: 73936

#footer #foot-nav ul.blah

This selector applies to <ul> elements that have the blah class, which is a descendant of an element with an ID of foot-nav, which is a descendant of an element with an ID of footer.

Aside from the last part, your HTML matches that, so I would assume that the problem is that your #foot-nav element is not within an element with an ID of footer.

You can either remove #footer from all your selectors, or you can put your #foot-nav element within an element that has an ID of footer.

Edit:

Okay, in light of the changes to the question, either there's something wrong with the CSS that is stopping it from getting applied at all, or the CSS is being overridden.

Inspect the element in a web browser's developer tools to see if the rules are showing up at all. If they are, then they are probably being overridden by rules elsewhere on the page. If that is the case, then you should be able to see where the other rules are while you are inspecting the element.

If the rules are not being applied at all, then it's likely there's something wrong with your CSS. Have you run it through a validator to check to see if there are no syntax errors? Are the rules within a media query that isn't in effect?

Upvotes: 0

Igbanam
Igbanam

Reputation: 6082

If you remove all the #footer aspects of the selectors you have on there, everything should work perfectly. I made a jsfiddle of the working copy. Let me know if this is the UI concept you had in mind. Also, I suggest you read up on CSS Specificity to understand how rules are prioritized when applied to different nested elements

Upvotes: 0

Andrew Clody
Andrew Clody

Reputation: 1181

http://jsfiddle.net/GgdhX/

You're using a lot of descendant selectors for IDs and needless classes on LI elements.

#foot-nav .blah{
   list-style-type: none;
 }

#foot-nav .blah li{
    padding:2px 0;  
 }

#foot-nav .blah li a{
    color:#333;
    text-decoration: none;
 }

#foot-nav .blah a:hover{
    text-decoration: underline;
}

<div id="foot-nav">
    <ul class="blah">
        <li><a href="">home</a></li>
        <li><a href="">site map</a></li>
        <li>three</li>
    </ul>
</div>

Upvotes: 1

Related Questions