I have a problem with the existing ASP.Net Mobile website, which now displays correctly under Android phones up to 4, iphones and blackberries. This question will take a little time, but ..
CSS
tr { color: #00ff00; } #MasterBackButton { text-decoration: none; border-radius: 5px; background-color: #2f7ac1; padding: 5px; cursor: pointer; color: #ffffff; }
Here is an example html page created by asp.net (NOTE: NO table tags in general)
<!DOCTYPE html> <head> <title>CSS Problem</title> <link id="MainStyleSheet" rel="stylesheet" type="text/css" href="http://10.0.0.108/m/styles/default.css"> </head> <body id="Body1"> <form method="post" action="/m/" id="MainForm" autocomplete="off"> <div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTcwODg1MTE2Ng9kFgJmD2QWAgIBD2QWAgIBDxYCHgZhY3Rpb24FAy9tL2RkHHvpHhoukujQ1p/Rk9kY9OLmIKo=" /> </div> <div style="float: right;"> <div id="MasterBackButton" onclick="javascript:history.back()"> Back </div> </div> </form> </body>
Just a page with a rounded button to return.
Here is under Android 2.3 as expected:
Now here is the same page under 4.03
Suddenly the text is green. For some reason, the tr-style is applied to the div, even if there are no table elements on the page.
Now I hit the working mode in the browser and:
And it suddenly works. WEIRD. Ok, I use wget and upload the exact html and put this file on the web server:
And it works! So why is the ASP.Net page confused? I can’t understand for my whole life why the tr-style acts on a div. If I change CSS from tr to table, it will still change it. So far, any table element I've tried does this. This is almost like the standard version, and the Android browser supports everything as a table element.
I can confirm that all this happens on a real Galaxy S 3, and not just on an emulator.
This is just one, as simple as possible example, which I can get for a website with many errors. I had a previous question that was ranked and eventually closed, which has full screen shots of the site that you can see. And even this is better than some of the pages on the site. https://stackoverflow.com/questions/13368693/mobile-css-broke-android-4 If you want to see these screenshots.
Edit: An image showing that the asp and html pages have the same markup.