Member Avatar for php_noob

I have 2 sets of List in my page and I need to make them work in different manner.

but the 2nd set is inheriting the setting of the first, they already have different ID names!!!

What should I do? :(

  • 3 Contributors
  • 7 Replies
  • 117 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

The thread already has the right direction — spotted the missing container and outlined a good “base ul + per-list overrides” approach — but two practical pitfalls keep causing styles to leak between lists. These are: (1) comma-separated selectors that are accidentally unscoped, and (2) styling the li instead of the a, which makes hover/active areas inconsistent and harder to override.

Scope grouped selectors so every comma-separated part includes the nav container. For example, scope both normal and visited link rules to the same nav rather than leaving one selector global:

/* both selectors are explicitly scoped to the nav */
#page-nav li a,
#page-nav li a:visited {
  color: #666;
}

#page-nav li a:hover,
#page-nav li a:focus {
  color: #fff;
}

Prefer styling the anchor itself (not the li) so padding, backgrounds and hit area follow the clickable element. Using display:inline-block on the a gives consistent spacing and makes hover states obvious:

#sys-nav li a {
  display:inline-block;
  padding:0.3em 0.6em;
  background: url('icons/nav-dot.png') no-repeat left center;
  text-decoration:none;
}

Quick troubleshooting checklist:

  • Inspect the computed styles in browser devtools to see which rule is winning and where it comes from.
  • Check for an unscoped selector like a:visited sitting somewhere later in the stylesheet.
  • If you need to override third-party rules, increase specificity (e.g., #title-nav li a) or move your rules later in the cascade.
  • Remember pseudo-class ordering (LVHA: :link, :visited, :hover, :active) and include :focus for keyboard users.

Building on ’s pattern (common ul rules then per-nav overrides) and ensuring selectors are properly scoped will prevent the two lists from fighting over styles.

Recommended Answers

All 7 Replies

Member Avatar for Airshow

php_noob,

What should I do? :(

You could start by posting your HTML/CSS.

Airshow

Member Avatar for php_noob

php_noob,

You could start by posting your HTML/CSS.

Airshow

:D RIGHT!

Member Avatar for php_noob 
#page-nav{margin:-9px 0 0 20.4em; padding: 0; list-style-type: none; height:1.5em;}
#page-nav li{ background:url(../images/assets/monitor.png) no-repeat .2em; display:inline; padding-left:1.5em;}
#page-nav li a:link, a:visited{ font:.7em/1em Tahoma, Verdana, Arial; margin-right:1.5em; text-decoration:none; color:#666666; font-weight:bold; } 
#page-nav li a:hover{ font:.7em/1em Tahoma, Verdana, Arial; margin-right:1.5em; text-decoration:none; color:#FFFFFF; font-weight:bold; }

This is the css

This is the HTML

<div id="title-nav">
<ul>
						<li><a href="#" title="Homepage">Home</a></li>
						<li><a href="#" title="Logging Out">Logout</a></li>
					</ul>
</div>

And the style of this LIST is inherited by this set of LI on the same page

<div id="sys-nav">
<ul>
				<li><a href="#"><img src="images/main-menu-icon.png" alt="Check Voucher" border="0" />Check Voucher</a></li>
				<li><a href="#"><img src="images/main-menu-icon.png" alt="Check Voucher" border="0" />Reports</a></li>
				</ul>
</div>
Member Avatar for Troy III

For a start, -that's because there is no container element with ID "page-nav" in your html content. And that "#page-nav" css selector is targeting contained list-items on nonexistent element.

Member Avatar for php_noob

For a start, -that's because there is no container element with ID "page-nav" in your html content. And that "#page-nav" css selector is targeting contained list-items on nonexistent element.

OH YES!

So it should be

<ul id="page-nav">
<li>......</li>
</ul>

But if ever I have sets of UNordered lists on a page am I going to give each and every LI's LINKS <p>'s on a certain UNORDERD list? is there a better way?

Thanks for the observation! ;)

Member Avatar for Troy III

Yes. There's no need for <p> element in front of <li>, so no, you don't have to.

Otherwise I must confess I hardly understand your question, if at all. But I will presume that your problem is solved.

Cheers.

Member Avatar for Airshow

php_noob,

I understand (maybe incorrectly) that you want two independently styled Unordered Lists on the same page - one list has id="title-nav" and the other id="sys-nav" . If so, then this is the overall schema for your CSS:

ul {
    /*  put common style directives for unordered lists here */
    .......
}
#title-nav {
    /*  put style directives for title-nav here */
    /*  these will augment/override those in the common (ul) block above */
    .......
}

#sys-nav {
    /*  put style directives for sys-nav here */
    /*  these will augment/override those in the common (ul) block above */
    .......
}

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.