SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Styling Vertical Accordion: Styling 'hidden' headings not working

    I have this site that I'm trying to style the 'hidden' content headings within the Accordion menu.

    Here is the code:
    Code:
    body {
       background: white;
       }
    #leftcol, #rightcol, p {
    	font: 16pt/150% "Times New Roman", Times, serif!important;
    }
    #header, #logo, img, #footer, #footsoc, #textenlarge {
       display: none;
       }
    .oneColFixCtrHdr, #container, #mainContent {
       width: auto;
       margin: 0 5%;
       padding: 0;
       border: 0;
       float: none !important;
       color: black;
       background: transparent none;
       }
    #leftcol, #rightcol {
    	float: none;
    	width: 100%;
    	margin: 0;
    	padding: 0;
    }
    a:link, a:visited {
       color: #520;
       background: transparent;
       font-weight: bold;
       text-decoration: underline;
       }
    #Accordion1, .AccordionPanel.AccordionPanelOpen .AccordionPanelTab, .AccordionPanelContent,
    .AccordionPanel.AccordionPanelClosed .AccordionPanelTab {
    	font: 16pt/150% "Times New Roman", Times, serif!important;
    }
    .AccordionPanelTab, #Accordion1.Accordion {
    	border: none!important;
    }
    .AccordionPanel.AccordionPanelClosed .AccordionPanelContent {
    	display: block!important;
    	height: auto!important;
    }
    The printout shows that everything else is printing as it should, but the 'hidden' content headings are NOT formatting to font: 16pt/150% "Times...".

    Would anyone know what I am not doing right?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The styles are being over-ridden with this rule:

    Code:
    .AccordionPanel.AccordionPanelClosed .AccordionPanelTab {
        background: none repeat scroll 0 0 #BBBBBB !important;
        color: #FFFFFF;
        font-size: 12px !important;
    }
    Just add that selector to your print stylesheet with the revised font and size.

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Just add that selector to your print stylesheet with the revised font and size.
    I did happen to do that, but the style was still being overridden.

    Silly me, I had the web page's style within the web page itself which kept overriding the print style sheets. I simply moved the styles to an external stylesheet and it was cooperating.

    Thank you for your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •