I have a basic menu that is built up of some div’s and anchors. In some instances however, instead of an anchor I need to use a form <input type="submit"> (it’s a template for mobiles so I can’t use javascript here, I have to use a submit button that will submit the form data).
My problem I have been struggling with for hours now is to get the input to have the exact same width as the anchors. They are both set to width:50%; however the input is slightly shorter than the anchors. Only minimally, but it is still apparent. I have no idea why this is happening. Is anyone able to help with this?
My simplified code is below, and the issue is reproducible in desktop chrome and firefox, as well as the various mobiles I’ve tested on.
<html>
<head>
<style>
a.btn_bigfake{
display:block;
width:50%;
margin: 0px auto 5px auto;
background:#f5f5f5;
border:4px solid #282726;
text-align: center;
}
input.btn_bigfake{
width:50%;
display:block;
margin: 0px auto 5px auto;
background:#f5f5f5;
border:4px solid #282726;
text-align: center;
padding:0;
}
div{width:100%;}
</style>
</head>
<body style="width:100%; margin:0; padding:0;">
<div><a href="#" class="btn_bigfake">1. anchor</a></div>
<div><a href="#" class="btn_bigfake">2. anchor</a></div>
<div><input type="submit" class="btn_bigfake" value="3. input"/></div>
</body>
</html>
Firstly, you should be sharing the same CSS class between all elements that are intended to look the same. It means less CSS, and less maintenance.
To solve your issue, you need to put the classname on the DIV surrounding the INPUT, and then apply some custom styling to the input to make it fill the DIV. You can emulate the border using a background + padding on the DIV.
See here: http://jsfiddle.net/jMTT3/2/