I have a mobile site (just using media queries) that initially used XHTML Basic 1.1, the site rendered fine except with a few glitches (bugs!!??) that I know existed in this browser. Decided to convert the site to HTML5 and all I did was change the HTML5 doctype, it has no validation error, it renders the same in Safari Mini and Andriod, yet in Opera Mini it results a very long horizontal scrolling bar in portrait view, in landscape view it's a bit shorter (about 50px I think). I switched back to XHTML Basic 1.1, the horizontal scrolling bar gone!
The cause: The #container width is 98% + 1% left/right margin. A plugin that the site used, has a style sheet that has a 100% width in the div.widget. The 100% width from .widget should obey the #container width because it's wrapped inside the #container but it doesn't. There is an even scary bug, I brought the widget class to @media screen and (max-device-width: 480px), if the width stays between 95 to 100% the horizontal scrolling persist, if 94% or less, it disables the entire @media rules, the site shrinks to minimum view just like you see in NYTimes the none-mobile optimized site. However I also used 100% width for a child class (forgot to get rid of it) that causes no issue when I display none the plugin. It appears that the bug is triggered by a combination of javascript - jquery-ui-accordion.min.js (other scripts are fine). If the width is removed in the widget than the bug gone, so the bug is avoidable if one knows it. tee ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [email protected] *******************************************************************
