CODEWITHSUNDEEP
cssjquery-mobiletabs
Karin
Karin

Reputation: 61

css override not working?

I have three tabs that change styles when clicked. class="active" gives the tab the same background as the tab content, while class="inactive" has another color.

My problem is the text on the tabs, something's weird with the CSS. The default state of class="active" looks as it should, while the inactive tabs are underlined even though my CSS says text-decoration: none !important; and the clicked active tab text becomes extra bold (or maybe it's a shadow).

Please look at my fiddle: http://jsfiddle.net/m8wQM/170/

Upvotes: 0

Views: 494

Answers (5)

ygssoni
ygssoni

Reputation: 7349

Just added some css and its working good.

#navbar ul li a
{
  text-decoration: none !important;  
  text-shadow: none !important;
}

(Remove text-decoration from active and inactive, as you don't want it in any case)

Have a look at this : Fiddle

Upvotes: 1

Kao
Kao

Reputation: 2272

The reason you can't override it is because of how CSS values are calculated.

The way CSS calculates if to override or not, is made up by the selectors.

 1. ID: 100 points.
 2. Class: 10 points.
 3. Tag name: 1 point.

In order to override a css rule, the calculated value of the selectors must be higher than the previous one.

Example:

<div id="id" class="class"></div>

#id { background: blue; } - 100 point rule.
.class { background: red; } - 10 point rule.

The div above will remain blue, because the selector for the id is much higher.

In order to push the change through, you can add the !important tag, or make sure the .class rule achieves a higher point score, etc by adding:

#parent .class { background: red; } - 110 point rule.

Upvotes: 1

Chandrakant
Chandrakant

Reputation: 1981

.ui-btn {text-decoration: none;}

No need to add !important

Upvotes: 1

Chris
Chris

Reputation: 26878

You need to explicitly set the text-decoration: none; declaration for your a tags:

.ui-btn {
     text-decoration: none; /*nope, no need for !important*/
}

Here's a little working version of your demo: little link.

Upvotes: 2

Peace
Peace

Reputation: 296

try this.. 

#navbar ul li a {
    text-decoration: none;
}

:D

Upvotes: 1

Related Questions