locked
CSS differences under Android 4+ on ASP.Net Site RRS feed

  • Question

  • User1306267108 posted

    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.

    Thursday, November 15, 2012 3:03 PM

Answers

  • User1943143334 posted

    Hi,

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

    Hope it helps u...

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, November 17, 2012 3:05 PM

All replies

  • User1943143334 posted

    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!

    Thursday, November 15, 2012 11:30 PM
  • User1306267108 posted

    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.

    Friday, November 16, 2012 10:56 AM
  • User1943143334 posted

    Hi,

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

    Friday, November 16, 2012 12:43 PM
  • User1306267108 posted

    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.

    Friday, November 16, 2012 3:41 PM
  • User1943143334 posted

    Hi,

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

    Hope it helps u...

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, November 17, 2012 3:05 PM