CSS selector inheritance not working

John_Mc

Hi, I'm having a problem styling hyperlinks within a div container. I'm pretty experienced at HTML & CSS but I'm completely stumped as to what is causing this.

Here's a simplified example of my setup as posting the real HTML is messy due to ASP.net adding it's own IDs & tags:

<div class="ReportHeaderBlock">
  <div class="ReportOptionsContainer">
      <a href="somelink.aspx">Edit</a>
  </div>
</div>

My CSS is:

DIV.ReportOptionsContainer a:link, a:active, a:visited
{
  color:#586498;
  text-decoration:underline;
}

I have used this CSS in other parts of my web app and it has worked correctly. In this case however, the CSS style for hyperlinks in ReportHeaderBlock is being applied.

I have used Firebug to confirm that the links are contained within ReportOptionsContainer, so I can see no reason why the Hyperlink style for that container is not being applied.

Any suggestions would be appreciated!

Goodshape

Is that chunk of HTML nested inside an ID-selector that might be taking over?

Adam

have you an overall hyperlink style specified in the css? I think it would take precedence as the class it should be inheriting from is assigned to the container as opposed to the link itself...just a guess

Goodshape

Mirror wrote: »

is assigned to the container as opposed to the link itself

But it's assigned to the link within the container, so should be OK.... except that you did cause me to spot something :

this :

    DIV.ReportOptionsContainer a:link, a:active, a:visited
    {

Should be this :

    DIV.ReportOptionsContainer a:link, 
    DIV.ReportOptionsContainer a:active,
    DIV.ReportOptionsContainer a:visited
    {

Otherwise you're setting the style for all a:active and a:visited.

(not sure that will fix the original problem though).

Adam

you mention asp adding it's own id's...is it possible that you have a div id overwriting the class properties?

it must be something related to the scripting as the html and css itself obviously works

p

What goodshape said is right, also why is it DIV, in your css when the tage in div. It shoudl be lowercase div.

John_Mc

Goodshape wrote: »

Is that chunk of HTML nested inside an ID-selector that might be taking over?

Yes there is a container div with an ID but it has no CSS style, the div has a runat=server tag so that I change it's style in the server side script

Goodshape wrote: »

But it's assigned to the link within the container, so should be OK.... except that you did cause me to spot something :

this :

    DIV.ReportOptionsContainer a:link, a:active, a:visited
    {

Should be this :

    DIV.ReportOptionsContainer a:link, 
    DIV.ReportOptionsContainer a:active,
    DIV.ReportOptionsContainer a:visited
    {

Otherwise you're setting the style for all a:active and a:visited.

(not sure that will fix the original problem though).

Thanks, will adjust the CSS accordingly, however as you said I don't think is the problem as the CSS works elsewhere in the web app.

p wrote: »

What goodshape said is right, also why is it DIV, in your css when the tage in div. It shoudl be lowercase div.

Don't think CSS & HTML is case sensitive but the CSS uses DIV because that's what is used elsewhere in the the stylesheet and I wanted to maintain consistency.

Mirror wrote: »

you mention asp adding it's own id's...is it possible that you have a div id overwriting the class properties?

it must be something related to the scripting as the html and css itself obviously works

I simplified the container syntax so that it would be easier to explain.

Here's the full markup albeit with different names though. There is no CSS style for ReportHeaderContainer, it's there so that I can change the div class in the server side code.

<div class="ReportHeaderBlock" id="ReportHeaderContainer" runat="server">

Thanks for the suggestions lads, very much appreciated!

Goodshape

As a way to "just get things done", you could try an adding '!important' :

    DIV.ReportOptionsContainer a:link, 
    DIV.ReportOptionsContainer a:active,
    DIV.ReportOptionsContainer a:visited
    {
        color:#586498 !important;
        text-decoration:underline !important;
    }

That should make sure that this style is applied above all else.

John_Mc

Thanks for all your replies guys, I fixed this by removing the DIV selector in my CSS for the relevant containers. Dunno why, but it worked

turgon

Would the capital "DIV"s have been a problem?

John_Mc

turgon wrote: »

Would the capital "DIV"s have been a problem?

No it definitely wasnt caused by a case sensitivity issue as this was one of the first things I tried