Menu
Hi (or however one starts these things),
I’ve been trying to ‘style’ the input (text) tags in an HTML form.
This has been successful by doing the following:
[code=html]
<span class=’inputleft’>
<input class=’input_styled’ type=’text’ />
<a class=’inputright’></a>
</span>
CSS
[CODE]
input.input_styled {
background:url(/library/images/input_middle.png) repeat-x top left;
float: left;
padding-top: 2px;
padding-bottom: 2px;
height: 16px;
}
span.inputleft {
padding-left: 5px;
height: auto;
width: auto;
float:left;
background: url(/library/images/input_left.png) no-repeat 0px 0px;
}
a.inputright {
height: auto;
width: auto;
background: url(/library/images/input_right.png) no-repeat top right;
padding-left: 11px;
padding-top: 18px;
float: left;
cursor: pointer;
}
…This works, by the way.
What is annoying, however, is that I don’t want the parent <span> (inputleft) to be floated because that could, potentially, interfere with my page layout. Nor do I want to have to put dividers (which clear:all) in appropriate places since the styling et cetera is done with javascript to normal input tags.
When I remove the “float:left” property from the parent <span> tag, I can no longer see its background image anymore, which makes the whole effect pointless. I don’t understand why it does this because it still has the padding-left value, which should (surely!) push the <input> element 5px to the right and make the thing visible again, no?
Any help would be much appreciated.