Christopher Harris wrote:
Thanks Gunlaug - it works! But - how does the float affect it? It
may be retarded to ask - but I'd just like to know why. I know that
the labels and inputs were floating left, but why would they cause
them to bunch up like that?
Floats [Text Box] will always pass flowing stuff (To), so they will
bunch up with the flowing text lining up in the space alongside the floats.
Floats can/should also only go as high as the flowing stuff that
precedes them (To), thus you get the confusing situation that the last
float is aligned with the flowing text, may get hooked up, and it's all
in the wrong order.
Besides: I'm not sure if any of my browsers got it perfectly right by
the involved CSS-standards, which makes it even more confusing. I keep
forgetting all the details, but no browser made really sense.
Un-floating and adjusting it will work pretty cross-browser, as you've
noticed.
The safest way to do it with floats, is to float everything -- including
the text. This can be done by wrapping the text in a span, and float all
elements left in the same order as now - HTMLTidy-trimmed:
<input id="lowSquare" name="lowSquare" value="" class="tinyTextBox"
/><span class="tinyText">To</span><input
id="highSquare" name="highSquare" value="" class="tinyTextBox" />
.tinyTextBox {
width: 40px;
float: left;
}
.tinyText {
width: 1.5em;
float: left;
text-align: center;
}
...which will end up looking the same, but with even more CSS-control of
each part. Whether these floats are inline or block doesn't really
matter--unless you want to offset their positions by manipulating their
margins in which case you need display: block.
Of course, no two browsers get such form-details measured up exactly the
same - no matter what, so they always need some free space in a complete
form on a page. Also: remember the font-resizing factor.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
