Vote count:
0
This is an example of an application I am trying. The GUI of this should be the same in IE10(without compatibility mode) as it is in IE9. But in IE10, the background image for the 'ADD' label is reducing in size. I am not able to find the exact reason for this. Few solutions suggested that I have to give explicit 'height' and 'width' parameters , but that is also not helping.
I am not understanding what I am doing in a wrong way. Thanks. The jsp code is as below:
<html>
<head>
<style>
.buttonM{
color: red;
padding-top: 4px;
font-family: "Verdana";
font-size: 8pt;
cursor: hand;
background-image:url("images/buttonM.png");
background-repeat: no-repeat;
}
.buttonMOver{
color: white;
padding-top: 4px;
font-family: "Verdana";
font-size: 8pt;
cursor: hand;
background: url("images/buttonM.png") no-repeat ;
background-repeat: no-repeat;
}
table, th, td{
border: 1px solid black;
}
label{
height: 23;
text-align: center
}
</style>
<script>
function fnButtonClicked(){
alert("button clicked");
}
</script>
<title>trial</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR"
content="Rational® Application Developer for WebSphere® Software">
</head>
<body>
<table>
<tr height="40">
<td>
Name:
</td>
<td>
<input type="text">
</td>
</tr>
<tr height="40">
<td>
Number:
</td>
<td>
<input type="text">
</td>
</tr>
<tr height="40">
<td align="center" colspan="2">
<label class="buttonM"
style="width: 80; height: 23;"
onmouseover="this.className='buttonMOver';"
onmouseout="this.className='buttonM';"
onclick="javascript:showDetailsPopUp();">
ADD
</label>
</td>
</tr>
</table>
</body>
</html>
I have also attached the screenshots of the differences below. IE9:-
IE10:-
asked 36 secs ago
background image size reducing in IE10 from IE9 (java code)
Aucun commentaire:
Enregistrer un commentaire