Why is my tr tag displaying buttons vertically instead of horizontally?
A similar code works properly on jsfiddle
What am I doing wrong?
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link href="css/menuprincipale.css" rel="stylesheet" type="text/css" media="all"/>
<meta name="msapplication-tap-highlight" content="no" />
<script src="cordova.js"></script>
<script src="js/jquery.js"></script>
</head>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<table class="clsActionTable">
<tr>
<td style="text-align: center;">
<button class="clsActionButton" id="idAddButton">Add</button>
<button class="clsActionButton" id="idEditButton">Edit</button>
<button class="clsActionButton" id="idDeleteButton">Delete</button>
</td>
</tr>
</table>
<div data-role="footer" data-position="fixed">
<img src="img/logo.png" />
</div>
</div>
Here is my CSS:
.clsActionTable
{
width: 100%;
height:20%;
color: white;
font-size: smaller;
}
.clsActionButton
{
width: 180px;
height:40px;
}
#idActionPlane
{
left: 0px;
bottom: 0px;
height:20%;
width:100%;
background-color: #4E5A81;
color: White;
}
I am using these:
- Cordova 3.5
- jQuery 1.4
- js
- html5