textarea not enclosed by div

bill

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>  
</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

Subscribe Post Reply

5210

David Dorward

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

bill

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>


<style type="text/css">

</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>  
</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

Brian

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

Barbara de Zoete

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

Stanimir Stamenkov

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

Barbara de Zoete

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> </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

bill

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

Brian

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

Brian

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

bill

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

bill

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

Similar topics

How to set the font of a TEXTAREA

by: Csaba Gabor | last post by:

What I'd like to do is to be able to set the font of a textarea element to the same font that another element is using (say, for example, an <INPUT type=text ...> element, but if that's a no go,...

HTML / CSS

text select in textarea (regular expression)

by: Volt | last post by:

is there any way to select and mark part of text in textarea by regular expression? i need to select the first string in textarea whitch is like xxxxx,xxx where x is any character

Javascript

Limit textarea length

by: Jesper Rønn-Jensen | last post by:

I have a textarea that must be limited to 70 characters. No big deal -- at least so I thought. * Textarea must not exceed 70 characters * Exceeding content must be cut off * Must work on input by...

Javascript

change textarea dynamically

by: TJS | last post by:

can the rows and columns of a textarea element with an id be changed on the fly ? if so is there an example ?

ASP.NET

Textarea Inside of a textarea

by: wperry1 | last post by:

I am writing a small database utility to catalog all of my favorite ASM/JS/VBS... functions and scripts on an asp page. Everything is going smoothly except for one thing that I can't quite seem to...

ASP / Active Server Pages

<textarea> cols & rows

by: Tony | last post by:

The w3schools HTML tag reference for <textarea> http://www.w3schools.com/tags/tag_textarea.asp says that the attributes 'cols' and 'rows' are REQUIRED attributes for the textarea tag. Looking at...

HTML / CSS

scrolling in textarea to selection in FF

by: Keith Bentrup | last post by:

Hi all, I wrote a simple search function to find text in a textarea where not all the text is visible (ie. the text box displays 10 lines but there may be more than 1000 lines to search). I can...

Javascript

Safari Textarea and Events

by: MikeK | last post by:

Ok, I've been noodling with this for several days now and I'm starting to go crazy. Does Apple's Safari browser support drag events on Textarea elements? The few specs and docs I've found seem to...

Javascript

<textarea> function to replace Returns and Spaces

by: FunkHouse9 | last post by:

I'm working on a form to collect data in a textarea which and am trying to keep returns and spaces. I have a couple of functions that I Frankensteined together to replace returns with <br> and to...

Javascript

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET