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
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.