Instructions for making this page work
without the Flash movie for handhelds

  1. Create a blank HTML file.
  2. Create a style sheet called Screen.css
  3. Set up your style sheet with comments and sections for Tag Rewrites, ID Styles and Class Styles.
  4. Zero out the default in a body tag rewrite. Leave 10px margin at the top of the page.
  5. Create a Container ID style that is centered and 800px wide.
  6. Look at the CSS code for this page. Why is the width of the Contents layer 750px;
  7. Create a Banner layer that is 275px high.
  8. Insert a Banner layer into the Container layer
  9. Create an ID style called Flash that is 275px high.
  10. Insert the Flash layer into the Banner layer.
  11. Save the Flash movie into Images/Flash.
  12. Insert the Flash movie into the Flash, using Insert -> Media -> SWF.
  13. Test the page.
  14. Create an ID style called No Flash that is 275px and has a background color to distinguish it from the Flash layer.
  15. Insert the No Flash layer below the Flash layer inside the Banner layer.
  16. Preview the page. Notice that the No Flash layer sits below the Flash layer. Why is that?
  17. Move the No Flash layer above the Flash layer.
  18. Preview the page. Does what you thought in #16 work here?
  19. Now use the display: none; rule in the NoFlash layer.
  20. Preview the page. What do you see?
  21. Move the Flash layer above the NoFlash layer.
  22. Preview the page.
  23. Move display: none; into the Flash layer.
  24. Preview the page.
  25. Add media="handheld" to the link in your style sheet.
  26. Preview the page. Why did this happen?
  27. View the page in a handheld. Did the handheld use the correct style sheet?
  28. Another method that allows you to use only one stylesheet is to use @ media in your stylesheet. That allows you to use the same style name for different devices.
    Ex.
        @media print
       {
          body
         {
            font-size: 10pt
          }
       }

       @media screen
       {
          body
         {
            font-size: 13px
         }
  29. However, none of this works, if the handheld device browser ignores all your work!

Problems with CSS visibility rule

  1. http://forum.unity3d.com/threads/52793-Inconsistent-behavoir-of-CSS-visibility-style-in-Unity
  2. http://tycoontalk.freelancer.com/javascript-forum/146241-toggle-visibility-still-doesnt-work-firefox.html
  3. http://css-discuss.incutio.com/wiki/Handheld_Stylesheets

Information about Media Types

  1. http://www.w3.org/TR/CSS2/media.html
  2. http://www.howtocreate.co.uk/tutorials/css/mediatypes