This week...

Chapter 6 contains material that really needs to be experienced to be fully understood.  It is highly recommended that you take the time to type in ALL of the Hands-On projects in this chapter.  Realizing that you are busy people and that, despite my recommendation, you might not have time to do all of them.  The bare minimum should include:

• p. 257 Hand-On Practice 6.4 (Two-column layout)
• p. 270, 274 Hands-On Practice 6.8, 6.9 (HTML5 Structural Elements)

Take the time to really understand how the CSS presented in this chapter works. There are some very important concepts and they will definitely be worth your time and effort.

Chapter 6:

p. 240 The Box Model

As much as I do not feel Wikipedia can be used as a reliable source of information (any one can post) I have to admit they did a good job of explaining the issues with IE and the box model including the importance of adding DTD information to web pages.
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

p. 242-248 Flow, Floats

Interactive tutorial on positioning in general but includes floats and clear floats (Tabs 7-10)
http://www.barelyfitz.com/screencast/html-training/css/positioning/

p. 253 Display property

The Display and the Visibility properties can cause confusion for beginning web designers. On the surface they "appear" to do the same thing...show or hide an element.
The values of each are as follows:
Display: inline, block, none
Visibility: visible, hidden

However, they are actually very different. Display determines if and how an element should be displayed. When the element is not shown the space can be occupied by other elements. Visibility specifies if it should be visible or hidden. When the element is hidden, it still exists in terms of the page layout and other elements may not occupy that space. W3Schools.com has a good demo.

Check out http://www.w3schools.com/css/css_display_visibility.asp

When users click on the remove button, display:none is being executed. Notice that the boxes move to the left. When the Hide button is clicked, visibility:hidden is executed. Notice that the middle area is blank but the space is still reserved.

Required Supplemental Topic: Z-Index

Z-Index - Although this topic is not covered in the text it may be seen in web pages that you maintain.. and, yes, it will be on the test.

• Z-Index is a CSS property that allows for stacking of elements on a web page. For instance, an image behind text. For a most basic information see
  http://www.w3schools.com/cssref/pr_pos_z-index.asp
  Then try it out at
  http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
  
• For inquiring minds that want to know more, check out the following which have been around for a while but still give one of the best explanations.
  • http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
  • http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

p. 264 Positioning with CSS

Same interactive tutorial as the one on floats (p. 242 above but concentrate on Tabs 1-6)
http://www.barelyfitz.com/screencast/html-training/css/positioning/e.

p. 268 CSS Debugging Techniques

FireFox has an error checker for CSS (and JavaScript as well as XML). This can be very useful in debugging code. In the follow image there are actually three screen shots stacked on each other. This was done to conserve space.

• Firefox Browser
  • At the top of the image, notice the three check marks. The first is for Standards Compliance Mode, the second is for CSS and the third is for JavaScript.
• Click on the middle check mark and the Error Console will appear.
  
• Error Console
  • It is set to show Errors, but it does not consider items which can be ignored as errors.
    
  • It may be useful to look at the warning. Notice that there is an error in color so the declaration was dropped. (Note: double ## where the correct code would be #F00)
    
  • Click on the link and the Source Code appears.
    
    
• W3C Validation provides the same information but perhaps in a more cryptic manner. You choose the method that works for you.
  

• Check out the CSS tab on the Web Developer Tool bar. It has other features which will prove useful.

p. 272 HTML5 Compatibility with Older Browsers

The HTML5 Test

Fun test to see how well your current browser does.
http://html5test.com/

Also check out other options http://html5test.com/results/desktop.html

• Be sure to click on tabs for desktop browsers, tablets, mobiles, and others
  
• Under Scores click on the desired version
• Click on the arrow next to the elements for more specific elements.

CSS3 Browser Support

http://www.w3schools.com/cssref/css3_browsersupport.asp

HTML5 and CSS3 Browser Support - great chart!
http://www.findmebyip.com/litmus