Question

A common way to create a button to access another page (i.e. link) using JQuery-UI is the following:

<div id="hb">
    <form action="index.html"><input type="submit" value="Home" id="but_hb"></form>
</div>

In order to set the width and layout, one can do:

$('#but_hb').button().css({ width: 70 });
$('#hb').css({
    textAlign: 'center',
    width: 70,
    top:0,
    left:0,
    position:"absolute"
});

My question is: why is the displayed width only 68 pixels? How to solve this?

See here for a replication of the issue.

Answer 1

Add additional styles to your button, your OS (or possibly a plugin) is styling it for you. Add a background:"#f00" and border:"none" to the CSS then remeasure.

$('#hb').css({
    textAlign: 'center',
    width: 70,
    top:0,
    left:0,
    position:"absolute",
    background:"#f00",
    border:"none"
});