Scribd Logo
Upload

Welcome to Scribd!

  • 114 views

    According To The Book ? 1. Positioning 2. Box Model 3. Floats

    Uploaded by

    jonkyjonkerson
    This document contains a quiz on web design concepts. It asks 10 multiple choice and free response questions about key CSS concepts like the box model, floats and positioning; common causes of CSS bugs like cross-browser inconsistencies; specificity and using classes versus ids; fixing margin collapse issues; steps for debugging like validating code and creating minimal test cases; and differences in layout engines between browsers like IE and Firefox.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    According To The Book ? 1. Positioning 2. Box Model 3. Floats

    Uploaded by

    jonkyjonkerson
    114 views3 pages
    This document contains a quiz on web design concepts. It asks 10 multiple choice and free response questions about key CSS concepts like the box model, floats and positioning; common causes of CSS bugs like cross-browser inconsistencies; specificity and using classes versus ids; fixing margin collapse issues; steps for debugging like validating code and creating minimal test cases; and differences in layout engines between browsers like IE and Firefox.

    Original Description:

    Original Title

    Week 7

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains a quiz on web design concepts. It asks 10 multiple choice and free response questions about key CSS concepts like the box model, floats and positioning; common causes of CSS bugs like cross-browser inconsistencies; specificity and using classes versus ids; fixing margin collapse issues; steps for debugging like validating code and creating minimal test cases; and differences in layout engines between browsers like IE and Firefox.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as doc, pdf, or txt
    114 views3 pages

    According To The Book ? 1. Positioning 2. Box Model 3. Floats

    Uploaded by

    jonkyjonkerson
    This document contains a quiz on web design concepts. It asks 10 multiple choice and free response questions about key CSS concepts like the box model, floats and positioning; common causes of CSS bugs like cross-browser inconsistencies; specificity and using classes versus ids; fixing margin collapse issues; steps for debugging like validating code and creating minimal test cases; and differences in layout engines between browsers like IE and Firefox.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as doc, pdf, or txt
    of 3

    MM2213 (Intermediate Web Design) Quiz Week 7

    Winter 2011

    Name:

    1. According to the book CSS Mastery: Advanced Web Standards Solutions, Second Edition
    by Andy Budd, what three most important concepts are key to understanding CSS ?

    1. positioning

    2. box model

    3. floats

    2. The most common cause of CSS bugs in a website design are ___________:

    a. coding errors To fix you use a validator and it will tell you if you have a syntax error.
    b. browser rendering errors
    c. different Internet Explorer versions
    d inconsistencies between browsers

    3. What color is the first paragraph in the div whose class is "content"?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Example website</title>

    <style>
    .content p {
    background-color: white;
    }

    .intro {
    background-color: orange;
    }
    </style>

    </head>

    <body>
    <div class="content">
    <p class="intro">This is the first paragraph</p>
    <p>This is the second paragraph</p>
    <p>This is the third paragraph</p>
    <p>This is the fourth paragraph</p>
    <p>This is the fifth paragraph</p>
    </div>
    </body>
    </html>

    WHITE – because of specificity.


    1000pts – Inline // 100 – Id // 10 – Class // 1 – Selector
    To fix you need to make .intro more specific. Right now .content p has value of 11 and
    .intro has value of 10
    MM2213 (Intermediate Web Design) Quiz Week 7
    Winter 2011

    4.Explain how you would fix the following margin-collapse problem given the following
    HTML/CSS markup:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-
    8" />
    <title>Example website</title>

    <style>
    #box {
    margin: 10px;
    background-color:#d5d5d5;
    }
    p {
    margin: 20px;
    background-color:#6699FF;
    }
    </style>

    </head>

    <body>
    <div id="box">
    <p>This paragraph has a 20px margin.</p>
    </div>
    </body>
    </html>

    Add a small amount of padding or a thin border the same color as the object.

    5. What is the first step in hunting down HTML and CSS bugs?

    Validate your code


    MM2213 (Intermediate Web Design) Quiz Week 7
    Winter 2011

    6. It is best to develop your code in one specific browser until the work is complete then
    test your pages on less-capable browsers and devise workarounds for any display
    problems you find.
     True
     False
    False, its better to do as you go along. Because it could be hard to track down later something you
    set up early on in the project.

    7. A lot of rendering bugs are caused by overly complicated HTML or CSS.


     True
     False

    8. In order to isolate a rendering problem, you applied borders to the relevant elements
    to see how they interact. To your surprise, the browser problem disappeared after you
    did this. What is the most likely reason why your page now renders correctly?

    Margin collapse

    Same as previous question (4)

    9. By creating a minimal test case, you help cut out some of the variables and make the
    problem as simple as possible.
     True
     False

    10. What is layout? How is it different in IE versus a browser like Firefox?

    hasLayout

    http://www.satzansatz.de/cssd/onhavinglayout

    You might also like