ASP.NET

CSS differences under Android 4+ on ASP.Net Site RSS

5 replies

Last post Nov 17, 2012 07:05 PM by roopeshreddy

‹ Previous Thread|Next Thread ›

- Reply
jheizer

Member

14 Points

6 Posts
CSS differences under Android 4+ on ASP.Net Site

Nov 15, 2012 07:03 PM|LINK
I have a problem with an existing ASP.Net Mobile Website that current renders correctly under android phones pre 4, iphones, and blackberries. This question will take a little bit of set up but..

CSS
```
tr
{
color: #00ff00;
}

#MasterBackButton
{
text-decoration: none;
border-radius: 5px;
background-color: #2f7ac1;
padding: 5px;
cursor: pointer;
color: #ffffff;
}
```
Here is the sample page with html being produced by asp.net (NOTE: NO tables tags at all)
```
<!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 go back.

Here it is under android 2.3 as expected:

Now here is that same page under 4.03

Suddenly the text is green.... For some reason the tr's styling is applying to the div even though there is not a single table element on the page.

Now, I hit desktop mode on the browser and:

And it suddenly works. WEIRD. Ok, i use wget and to download the exact html and put that file on the web server:

And it works! So why is the ASP.Net page all messed up? I cannot for the life of me figure out why the tr's styling is effecting the div. If I change the CSS from tr to table it still changes it. So far any table element I have tried does it. It is almost like in standard more the stock android browser is treating everything like a table element.

This is only a single as simplified as possible example that I can get for a website that has numerous errors. And even that is better than some of the pages within the site. http://stackoverflow.com/questions/13368693/mobile-css-broke-android-4 If you want to see those screenshots.
- Moved by MetalAsp.Net on Nov 15, 2012 07:32 PM
- Edited by jheizer on Nov 15, 2012 08:15 PM
- Reply
roopeshreddy

All-Star

20155 Points

3328 Posts

Re: CSS differences under Android 4+ on ASP.Net Site

Nov 16, 2012 03:30 AM|LINK

Hi,

Did you tried the same in other smart phones like Apple iPhone/Windows Phone etc.,?

Moreover, it may be a defect in the browser too! Try to install Google Chrome on Android and try again!

Mean while, we too check this issue, and revet ASAP!

Thanks & Regards
Roopesh Reddy C
Roopesh's Space
- Reply
jheizer

Member

14 Points

6 Posts

Re: CSS differences under Android 4+ on ASP.Net Site

Nov 16, 2012 02:56 PM|LINK

Works perfect under every other desktop and mobile browser I have tried including chrome android. The issue is this is only one of 30+ css bugs that pop up on our actual site.
- Reply
roopeshreddy

All-Star

20155 Points

3328 Posts

Re: CSS differences under Android 4+ on ASP.Net Site

Nov 16, 2012 04:43 PM|LINK

Hi,

May be an issue with Android ICS! Moreover, if there are no tables, why you are using styles for tables?

Thanks & Regards
Roopesh Reddy C
Roopesh's Space
- Reply
jheizer

Member

14 Points

6 Posts

Re: CSS differences under Android 4+ on ASP.Net Site

Nov 16, 2012 07:41 PM|LINK

This was just a sample from a site that did have tables on it that turned into a mess.

I finally figured it out though 51 Degrees just being referenced in the site was causing the problem. Even if I had nothing enabled in any config. I don't understand why they were modifying pages.
- Reply
roopeshreddy

All-Star

20155 Points

3328 Posts

Re: CSS differences under Android 4+ on ASP.Net Site

Nov 17, 2012 07:05 PM|LINK

Hi,

Instead of 51 degress, you can use CSS Media queries to detect the Mobile device - http://cssmediaqueries.com/

Hope it helps u...

Thanks & Regards
Roopesh Reddy C
Roopesh's Space
- Marked as answer by Young Yang - MSFT on Dec 09, 2012 01:06 AM