• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 329
  • Last Modified:

CSS precedence

Somehow, all the browsers will apply ".left-nav .lhs-quick-links ul li a" instead of ".left-nav .lhs-quick-links ul li a.external_icon"

It should be applying ".left-nav .lhs-quick-links ul li a.external_icon" instead.

Please see below.

in the HTML:

<ul class="lhs-quick-links">
<li>
<a xmlns:manip="http://www.lateralsystems.com/manip" target="_blank" title="Australian" href="http://www.acara.edu.au/" class="external_icon">Australian</a>
<br xmlns:manip="http://www.lateralsystems.com/manip">
</li>
<li>
<a xmlns:manip="http://www.lateralsystems.com/manip" target="_blank" title="Chinese" href="http://www.aitsl.edu.au/" class="external_icon">Chinese</a>
<br xmlns:manip="http://www.lateralsystems.com/manip">
</li>
</ul>

In the CSS:

.left-nav .lhs-quick-links ul li a {
      text-decoration: none;
      color: #41407B;      
      display: block;
      font-family: Helvetica, Verdana, Arial, sans-serif;
      background: url("/images/navigation/arrow.gif") no-repeat scroll 0px 12px transparent;
      /*background: url(/images/buttons/inner_inactive.gif);*/
}

.left-nav .lhs-quick-links ul li a.external_icon {
      background: transparent url("/images/icons/external-link.gif") no-repeat center right;
      padding-right: 12px;
}
0
jeremyll
Asked:
jeremyll
  • 2
2 Solutions
 
jonahzonaCommented:
Got it.

Your selectors are wrong.

You have
.left-nav .lhs-quick-links ul li a.external_icon

Open in new window


It should be like this:
.left-nav ul.lhs-quick-links li a.external_icon

Open in new window


Notice the difference?

In the first one you aren't defining the ul class. You are simply defining a class with a ul nested inside of it.

Try it and let me know if it works.
0
 
jeremyllAuthor Commented:
it just started working for no reason. I didn't change the code.

thanks jonahzona thats useful info.

So, what I have:

.left-nav .lhs-quick-links ul li a.external_icon

this would suit this HTML below?
<div class="lhs-quick-links">
<ul>
<li>
<a xmlns:manip="http://www.lateralsystems.com/manip" target="_blank" title="Australian" href="http://www.acara.edu.au/" class="external_icon">Australian</a>
<br xmlns:manip="http://www.lateralsystems.com/manip">
</li>
<li>
<a xmlns:manip="http://www.lateralsystems.com/manip" target="_blank" title="Chinese" href="http://www.aitsl.edu.au/" class="external_icon">Chinese</a>
<br xmlns:manip="http://www.lateralsystems.com/manip">
</li>
</ul>
</div>
0
 
jonahzonaCommented:
That is one way to do it. My point was to leave the HTML markup the way it was and just fix your CSS.

Keep in mind if you put <ul class="sample"> that your CSS selector needs to be ul.sample - not .sample ul - those are two totally different animals.

Let me know if you need anything else.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now