Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

What does it mean when styling is crossed out?

Posted on 2013-01-29
9
Medium Priority
?
1,220 Views
Last Modified: 2013-01-30
I've set text-decoration for links to none.  But I still see an underline.  Looking in Firebug, there is a second instance that overrides the first.  Is this why the underline is still there?  

firebugWhat does it mean when there is a second instance crossing out the first one?
0
Comment
Question by:brettr
9 Comments
 
LVL 10

Accepted Solution

by:
deviprasadg earned 500 total points
ID: 38833933
CSS properties are also crossed out if they are overwritten by another rule. This helps you determine specificity problems, as well as seeing why certain styles are not applying the way you had hoped.

Please refer: http://stackoverflow.com/questions/2412561/in-firebug-how-to-tell-what-is-overriding-a-style

http://blog.themeforest.net/tutorials/firebug-a-developers-best-friend/
0
 

Author Comment

by:brettr
ID: 38834013
I can disable the second instance but don't see any change.  The underline is still there on links.  What does this mean?

firebug
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38834033
That probably means you haven't turned it off.  Underlining links is the default in most browsers.  See here: http://www.w3schools.com/css/css_pseudo_classes.asp
A common way of killing the underline is using ...
a:link {text-decoration:none;}

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:brettr
ID: 38834050
Yes - I have that but it has no effect.
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38834060
Then you have it somewhere else also that is overwriting that one.  Add...
a {text-decoration:none;}
a:link {text-decoration:none;}
a:hover {text-decoration:none;}

Open in new window

0
 

Author Comment

by:brettr
ID: 38834067
I have all the above already.  How do I track down the override?

From the 2nd screenshot, you can see I have disabled the overrides.  The first instance of #footer a is all that is left at that point.
0
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 500 total points
ID: 38834069
These links are not affected by your CSS, and that means that either they are not positioned within an element with an id of "footer", or somewhere in your CSS file, on a higher level element, there's a CSS rule that contains the '!important' instruction.
The best you can do, is provide a link or a complete code (HTML & CSS)
0
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 total points
ID: 38834083
Clearly you don't have all that and the code you posted ONLY affects the #footer and does not cover 'text-decoration' which is needed for 'underline'.  'border' is not 'underline'.
0
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 500 total points
ID: 38835088
What we can't see in the screen capture you've posted is the location of the styles that are taking precedence. To the far right of these styles is the name of the css file and the line within that file where these styles are located. This is cut off of the screen capture above. If these two styles are not in the same css file, either you have another css file being loaded afterward or you have a style definition embedded within your html. In either case, neither of these styles controls the underline outside of Firefox. Both of them deactivate a Firefox specific underline.

The topmost style in the Firebug list is the style with precedence. It can override any of the styles listed beneath it. So disabling the second instance does nothing when the same styles are included in the top instance. In this case, those styles in the second instance are already deactivated (overridden) by the top instance.

Even though the underline should be deactivated in Firefox, the link element (a tag) is being adorned with a bottom border in the second instance. The border style is not included in the top instance so it remains active. This bottom border would look very much like an underline. If the underline were also present, it would appear as a double underline since the border should appear lower than the underline.

Try disabling in Firebug the bottom border styles in the second instance. What looks like an underline should disappear. If it doesn't, look below these two instances for the "text-decoration" attributes (NOT "-moz-text-decoration"). If there are no instances of text-decoration, the default underline for a tags is still active. Most likely, though, you are seeing the bottom border instead of an underline.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question