2 Replies Latest reply on Jul 26, 2016 11:49 PM by VectorP

    Problem with class= web page multiple elements in class name

    fredd1236

      I am compiling web pages and am frequently specifying multiple elements in class names. Example: class="flatall red1". In most cases, this seems to work fine, but the following combination is giving me trouble:

       

      class="slink1 slink1roundall btnmod"

       

      This works fine on all browsers, but not when compiled with Phonegap and run on an Android device (hasn't been tested on ios or winphone, btw)

       

      Where:

       

      .slink1

      {

          background-color:transparent;

          height: 32px;

          width: 68px;

       

         border-bottom: white 1px solid;

          border-left: white 1px solid;

          border-top: white 1px solid;

          border-right: white 1px solid;

         

          text-align: center;

          text-transform: lowercase;

          font-style: italic;

          text-indent: -5pt;

          display: inline-block;

          font-family: 'Segoe UI' , Verdana, Arial, Helvetica, sans-serif;

          color: white;

          font-size: 12px;

          cursor: pointer;

          text-decoration: none;

      }

       

      .slink1roundall

      {

          border-radius: .2em;

          -moz-border-radius: .2em;

          -webkit-border-radius: .2em

      }

       

      .btnmod

      {

          /*background-color: #4682b4;*/

          background: #357db2;

          background: -webkit-gradient(linear, left top, left bottom, from(#357db2), to(#357db2));

          background: -moz-linear-gradient(top,  #357db2,  #357db2);

          filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#357db2', endColorstr='#357db2');

      }

       

      The element (button) shows the correct background (.btnmod) but fails to display as flat with solid white border and white italic, lowercase text.

       

      Instead, it displays as a standard "raised" button with white border on the top and left sides, gray border on the right and bottom sides, black text, non-italic, upper and lowercase...

       

      Can anyone shed some light on my error, please?

       

      Thanks

        • 1. Re: Problem with class= web page multiple elements in class name
          fredd1236 Level 1

          Can anyone help with this?

           

          Thanks

          Fred

          • 2. Re: Problem with class= web page multiple elements in class name
            VectorP Level 4

            Hard to debug and find the root problem without creating such app, first. I would guess that the Android default webview doesn't like a specific combination of attributes and values that you are using.

            However, you might try that yourself: keep the .slink class as is, but remove the other parts. See if it shows your flat UI with proper font.

            If it does, add the other classes step-by-step, until it fails. Then remove each attribute of the lastly added class one by one to find to 'bad' part.

            Other process steps are feasible as well...the whole idea is to isolate the attribute combination that causes trouble.

             

            (of course, I'm assuming that you haven't defined any of the css class definitions twice in your code, with conflicting attribute values; you should check that, though)

             

            Alternatively, you could consider using the Crosswalk webview (you'd need the crosswalk plugin) and see if it works fine there.