I’m frustrated

CSS For Tabbed Panels

I have successfully integrated tabbed panels into my new web site as per chapter 10 of your book "Javascript The Missing Manual" but I am unable to style the content. I have tried putting css in the external css file for the tabs, in the main site css file and even in line but I am experiencing problems. Some of the css works and some does not.
How should I go about correctly styling the html to go into the various panels? Please can you give some examples of how you would style h1, h2, p and ul as this would be a massive help.
Many thanks.
ps I have spent a huge amount of time trying to work this out myself but have gone round in circles. I'd really appreciate some guidance.
pps I think your books are excellent.
1 person has
this question
+1
Reply
  • Hi Ron,

    Thanks for writing us about this, and I'm sorry for the frustration. To style the contents of the tabbed panels, I would use selectors like this (assuming your markup is the same as the book's example):

    .ui-tabs-panel h1 { }

    .ui-tabs-panel h2 { }

    .ui-tabs-panel h3 { }

    .ui-tabs-panel p { }

    .ui-tabs-panel ul, .ui-tabs-panel ol, .ui-tabs-panel dl { }

    /* etc.... */


    Also, if some of your styles aren't showing up as you'd expect, I'd recommend using a tool like Firebug in Firefox or Chrome's Inspector to inspect elements on the page and see which styles are being applied to them. I find this really useful particularly when there may be conflicting styles applied to the same element; you can see which one is winning (because of the order in which they're cascading or because a selector is more specific).

    For example, I added a bunch of styles that could apply to the text in the tabbed panel by adding color style rules for body, p, .ui-tabs-panel, and .ui-tabs-panel p. Here's what I see when I inspect that p text in Chrome:


    I hope that helps! Let us know if you're still stuck.

    Kind Regards,

    Rachel James
    O'Reilly Media
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m Happy
    Hi Rachel, many thanks for taking the time and trouble to help me out. Your explanation has enabled me to sort out the css and I am now able to style my content. Everything works in Chrome, IE and Firefox. Huge relief!
    I haven't used the
     tags and wondered why you included them. What is their purpose in this case?
    My only remaining problem is with one of my tabbed panels which contains a contact form. It displays properly in Chrome and IE but when I test the panel in Firefox the form is pushed out and to the right of the panel ie the left margin of the form is aginst the right margin of the panel. The panel is just a blank space. Do you have any idea what might be causing this?
    Regards
    Ron
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • Hi Ron,

    I'm glad that worked for you! I included the pre tags just so the code example would display nicely on this page.

    I'm not sure what would be causing the problem you describe with the form in Firefox. You might check the form and form elements to make sure none of them have clear: both or clear: right or a different left margin. I'd also try inspecting everything in the form with Firebug, and I expect you can find the cause that way.

    Good luck!

    Rachel
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited