Lecture 5

Question 1

Why should we use a css/html validator?

Answer 1

….

obviously because it identifies mistakes or potential mistakes before your site goes live….

Question 2

What are some common CSS errors?

Answer 2

• Typos and syntax
• Specificity
• Sort order
• Margins collapsing

Question 3

What would cause a problem with specificity and sort order?

Answer 3

Caused by multiple CSS rules targeting the same element

Question 4

What would cause a problem with the margin collapsing? What are some solutions?

Answer 4

• How element with block level children have their height
calculated
• If no vertical border or padding is defined…
• The height is the distance between the top and bottom border of the block level children

Solution: Add some padding.

Question 5

What are the steps of browser bug hunting?

Answer 5

• validate code

- isolate the problem

Question 6

Why does IE border box model suck?

Answer 6

because in IE the width includes the padding and border inside it, where in W3C browsers, the padding and border are added to the width.

Question 7

Which CSS properties automatically give you layout?

Answer 7

• position
• float
• display
• width
• height

Question 8

What is the IE6 duplicate character bug?

Answer 8

• Present in IE 6 (Win)
• Duplicates the last few characters in the last of a
series of floats
• Duplicate characters shown beneath the last float
• Cause:
• HTML comments
• The fix:
• Remove HTML comments

Question 9

What are media queries?

Answer 9

• Useful for checking device, viewport, orientation (e.g., portrait,
landscape)
• Supported by:
• Chrome 21+
• IE 9+
• Firefox 3.5+
• Safari 4+
• Opera 9+