SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS class not being recognized in blockquote but works in <p></p>

    Hello everyone,

    This is my first post, and I have searched for an answer to this issue on the forums but was not successful. If this has been answer elseware please feel free to direct me to the post, thank you.

    Using Ian LLoyd's Build your own website the right way edition 3 I am working on creating a parallel ( my own twist) on the sample website. In chapter 3 page 112 he suggests that rather than using a series of <p class = "fun"> that I instead add the class statement to the blockquote <blockquote class ="fun">. Unfortunately the class statement does not seem to work in the blockquote but does with the paragraph statement ( I am a stats user so we call them statements, sorry if I am using the incorrect code terminology). Any help as to why the font and style do not change with the blockquote, but do with the papagraph would be usful, thank you.


    <blockquote class= "fun">
    <p> Bubble Under is a group of diving enthusiasts based in
    the south-west UK who meet up for diving trips in the
    summer months when the weather is good and the bacon
    rolls are flowing. We arrange weekends away as small
    groups to cut the costs of accommodation and travel and
    to ensure that everyone gets a trustworthy dive
    buddy.</p>
    <p>Although we're based in the south-west, we don't stay on
    our own turf: past diving weekends away have included
    trips up to Scapa Flow in Scotland and to Malta's
    numerous wreck sites.</p>
    <p>When we're not diving, we often meet up in a local pub
    to talk about our recent adventures (any excuse,
    eh?).</p>
    </blockquote>


    .fun {
    color: #339999;
    font-family: Georgia, Times, serif;
    letter-spacing: 0.05em;
    }

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,083
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Hi farmer37, and welcome to the forums.

    In what way is it "not working"? I've tried the code above and it looks the same whether the class is applied to the <blockquote> or the <p> tags (as they're usually called). My guess is that you've made a mistake somewhere copying/cutting and pasting - I've done the same thing often enough to recognise the symptoms. Double-check for typos, stray semi-colons etc., and if it's still not working, post again and we can take it from there.

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It looks as it should with regards to the book so like was mentioned by the Bear, you have probably made a typo elsewhere or not saved and refreshed the webpage about.html and CSS file style1.css

    Since just going by the code sample above that will style the BLOCKQUOTE with the class "fun" an thus apply the CSS to the three P paragraph elements contained within the block quote.

  4. #4
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for your quick responses!

    I read the book further and found that my problem was due to what it calls specificity. My code below was overruled in terms of the color change due to my CSS code for <p>

    .fun {
    color: #339999;
    font-family: Georgia, Times, serif;
    letter-spacing: 0.05em;
    }

    So even though I wrote the code correctly, the other code

    p{
    color: navy;
    }

    kept the text navy rather than change the color which is what confused me. Ian's description of this can be found on p 114 in the section specifically speaking. Thanks again and hope this helps if anyone else runs into a similar problem.

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,083
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Glad you found the answer - and well done for solving it yourself.

    For future reference, it's always a good idea to post all the HTML/CSS for your page - or a link to a live example - so we can help you spot things like that. You can wrap your code in [CODE] tags (the # button on the message window), which keeps it more manageable.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    @farmer37: if you haven't already, either download Firebug (an add-on for Firefox) or check out the native dev tools in other browsers like Chrome, Safari or Opera. If you right click on an element, it will reveal the HTML and CSS that apply to that element. It will show you which CSS rle is applying to an element and which others are being overridden. Very handy.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •