#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    4
    Rep Power
    0

    Question CSS style rule for paragraphs not working


    Hi... I'm new here and hope I'm posting correctly.

    I'm having trouble with a style rule in CSS. I ran the pages in different browsers and none of them change the font size.

    I have 'divs' that have class="coupon". The h1 heading work fint... but when I try to set the font size or margin for the 'paragraphs' within those divs, they do not work in any browser that I have tried.

    Here is part of the CSS code that I have:

    div.coupon h1 {
    color: white;
    background: rgb(192, 0, 0);
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
    height: 25px;
    font-variant: small-caps;
    }

    div.coupon p {
    font-size: 14px; /* This does not work for some reason*/
    text-align: center; /* This works OK */
    margin: 5px; /* This does not work either */
    }


    Here is part of the HTML code:

    <section id="main">
    <img src="toppings.png" alt="" />
    <p>At Red Ball Pizza, we want to satisfy every appetite. That's
    why our menu contains a variety of different items. With
    so many choices, everyone's favorites are available!
    </p>
    <p>
    Red Ball Pizza is NOT a franchise, a chain, or a corporation.
    It is 100% locally owned and operated. Red Ball Pizza is
    devoted to providing the highest quality and the best service
    possible. Our only goal is to provide you with a great
    pizza EVERY TIME!
    </p>

    <div class="coupon">
    <h1>Classic Combo</h1>
    <p>16" 1-Topping Pizza
    &amp; a 2-Liter of Your Choice
    For Only $14.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza &amp; Stix</h1>
    <p>16" Specialty Pizza
    Reg. Cheese Stix &amp; a 2-Liter
    For Only $21.99
    </p>
    <p>Expires 3/14</p>
    </div>
    </section>


    I don't know why the h1 sections work fine but the paragraphs or margins in this class do not. If anyone can help that would be great.

    Thanks
    -frank
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    309
    Rep Power
    162
    I've copied all the code you gave us into a new HTML file and it actually works fine for me in IE 10 and Firefox.

    At this point the only thing I can think of that would stop certain CSS from working is if you have an extra closing bracket or missing a closing bracket somewhere in the rest of your CSS code.

    If you still can't find out what is causing it to not work, please can you provide us with more code?
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    4
    Rep Power
    0

    Red face Here is the full code (htm & css)


    Yes... Here is the full code from both htm and css files. It is for a class so there are a bunch of comments:

    The htm code:

    <!DOCTYPE html>
    <html>

    <head>
    <!--
    New Perspectives on HTML and CSS
    Tutorial 4
    Case Problem 2

    Red Ball Pizza
    Author: Frank Bettosi
    Date: 10/30/13

    Filename: redball.htm
    Supporting files: modernizr-1.5.js, notice.png, rblogo.png,
    redbar.png, slice.png, toppings.png


    -->

    <meta charset="UTF-8" />
    <title>Red Ball Pizza</title>
    <script src="modernizr-1.5.js"></script>
    <link href="pizza.css" rel="stylesheet" type="text/css" />


    </head>

    <body>
    <div id="container">
    <header><img src="rblogo.png" alt="Red Ball Pizza" /></header>

    <nav class="horizontal">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Locations</a></li>
    <li><a href="#">Catering</a></li>
    <li><a href="#">About Us</a></li>
    </ul>
    </nav>

    <nav class="vertical">
    <ul>
    <li><a href="#">Pizza</a></li>
    <li><a href="#">Salad</a></li>
    <li><a href="#">Pasta</a></li>
    <li><a href="#">Sandwiches</a></li>
    <li><a href="#">Appetizers</a></li>
    <li><a href="#">Pocket Pizzas</a></li>
    <li><a href="#">Fish &amp; Shrimp</a></li>
    <li><a href="#">Chicken &amp; Wings</a></li>
    <li><a href="#">Beverages</a></li>
    <li><a href="#">Dessert</a></li>
    <li><a href="#">Catering</a></li>
    <li><a href="#">Download Menu</a></li>
    <li><a href="#">Catering Menu</a></li>
    </ul>
    </nav>

    <section id="main">
    <img src="toppings.png" alt="" />
    <p>At Red Ball Pizza, we want to satisfy every appetite. That's
    why our menu contains a variety of different items. With
    so many choices, everyone's favorites are available!
    </p>
    <p>
    Red Ball Pizza is NOT a franchise, a chain, or a corporation.
    It is 100% locally owned and operated. Red Ball Pizza is
    devoted to providing the highest quality and the best service
    possible. Our only goal is to provide you with a great
    pizza … EVERY TIME!
    </p>

    <div class="coupon">
    <h1>Classic Combo</h1>
    <p>16" 1-Topping Pizza
    &amp; a 2-Liter of Your Choice
    For Only $14.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza &amp; Stix</h1>
    <p>16" Specialty Pizza
    Reg. Cheese Stix &amp; a 2-Liter
    For Only $21.99
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>1/2 Price</h1>
    <p>Buy any 16" Specialty Pizza
    at Reg. Price &amp; Get a 2nd
    Pizza For Half Price
    </p>
    <p>Expires 3/14</p>
    </div>
    <div class="coupon">
    <h1>Pizza &amp; Wings</h1>
    <p>14" 2-Topping Pizza
    &amp; 12 Wings
    For Only $15.99
    </p>
    <p>Expires 3/31</p>
    </div>
    <div class="coupon">
    <h1>$3.00 Off</h1>
    <p>Get $3.00 Off
    any 16" Pizza at
    Menu Price
    </p>
    <p>Expires 3/31</p>
    </div>
    <div class="coupon">
    <h1>Sub Dinner</h1>
    <p>1 Toasted Sub &amp; Chips
    &amp; 1 20oz Soda
    For Only $6.99
    </p>
    <p>Expires 3/31</p>
    </div>
    </section>

    <aside>
    <h1>Pizza Pizzazz</h1>
    <ul>
    <li>93% of Americans eat pizza at least once a month.</li>
    <li>Mozzarella was originally made from the milk of Indian
    water buffalo in the 7th century.</li>
    <li>75 acres of cheese is eaten every day.</li>
    <li>23 pounds of cheese is eaten every year by the average
    person.</li>
    <li>The tomato was brought back to Italy by Spaniards returning
    from Mexico in the 16th century.</li>
    <li>The busiest night for take-out pizza orders is Halloween.</li>
    <li>The first pizzeria opened in 1830 in Naples, Italy and is still operating today.
    We've been open since 1982 and we're happy to serve you today and tomorrow!</li>
    </ul>
    </aside>

    <footer>
    <address>
    Red Ball Pizza &bull;
    811 Beach Drive &bull;
    Ormond Beach, FL 32175 &bull;
    (386) 555 - 7499
    </address>
    </footer>

    </div>

    </body>

    </html>




    The .css code:

    /*
    New Perspectives on HTML and CSS
    Tutorial 4
    Case Problem 2

    Pizza Style Sheet
    Author: Frank Bettosi
    Date: 10/30/13

    Filename: pizza.css
    Supporting Files:

    */


    /* Display HTML5 Structural Elememts as Blocks - p 227 */

    header, section, aside, footer, nav {

    display: block; /* #3 */

    }


    /* To Set the Default Page Elements p 228 */

    body * {

    background: red; /* #5 */
    font-family: Verdana, Geneva, sans-serif;
    padding: 0px; /* #4 */
    margin: 0px;

    }


    /* Setting Border Styles p 262 */

    #container {

    width: 1000px; /* #6 */
    margin: 0 auto;
    border-left: 1px solid black;
    border-right: 1px solid black;
    background: white url(redbar.png) top left repeat-y;

    }


    /* Styles for the Header */ /* #7 */

    header {

    background: white;
    height: 100px;

    }


    /* Horizontal Navigation List Styles */

    nav.horizontal { /* #8 */

    height: 70px;
    width: 100%;
    background-color: white;

    }


    nav.horizontal li { /* # 9 */

    background: white;
    display: block;
    float: left;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    width: 180px;

    }


    nav.horizontal li a { /* #10 */

    display: block;
    background: red;
    color: white;

    -moz-border-radius: 30px/25px; /* #10 ref p 268-269 */
    -webkit-border-radius: 30px 25px;
    border-radius: 30px/25px;
    text-decoration: none;

    }


    nav.horizontal li a:hover {

    background: rgb(255, 101, 101);
    color: black;

    }





    /* Vertical Navigation List Styles */



    nav.vertical li { /* #11 */

    clear: left;
    float: left;
    width: 200px;
    list-style: none; /* #12a Remove List Item marker */
    margin: 20px 0px 20px 20px; /* #12b+c Indent Text 20px + Top+Bottom to 20px */
    }



    nav.vertical li a {

    color: white; /* #13 Text Color to White */
    text-decoration: none; /* #13 Remove text underlining */

    }


    nav.vertical li a:hover {

    color: black; /* #13 Text Color to Black upon Hover */

    }


    #main {

    background-color: rgb(255, 211, 211); /* #14a Background Color of id=main*/
    float: left; /* #14b id=main Float Left */
    width: 600px; /* 14c Set id=main Width to 600px */

    }


    #main p { /* #15 for p that are direct children of main sect */

    font-size: 20px;
    margin: 15px;

    }



    /* Styles for Inline Images within the Main Section */

    #main img {

    float: right; /* #16a - Float Main Inline Image Right */
    margin: 15px; /* #16b - Margin for Main Inline Image */
    width: 350px; /* #16c - Width for Main Inline Image */

    -mox-border-radius-bottomleft: 350px; /* #16d - BottomLeft Border Radius */
    -webkit-border-bottom-left-radius: 350px;
    border-bottom-left-radius: 350px;

    }




    /* Styles for Coupon Class within Div Element */

    div.coupon {

    border: 5px dashed; /* #17a - Border */
    float: left; /* #17b - Float */
    width: 170px; /* #17c - Width */
    height: 150px; /* #17c - Height */
    margin: 20px 10px; /* #17d - Margins */

    background: white; /* #18b Background Color on Coupon */
    background: url(slice.png) center no-repeat; /* #18a Image on Coupon */
    background: url(notice.png) bottom right no-repeat; /* #18b Image on Coupon */

    }


    /* Styles for h1 Elements within Coupon Class */

    div.coupon h1 {

    color: white; /* #19a - Text Color */
    background: rgb(192, 0, 0); /* #19a - Background Color*/
    font-size: 16px; /* #19b - Font Size */
    letter-spacing: 2px; /* #19b - Kerning */
    text-align: center; /* #19c - Center Text */
    height: 25px; /* #19d - Height */
    font-variant: small-caps; /* #19e - Display Fonts in Small Caps */

    }


    /* Styles for Paragraphs within the Coupon Class */


    div.coupon p { /* #20a - Set font size for paragraphs in coupon class */

    font-size: 24; /* This is not working for some reason */
    text-align: center;
    margin: 5px;

    }


    aside {

    float: left; /* #21a - Float Aside to Left */
    width: 200px; /* #21b - Width of 200px for Aside */
    }


    aside h1 {

    color: rgb(192, 0, 0); /* #22a - THIS DID NOT WORK */
    font-size: 20px; /* #22b - Font Size for h1 of Aside */
    letter-spacing: 2px; /* #22b - Kering */
    font-weight: normal; /* #22c - Font weight to normal */

    }

    aside li {

    background-color: rgb(255, 135, 135); /* #23a - Bg color aside li */
    -moz-border-radius: 5px; /* #23b - 5px radius Progressive Enhanc */
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: black; /* #23c - Text color to black */
    list-style: none; /* #23d Remove List Item marker */
    margin: 10px; /* #23e - Margins */
    padding: 5px; /* #23e - Padding */

    }


    footer {

    clear: left; /* #24 - Display footer when left margin clear */
    margin-left: 200px; /* #24 - Left margin to 200 pixels */

    }

    footer address {

    border-top: 1px solid red; /* #25a - Border to top address element */
    color: blue; /* #25b - Text color to red - temp made blue */
    font-size: 10px; /* #25c - Font size to 10 pixels */
    font-style: normal; /* #25c - Font style to normal */
    text-align: center; /* #25c - Center the address text */
    margin-top: 25px; /* THIS IS NOT WORKING */
    padding-bottom: 20px; /* #25d - Bottom Padding */


    }




    Please note that after sending the original question in.. I finished the rest of the code and I believe that I ran into some more dramatic layout problems. Hopefully everything will show up on your end as it did on mine. Any help on 'any' part(s) I'll gladly take.

    Just realized also about the picture files... Do you need them at all to test...?

    Also.. If there are any free Web development sites where you can test code, I would gladly explore them.

    Thank you
    -frank
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    873
    Rep Power
    275
    Code:
    div.coupon p { /* #20a - Set font size for paragraphs in coupon class */
    
    font-size: 24; /* This is not working for some reason */
    text-align: center;
    margin: 5px;
    
    }
    You have to use px or em or pt for the font-size, you cannot just use a number.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    4
    Rep Power
    0

    Have tried that also...


    Thanks... I did try all of those (px, em, & pt) but they do not make it work either.

    Originally I did have 24pt; in the code and it did not work... and at some point of troubleshooting I ended up without it there and forgot to put it back in... but as it turns out, it still does not work with it now anyway.

    As a matter of fact.. I noticed now that only the ( text-align: center; ) part of that piece of code works. I could not get the margins to change with different numbers...

    Very strange because I though that the margins responded when I originally built the code... ??
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    873
    Rep Power
    275
    have you VALIDATED your markup and css to make sure there are no obvious errors with either?
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    309
    Rep Power
    162
    I've found out why the margins don't work on the coupon div <p> tags. It seems CSS is overriding the style for div.coupon p with the style for #main p and to fix this you can do this:

    change:
    Code:
    div.coupon p {
        margin: 5px;
        text-align: center;
    }
    to:
    Code:
    #main div.coupon p {
        margin: 5px;
        text-align: center;
    }
    CSS takes IDs as priority over classes, and one way to avoid this is to use a more specific selector like in this example. You can see this happening in Firefox with Firebug, since Firebug will put the CSS it uses in order of priority and also shows what CSS is being overridden.

    As for testing your code:
    HTML Validator
    CSS Validator

    You can input a link, upload a file, or simply copy/paste your code and it will tell you what the problems are.

    Sorting out the layout shouldn't be too difficult for you since you say you already have all the code there. It should just be a case of assigning the floats properly on the main sections and playing about with the margins now that you know why certain CSS code didn't work.

    Good luck!
    Last edited by LDHosting; November 7th, 2013 at 06:32 AM.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    4
    Rep Power
    0

    Thumbs up Worked Great...!!


    That worked great...! Thanks... I can't believe that I didn't see it. But it makes sense now.

    And the links are a huge help too..

    Thanks again...
    -frank

IMN logo majestic logo threadwatch logo seochat tools logo