Buttons are not showing

Question

I have this button tag:

<button data-bind="click: approve, text: Approve" type="button" id="approve" class="button">Approve</button>

One of my customers reported that, they can see only a plain text instead of buttons.

They are using THIS mobile phone/ barcode reader which comes with Windows Mobile 6.5.3 Professional I know that its already too old, but they need to be able to see correct my application on it.

The CSS I'm using is:

@CHARSET "UTF-8";

.formElement { height: 30px; float: left; height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; }
.formElement label { width: 17.89em; margin: 0.8em 0 0.1em 0.15em; font-size: 1.7em; display: block; }
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { float: left; border: 1px solid #CCCCCC; padding: 0.2em; height: 1.6em; width: 29.4em; }
fileSelection { width: 50em; height: 30px; }
td
{
    background: #A9D0F5;
    text-align: center;
    height:2em;
}
th
{
    height:2em;
}
table
{
    width: 98%;
    font-size: 1.2em;
    clear: both;
}
.customfile-button { color: #fff; float: right; width: 1px; padding: .3em .6em;  text-align: center; text-decoration: none;  font-size: 1.2em;  }
.fakeBrowseButton {
    position:relative;
    top:0;
    overflow:hidden;
    padding:0;
    font-size: 1.2em;
    font-weight: bold;
}  
input, select, textarea, button { font-family: inherit; }
.button, .regularButton { border: none; }

I'm pretty sure that I'm missing something really small, but I'm not able to spot it, because I never had to write something for windows mobile 6.5.3 browser

Answer 1

All phones render button elements differently. If I was you I'd put in a media query that forces her resolution to display the button with border and a background so she can see it.

EDIT: Just read up on it and WAP (the browser she uses) does not support media queries. You could always just force styles onto the button site wide.

Answer 2

In the .css file as shown in above box

.button, .regularButton { border: none; }

change it with

.button, .regularButton { border: 1px black solid; }

It will be show the button. Happy to help again!