CSS not being applied : The Official Microsoft ASP.NET Forums

Reply

mychucky

Contributor

4358 Points

3709 Posts

CSS not being applied

Nov 16, 2012 06:45 PM|LINK

Here's what I have and it's not working.

<asp:Accordion ID="acdBackIssue" runat="server" Height="90px" Width="223px" HeaderCssClass="accordionHeader"
                            HeaderSelectedCssClass="accordionHeaderSelected" SuppressHeaderPostbacks="True"
                            RequireOpenedPane="false">
                            <Panes>
                                <asp:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="backIssueBG"
                                    HeaderCssClass="BI2010">
                                    <Header>
                                        2010s Back Issues
                                    </Header>
                                    <Content>
                                        <ul>
                                            <asp:Literal ID="ltlBackIssue2K10" runat="server"></asp:Literal>
                                        </ul>
                                    </Content>
                                </asp:AccordionPane>
                                <asp:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="backIssueBG"
                                    HeaderCssClass="BI2000">
                                    <Header>
                                        2000s Back Issues
                                    </Header>
                                    <Content>
                                        <ul>
                                            <asp:Literal ID="ltlBackIssue2K" runat="server"></asp:Literal>
                                            <li><a href="backIssues/Winter2006_v3/">Winter 2006 v3</a></li>
                                            <li><a href="backIssues/Winter2006_v3/summer2006.aspx">Summer 2006</a></li>
                                            <li><a href="backIssues/Winter2006_v3/winter2006.aspx">Winter 2006</a></li>
                                            <li><a href="backIssues/spring04/">Spring 2004</a></li>
                                            <li><a href="backIssues/Winter2006_v3/winter2004.aspx">Winter 2004</a></li>
                                            <li><a href="backIssues/spring02/">Spring 2002</a></li>
                                            <li><a href="backIssues/fall01/">Fall 2001</a></li>
                                            <li><a href="backIssues/spring01/">Spring 2001</a></li>
                                            <li><a href="backIssues/fall00/">Fall 2000</a></li>
                                            <li><a href="backIssues/spring00/">Spring 2000</a></li>
                                        </ul>
                                    </Content>
                                </asp:AccordionPane>
                                <asp:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="backIssueBG" HeaderCssClass="BI1990">
                                    <Header>
                                        1990s Back Issues</Header>
                                    <Content>
                                        <ul>
                                            <li><a href="backIssues/fall99/">Fall 1999</a></li>
                                            <li><a href="backIssues/spring99/">Spring 1999</a></li>
                                            <li><a href="backIssues/spring98/">Spring 1998</a></li>
                                            <li><a href="backIssues/winter98/">Winter 1998</a></li>
                                            <li><a href="backIssues/fall97/">Fall 1997</a></li>
                                            <li><a href="backIssues/spring97/">Spring 1997</a></li>
                                            <li><a href="backIssues/winter97/">Winter 1997</a></li>
                                            <li><a href="backIssues/fall96/">Fall 1996</a></li>
                                            <li><a href="backIssues/spring96/">Spring 1996</a></li>
                                            <li><a href="backIssues/winter96/">Winter 1996</a></li>
                                            <li><a href="backIssues/fall95/">Fall 1995</a></li>
                                        </ul>
                                    </Content>
                                </asp:AccordionPane>
                            </Panes>
</asp:Accordion>

And here's my CSS that controls this control.

.accordionHeader
{
    /*border-top: 1px solid #2F4F4F;*/
    color: #004990;
    background-color: #CCD8E2;
    color: #000033;
    font-family: "Franklin Gothic Book","Franklin Gothic Medium","Franklin Gothic",WebFont,sans-serif;
    font-size: 15px;
    line-height: 1.1;
    /*min-height: 18px;*/
    padding: 5px 5px 5px 10px;
    margin-left: -1px;
    cursor: pointer;
}
.accordionHeader .BI2000
{
    border-top: 1px solid #2F4F4F !important;
    background-color: red;
}

This .accordionHeader .BI2000 would not work or even show up as being applied. I have tried this:

.accordionHeader #AccordionPane2
{
    border-top: 1px solid #2F4F4F;
    background-color: red;
}

And it would not work. The only thing that seems to apply to this is, .accordionHeader, #AccordionPane2 but for some reason, this applies to all three panels. I only one the border to apply to panel 2 and 3.

Reply

roopeshreddy

All-Star

20143 Points

3327 Posts

Re: CSS not being applied

Nov 17, 2012 01:28 AM|LINK

Hi,

Instead of

.accordionHeader .BI2000
{
    border-top: 1px solid #2F4F4F !important;
    background-color: red;
}

Try like this

.BI2000
{
    border-top: 1px solid #2F4F4F !important;
    background-color: red;
}

Moreover, check the DOM element structure in the browser! I mean how this Accordion pane is rendered. You can use IE Developer Tools(F12) to debug the issue!

Hope it helps u...

Thanks & Regards
Roopesh Reddy C
Roopesh's Space

Reply

raju dasa

Star

14392 Points

2447 Posts

Re: CSS not being applied

Nov 19, 2012 09:43 AM|LINK

Hi,

For ur requirement, u have to use CSS selector like this:

.accordionHeader.BI2000 { }

check this site for more info:
http://www.bennadel.com/blog/680-Defining-A-CSS-Selector-That-Requires-A-Multi-Class-Union.htm

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || blog@opera

Reply

Afzaal.Ahmad...

Contributor

2662 Points

1040 Posts

Re: CSS not being applied

Nov 19, 2012 05:28 PM|LINK

.accordionHeader .BI2000

/* -- Use this as -- */

.accordionHeader, .BI2000

Because the "." shows that they are two different classes.

Also you wanted to apply your work to only one or two than you need to set those two as the effective classes and then use the css property

.class1, .class2 {
cssProperty: value;
}

This way you can set the values for those who you want to..

Please "Marks As Answer" if any answer helped you out!
~~! FIREWALL !~~

Edited by mbanavige on Dec 24, 2012 11:37 AM

Reply

mychucky

Contributor

4358 Points

3709 Posts

Re: CSS not being applied

Nov 19, 2012 05:45 PM|LINK

roopeshreddy

Try like this
.BI2000
{
    border-top: 1px solid #2F4F4F !important;
    background-color: red;
}
Moreover, check the DOM element structure in the browser! I mean how this Accordion pane is rendered. You can use IE Developer Tools(F12) to debug the issue!

Hope it helps u...

I got this:

Reply

mychucky

Contributor

4358 Points

3709 Posts

Re: CSS not being applied

Nov 19, 2012 05:51 PM|LINK

Afzaal.Ahmad.Zeeshan
/* -- Use this as -- */

.accordionHeader, .BI2000
Because the "." shows that they are two different classes.

I got this:

Please noticed that the top border of "2010s Back Issues" is now doubled or thicker because this .accordionHeader, .BI2000 will apply to all panels regardless, and I do not need a border on the top panel.

Reply

Afzaal.Ahmad...

Contributor

2662 Points

1040 Posts

Re: CSS not being applied

Nov 19, 2012 07:54 PM|LINK

So you can see that by changing one value you can get a new result. Why dont you try chaning the property of these two to get 2x solid line.

Please "Marks As Answer" if any answer helped you out!
~~! FIREWALL !~~

Reply

mychucky

Contributor

4358 Points

3709 Posts

Re: CSS not being applied

Nov 19, 2012 07:58 PM|LINK

Afzaal.Ahmad.Zeeshan

So you can see that by changing one value you can get a new result. Why dont you try chaning the property of these two to get 2x solid line.

I do not want to get a "2x solid line" on anything. I only border-top: 1px solid #2F4F4F; on AccordionPane2 and AccordionPane3 which is BI2000 and BI1990. However, whatever I change, it either affects all the panes or none. Do see you my point? All or nothing -- that's the problem.

Reply

Afzaal.Ahmad...

Contributor

2662 Points

1040 Posts

Re: CSS not being applied

Nov 19, 2012 08:02 PM|LINK

Yes I can see. I want to tell you is that you can give the border to the first td a seperate one. And use one other group for properties for other two. This way you can get the result

.AccordionPane2, .AccordionPane3 {
border-top: 1px solid #2F4F4F;
}

Now for the other one use this

border: none;

You can try to use other id for these two. Maybe you're having an issue with class. because class can effect only if class is publicly made available (Is not in a comment)

Please "Marks As Answer" if any answer helped you out!
~~! FIREWALL !~~

Reply

mychucky

Contributor

4358 Points

3709 Posts

Re: CSS not being applied

Nov 19, 2012 08:29 PM|LINK

Afzaal.Ahmad.Zeeshan

Yes I can see. I want to tell you is that you can give the border to the first td a seperate one. And use one other group for properties for other two. This way you can get the result
.AccordionPane2, .AccordionPane3 {
border-top: 1px solid #2F4F4F;
}
Now for the other one use this
border: none;
You can try to use other id for these two. Maybe you're having an issue with class. because class can effect only if class is publicly made available (Is not in a comment)

I tried exactly that and it didn't work -- nothing happens. It still shows this:

CSS not being applied RSS

16 replies

mychucky

CSS not being applied

roopeshreddy

Re: CSS not being applied

raju dasa

Re: CSS not being applied

Afzaal.Ahmad...

Re: CSS not being applied

mychucky

Re: CSS not being applied

roopeshreddy

mychucky

Re: CSS not being applied

Afzaal.Ahmad.Zeeshan

Afzaal.Ahmad...

Re: CSS not being applied

mychucky

Re: CSS not being applied

Afzaal.Ahmad.Zeeshan

Afzaal.Ahmad...

Re: CSS not being applied

mychucky

Re: CSS not being applied

Afzaal.Ahmad.Zeeshan

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft