|
Posted by Andy Dingley on 11/15/06 16:50
seiyaku wrote:
> Simple requirement, so I'm sure there ain't a simple answer...
8-)
> I'm wanting to display a horizontal line, like you might see on an
> application form
>
> FIRST NAME _________ FAMILY NAME ________
Easy:
#txtFirstName,
#txtFamilyName {
border: none;
border-bottom: thin solid;
padding: 0;
padding-bottom: 0.12em;
}
> So what I'm using is <span
> style="text-decoration:underline;letter-spacing:50px;"> </span>;...
Hmmm..... Apart from using em units instead of pixels that's not such a
bad solution!
The problem is that CSS doesn't like to set width on inline elements
and it doesn't let you sit them on the same line unless they are
inline. So what's to be done?
The "obvious" and "neat" solution is to use display: inline-block;
http://www.w3.org/TR/CSS21/visuren.html#display-prop
Unfortunately this is a CSS2.1 feature, so probably isn't deployable
today.
Back in the real world, then I don't know how to make it work with
<span> and to control the width. So instead I'd do it with <div> and
their default of display:block; This makes setting the width trivial.
#txtFirstName { width: 12em; }
To get them all on the same line I'd then use float:left; Remember to
clear afterwards.
Float is a whole new can of worms! The only readable guide I know of
is here:
http://brainjar.com/css/positioning/
[Back to original message]
|