I am encountering an issue with my current ASP.Net Mobile Website design. It is rendering correctly on android phones pre 4, iPhones, and Blackberries. This problem requires a bit of setup to explain...
CSS
tr
{
color: #00ff00;
}
#MasterBackButton
{
text-decoration: none;
border-radius: 5px;
background-color: #2f7ac1;
padding: 5px;
cursor: pointer;
color: #ffffff;
}
Below is the sample page with HTML generated by ASP.NET (NOTE: No table tags are used)
<!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>
This page displays a rounded button for navigation.
It renders correctly on Android 2.3:
However, when viewed on 4.03:
The text suddenly turns green... The tr styling is applying to the div element even though there are no table elements present on the page.
Switching to desktop mode in the browser:
The issue disappears. Strange! I downloaded the exact HTML using wget and hosted it on the server:
And now it works fine! So why does the ASP.NET page show this behavior? I cannot figure out why the tr styling affects the div element. Changing the CSS from tr to table still results in the same issue. It's like the stock Android browser treats everything as a table element in standard mode.
This behavior was confirmed on a real Galaxy S3 device, not just the emulator.
This is just one simplified example from a website that has several errors. A previous question I had posted was downvoted and eventually closed, which contained full site screenshots showing similar issues. Here is the link if you want to view those screenshots:
Edit: Picture shows that the ASP and HTML pages have identical markup.