Instructions for making this page work
without the Flash movie for handhelds
- Create a blank HTML file.
- Create a style sheet called Screen.css
- Set up your style sheet with comments and sections for Tag Rewrites, ID Styles and Class Styles.
- Zero out the default in a body tag rewrite. Leave 10px margin at the top of the page.
- Create a Container ID style that is centered and 800px wide.
- Look at the CSS code for this page. Why is the width of the Contents layer 750px;
- Create a Banner layer that is 275px high.
- Insert a Banner layer into the Container layer
- Create an ID style called Flash that is 275px high.
- Insert the Flash layer into the Banner layer.
- Save the Flash movie into Images/Flash.
- Insert the Flash movie into the Flash, using Insert -> Media -> SWF.
- Test the page.
- Create an ID style called No Flash that is 275px and has a background color to distinguish it from the Flash layer.
- Insert the No Flash layer below the Flash layer inside the Banner layer.
- Preview the page. Notice that the No Flash layer sits below the Flash layer. Why is that?
- Move the No Flash layer above the Flash layer.
- Preview the page. Does what you thought in #16 work here?
- Now use the display: none; rule in the NoFlash layer.
- Preview the page. What do you see?
- Move the Flash layer above the NoFlash layer.
- Preview the page.
- Move display: none; into the Flash layer.
- Preview the page.
- Add media="handheld" to the link in your style sheet.
- Preview the page. Why did this happen?
- View the page in a handheld. Did the handheld use the correct style sheet?
- 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
}
- However, none of this works, if the handheld device browser ignores all your work!
Problems with CSS visibility rule
- http://forum.unity3d.com/threads/52793-Inconsistent-behavoir-of-CSS-visibility-style-in-Unity
- http://tycoontalk.freelancer.com/javascript-forum/146241-toggle-visibility-still-doesnt-work-firefox.html
- http://css-discuss.incutio.com/wiki/Handheld_Stylesheets
Information about Media Types
- http://www.w3.org/TR/CSS2/media.html
- http://www.howtocreate.co.uk/tutorials/css/mediatypes