Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS .class a {} not working

This algorithm just stopped working on my page (it had worked for over a year as it was):

<div class="classA" id="specific1">
    <a href="#">Link Text</a>
</div>

.classA a {
    style: actual style;
}

The a tag no longer picks up the style in the css. Now in order for my a tags to pick up the style I have to give them a class specifically and this works:

<div class="classA" id="specific1">
    <a class="classB" href="#">Link Text</a>
</div>

Did something change recently in IE7 or FireFox4 that would break the first algorithm? I'd prefer to fix the css rather than inserting a class onto all of the relevant a tags on several pages.

Edit to show better the actual styling:

This no longer works (links have vanilla 100%-blue-underline styling) but had been working for quite some time. Note that it was first designed for IE6, survived the switch to IE7, but has subsequently stopped picking up its style. Hopefully this helps all of you who have graciously tried to answer!

-- HTML --
<div class="ovalButton" id="oval1"><a href="#">LinkText</a></div>       

-- CSS --
* {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: verdana, arial, sans-serif;
}

.ovalButton {
    position: absolute;
    width: 150px;
    height: 60px;
}

.ovalbutton a {
    background: url("logo_butn.gif") no-repeat;
    display: block;
    color: #0063B5;
    width: 150px;
    height: 60px;
    overflow: hidden;
    font-size: 80%;
    font-weight: bold;
    text-decoration: none;
    padding: 16px 15px 20px 0;
    text-align: center;
}

.ovalbutton a:Hover { background: url("logo_butn_highlight.gif") no-repeat; }

#oval1 { top: 12px; left: 300px; }
#oval1 a { padding-top: 25px; }

When I copy the exact styling from .ovalbutton a {} to a separate class and apply that class to the link in the html, it works fine.

like image 495
Angie Avatar asked Aug 23 '26 02:08

Angie


2 Answers

The problem is here:

.ovalbutton a {

The capitalization does not match:

<div class="ovalButton" 

You can change your CSS selector to .ovalButton a to fix this problem.

like image 67
George Cummins Avatar answered Aug 25 '26 17:08

George Cummins


Not knowing your full CSS, I can't say for sure, but it sounds likely that you are running into a CSS specificity issue.

like image 25
Nightfirecat Avatar answered Aug 25 '26 15:08

Nightfirecat



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!