[RESOLVED] – Not resolved: Float issues (- cache didn’t want to clear)

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>
[/code]

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;
}
[/code]

…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.

Also in #CSS _↴