468,306 Members | 1,264 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,306 developers. It's quick & easy.

textarea not enclosed by div

I want to have a form with a text input, a textarea and a button.

- - - - - - - - - - - - - - - - - - - - - - - - sample form
<div style="color=blue; border: dashed blue">
<div id="subject">For a Bulk Email:<br />Subject: <input type="text"
name="bulk_subject" size="60" />
</div>
<div id="paper">
<textarea rows="25" cols="65" name="bulk_letter">
</textarea>
</div>

<div style="background-color: #aa0000; padding: 15px 45px 15px 25px;">
<button type="submit" name="function" value="bulk_email"/>Send a
bulk email</button> &nbsp;
</div>
</div>
- - - - - - - - - - - - - - - - - - - - - - - - - - -- end sample

The problem is that the containing div acts as if the textarea were only
1 line high. eg: the bottom button is under the textarea and the
dashed line goes around it just fine, but under the textarea, where you
would expect if the textarea were only one row.

I can workaround by positioning the button div, but that is not safe.

what am I doing wrong ?
(it is the same with MSIE and Mozilla)

--
bill
Technical Service Systems
bill (atsign) TechServSys (period) com

unix is user friendly, it is just careful who it befriends

Jul 20 '05 #1
11 5086
bill wrote:

<snip>
what am I doing wrong ?


Quite a lot. You have more then a few syntax errors in both the HTML and the
CSS. Run the code though the validators: http://validator.w3.org/ (as that
should pick up most of your errors, including the one I suspect is causing
your problem).

--
David Dorward http://dorward.me.uk/
Jul 20 '05 #2
David Dorward wrote:
bill wrote:

<snip>
what am I doing wrong ?

Quite a lot. You have more then a few syntax errors in both the HTML and the
CSS. Run the code though the validators: http://validator.w3.org/ (as that
should pick up most of your errors, including the one I suspect is causing
your problem).

Thank you very much. The code validates as 4.01 strict.
Here is the complete listing that validated.
It still has the problem, which you may check by pasting this into a
page, validating it, and looking at it.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Search Results</title>
<!--
pagename=hoh_bulk_results
description=Right hand page to display the results of searching for one
person
-->

<style type="text/css">
<!--
body {background-color: #00FfaA;
color: black;
font-family: "times new roman", serif;
font-size: medium;
}
td {font-weight: bold;}
#paper {
position: absolute;
background-color: white;
color: black;
font-weight: bold;
height:430px;
width:560px;
border: solid blue;
margin: 20px 0px;
}
#subject {
color: black;
font-size:0.9em;
font-weight:bold;
margin: 30px 0px 30px 0px;
}

-->
</style>
</head>
<body>
<form action="dumy">
<div style="color=blue; border: dashed blue">
<div id="subject">For a Bulk Email:<br />Subject: <input type="text"
name="bulk_subject" size="60" />
</div>
<div id="paper">
<textarea rows="25" cols="65" name="bulk_letter">
</textarea>
</div>

<div style="background-color: #aa0000; padding: 15px 45px 15px 25px;">
<button type="submit" name="function" value="bulk_email"/>Send
a bulk email</button> &nbsp;
</div>
</div>
</form>
</body>
</html>

--
bill
Technical Service Systems
bill (atsign) TechServSys (period) com

unix is user friendly, it is just careful who it befriends

Jul 20 '05 #3
bill wrote:

The code validates as 4.01 strict.

It still has the problem, which you may check by pasting this into a
page, validating it, and looking at it.
How about a url to a test page instead? We're more likely to look at
something that's already available to our browsers and online validators.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


[code snipped]

--
Brian
follow the directions in my address to email me

Jul 20 '05 #4
Brian schreef:
bill wrote:
The code validates as 4.01 strict.

It still has the problem, which you may check by pasting this into a
page, validating it, and looking at it.


How about a url to a test page instead? We're more likely to look at
something that's already available to our browsers and online validators.


I was so much hoping for an answer. I don't know about Bill's page, but
I encounter a problem much alike with this page:

<http://home.wanadoo.nl/b.de.zoete/quickscan.html>

It should validate. Note: it's a large page due to many pictures

In IE6 it shows a border at the right side of individual 'sections',
which are containing divs. That border is supposed to be there.
In OP7.11 and NS7.1 there's no border as if the div has no height at all.

In the stylesheet go for the section that's 'named'
/*-- index classes en id's --*/

What am I doing wrong?

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html *Dagboek*
http://home.wanadoo.nl/b.de.zoete/html/vliegen.html *Zweefvliegen*?

Jul 20 '05 #5
Barbara de Zoete wrote:
<http://home.wanadoo.nl/b.de.zoete/quickscan.html>

In IE6 it shows a border at the right side of individual 'sections',
which are containing divs. That border is supposed to be there.
In OP7.11 and NS7.1 there's no border as if the div has no height at all.


This is the cause:

..group-container { display: table-row }

IE doesn't understand it and expands the container so that's why
there is o.k. I'm not very familiar with the CSS table model nor I
have experience with the different implementations and can't tell
you a definite solution. You could try leaving '.group-container {
display: block }' and putting an empty element with 'clear: both'
after the floats (.left and .right) so the container gets expanded.

Also:

..group-container { height: 100% }

What's for?

--
Stanimir

Jul 20 '05 #6
Stanimir Stamenkov schreef:
Barbara de Zoete wrote:
<http://home.wanadoo.nl/b.de.zoete/quickscan.html>

In IE6 it shows a border at the right side of individual 'sections',
which are containing divs. That border is supposed to be there.
In OP7.11 and NS7.1 there's no border as if the div has no height at all.

This is the cause:

..group-container { display: table-row }

IE doesn't understand it and expands the container so that's why there
is o.k. I'm not very familiar with the CSS table model nor I have
experience with the different implementations and can't tell you a
definite solution.


Out of all the things I tried, this one at least gave me the desired
effect in IE. Since over 90% of my visitors uses IE (5.5 or 6) I chose
that for the time being it was usefull, though I knew it was faulty.
You could try leaving '.group-container { display:
block }' and putting an empty element with 'clear: both' after the
floats (.left and .right) so the container gets expanded.
This works, very good! Thank you.

Also:

..group-container { height: 100% }

What's for?


That is to expand the border alongside the whole of the .group-container
box. It I leave it out, IE doesn't display the border properly.
Even with the above construction with the <p>&nbsp;</p> in the end, IE
refuses to display the border over the full height of the box, as NS and
OP do properly.
--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html *Dagboek*
http://home.wanadoo.nl/b.de.zoete/html/vliegen.html *Zweefvliegen*?

Jul 20 '05 #7
Brian wrote:
bill wrote:

The code validates as 4.01 strict.

It still has the problem, which you may check by pasting this into a
page, validating it, and looking at it.

How about a url to a test page instead? We're more likely to look at
something that's already available to our browsers and online validators.


I know Brian, and I agree. But, unfortunately the intranet server is not
available from the world.

--
bill
Technical Service Systems
bill (atsign) TechServSys (period) com

unix is user friendly, it is just careful who it befriends

Jul 20 '05 #8
bill wrote:

Thank you very much. The code validates as 4.01 strict.
Here is the complete listing that validated.

It still has the problem, which you may check by pasting this into a
page, validating it, and looking at it.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
You're missing the opening character of the dtd, '<', so it didn't
validate for me until after I put the character in.
#paper {
position: absolute;
DIV#paper has position: absolute, so it is taken out of the normal
document flow. Change it to static (i.e., remove the absolute
positioning, and the containing div's border will surround it.
#subject {
font-size:0.9em;
Best not to use font-size smaller than 100% (=1em). Please Google the
group for "font-size" and save me the trouble of repeating it all.
<form action="dumy">
No action specified for the form, but this looks like a mock-up anyways.
<div style="background-color: #aa0000; padding: 15px 45px 15px 25px;">
<button type="submit" name="function" value="bulk_email"/>Send
a bulk email</button>


on submit buttons and html forms:
< http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html >

--
Brian
follow the directions in my address to email me

Jul 20 '05 #9
bill wrote:
Brian wrote:
bill wrote:
It still has the problem, which you may check by pasting this into a
page, validating it, and looking at it.

I've responded to your earlier post.
How about a url to a test page instead? We're more likely to look at
something that's already available to our browsers and online validators.


I know Brian, and I agree. But, unfortunately the intranet server is not
available from the world.


In that case, find a internet site accessible to us all, and copy the
example page there.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #10
Brian wrote:
bill wrote:

Thank you very much. The code validates as 4.01 strict.
Here is the complete listing that validated.

It still has the problem, which you may check by pasting this into a
page, validating it, and looking at it.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

You're missing the opening character of the dtd, '<', so it didn't
validate for me until after I put the character in.


Cut and past boo-boo
#paper {
position: absolute;

DIV#paper has position: absolute, so it is taken out of the normal
document flow. Change it to static (i.e., remove the absolute
positioning, and the containing div's border will surround it.

Thank you brian, that is it !
> #subject {
> font-size:0.9em;


Best not to use font-size smaller than 100% (=1em). Please Google the
group for "font-size" and save me the trouble of repeating it all.


will do
<form action="dumy">

No action specified for the form, but this looks like a mock-up anyways.

exactly
<div style="background-color: #aa0000; padding: 15px 45px 15px 25px;">
<button type="submit" name="function" value="bulk_email"/>Send a bulk
email</button>

on submit buttons and html forms:
< http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html >

Not a problem as I specify the code and the browser. Very tightly
controlled intranet.

Thanks for the solution (the positioning property was another cut and
past problem. I grabbed the style sheet from another page where it was
positioned absolutely. My proof reading skills leave much to be desired.

--
bill
Technical Service Systems
bill (atsign) TechServSys (period) com

unix is user friendly, it is just careful who it befriends

Jul 20 '05 #11
Brian wrote:
bill wrote:
Brian wrote:
bill wrote:

It still has the problem, which you may check by pasting this into a
page, validating it, and looking at it.

I've responded to your earlier post.
How about a url to a test page instead? We're more likely to look at
something that's already available to our browsers and online
validators.

I know Brian, and I agree. But, unfortunately the intranet server is
not available from the world.

In that case, find a internet site accessible to us all, and copy the
example page there.


I can do that with a little work - so I will. Thanks for the suggestion.

--
bill
Technical Service Systems
bill (atsign) TechServSys (period) com

unix is user friendly, it is just careful who it befriends

Jul 20 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Csaba Gabor | last post: by
5 posts views Thread by Jesper Rønn-Jensen | last post: by
4 posts views Thread by TJS | last post: by
6 posts views Thread by wperry1 | last post: by
6 posts views Thread by Tony | last post: by
4 posts views Thread by Keith Bentrup | last post: by
3 posts views Thread by MikeK | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by Teichintx | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.