CSS forms Help!

[mark | r]

Using the code below and XHTML how do i get the P tags to contain the
textarea if both the label and textarea are {float:left;width:100px} ?
the problem im having is when i give the P tag a background colour i get
silly strips of grey that should go all the way around the text area but
dont!

<form id="contact">
<fieldset>
<legend>Enquiry Details</legend>
<p>
<label for="details">Details</label>
<textarea id="details" name="details"></textarea>
</p>
</fieldset>
</form>

 

[Steve Pugh]

Using the code below and XHTML how do i get the P tags to contain the
textarea if both the label and textarea are {float:left;width:100px} ?

What if the user's font size means that your labels don't fit inside
100px?

the problem im having is when i give the P tag a background colour i get
silly strips of grey that should go all the way around the text area but
dont!

<form id="contact">
<fieldset>
<legend>Enquiry Details</legend>
<p>
<label for="details">Details</label>
<textarea id="details" name="details"></textarea>
</p>
</fieldset>
</form>

You need an element with clear: left; set inside the <p> but after the
last floated element.

Steve

 

[Els]

Using the code below and XHTML how do i get the P tags to contain the
textarea if both the label and textarea are {float:left;width:100px} ?
the problem im having is when i give the P tag a background colour i get
silly strips of grey that should go all the way around the text area but
dont!

<form id="contact">
<fieldset>
<legend>Enquiry Details</legend>
<p>
<label for="details">Details</label>
<textarea id="details" name="details"></textarea>
</p>
</fieldset>
</form>

You'll need an element with a clear property after the last floated
element (textarea) inside the containing element (p).
In IE it would be enough to set a height to the containing element, as
it then automatically stretches to encompass the content, even it it's
floated.

 

[mark | r]

What if the user's font size means that your labels don't fit inside
100px?

The label stretches

You need an element with clear: left; set inside the <p> but after the
last floated element.

still doesnt work

thanks
Mark

 

[mark | r]

You'll need an element with a clear property after the last floated
element (textarea) inside the containing element (p).
In IE it would be enough to set a height to the containing element, as
it then automatically stretches to encompass the content, even it it's
floated.

im almost there, ive taken float:left off the input and text area which
makes the textarea work , but the input box not, then ive added a &nbsp;
after each input box which seems to be doing the trick - albeit with &nbsp;s
everywhere

 

[Els]

im almost there, ive taken float:left off the input and text area which
makes the textarea work , but the input box not, then ive added a &nbsp;
after each input box which seems to be doing the trick - albeit with &nbsp;s
everywhere

You just proved to have given incomplete code then. There is no input
element in the above code. You really should provide a URL to a live
and real situation, so people can actually see what you are
doing/trying to accomplish, and what's wrong or right.
Without seeing an example, I can only say "I don't think you need
&nbsp; at all in that form".

 

[Steve Pugh]

The label stretches

??? Not in a browser that supports CSS properly it won't. The text
will spill out of the label (give the label a border or background
colour to see) and may overlap adjacent elements.

still doesnt work

Then you're doing it wrong. Post a URL showing what you've tried.

Steve

 

[mark | r]

www.so.neue.co.uk/contact.asp

Mark

??? Not in a browser that supports CSS properly it won't. The text
will spill out of the label (give the label a border or background
colour to see) and may overlap adjacent elements.


Then you're doing it wrong. Post a URL showing what you've tried.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <[email protected]> <http://steve.pugh.net/>

 

[mark | r]

www.so.neue.co.uk/contact.asp

Mark

You just proved to have given incomplete code then. There is no input
element in the above code. You really should provide a URL to a live
and real situation, so people can actually see what you are
doing/trying to accomplish, and what's wrong or right.
Without seeing an example, I can only say "I don't think you need
&nbsp; at all in that form".

 

[Els]

www.so.neue.co.uk/contact.asp

[snip 4 posts worth of text]

a) You know better than topposting.
b) that link doesn't work - probably a wrong content type from the
server or something, as I was asked to download the file.

Please try again later.

 

[Steve Pugh]

www.so.neue.co.uk/contact.asp

"Enable ASP

This web page has attempted to run an ASP script.
However, ASP has not yet been enabled for this domain.

If this is your website, you can enable ASP or ASP.NET, using the
Server options facility on your control panel."

And don't top post. You've been around long enough to know better.

Steve

 

[mark | r]

www.so.neue.co.uk/contact.asp

[snip 4 posts worth of text]

a) You know better than topposting.
b) that link doesn't work - probably a wrong content type from the
server or something, as I was asked to download the file.

Please try again later.

sorry it was still propagating (and still is?)
http://domain788768.sites.fasthosts.com/contact.asp

mark