Besieged buttons

Okay, I give in. When it comes to HTML, blogger seems a little too kibitz. It arbitrarily alters your codes the way it wants to, no reasons given. Sometimes it's just annoying and stupid. I have to provide an image for this besiged button, instead of simply inserting the HTML and CSS in this entry if I don't want to show you a distorted one. After all, let's take a look at 'em.




The HTML:

<table><tr>

<td class="sir">
<div class="sir2">
<input type="button" value="No excuses, sir!" style="padding: 12px; font: bold 18px Trebuchet MS;" />
</div>
</td>

<td class="sir">
<div class="sir2">
<input type="button" value="No excuses, sir!" style="padding: 12px; font: bold 18px Trebuchet MS;" />
</div>
</td>

</tr></table>

The CSS:

.sir {
padding: 0;
background: #d4d0c8;
border: 1px solid;
border-color: #eee #404040 #404040 #eee;
}

.sir2 {
padding: 2px;
margin: 0;
border: 1px solid;
border-color: #eee #808080 #808080 #eee;
}

An enhanced version of besieged buttons:



with more real besiegers.

The HTML:

<table><tr>

<td class="sir">
<div class="sir2">
<div class="sir3">
<input type="button" value="No excuses, sir!" style="padding: 12px; font: bold 18px Trebuchet MS;" />
</div>
</div>
</td>

<td class="sir">
<div class="sir2">
<div class="sir3">
<input type="button" value="No excuses, sir!" style="padding: 12px; font: bold 18px Trebuchet MS;" />
</div>
</div>
</td>

</tr></table>

The CSS:

.sir {
......
}

.sir2 {
......
}

.sir3 {
border: 1px solid #808080;
}


All codes are tested in IE 6.0 and Firefox 1.5, copy and modify as you want to.