Forum Moderators: open
Here is a little page that demonstrates the problem:
----------------------------------------------------------
<html>
<head> <title>test form and div</title> </head>
<body>
Before the form and div elements.
<form action="temp1.html">
After the form tag, before the div tag.
<!--
Three different divs to try:
<div style="width: 50%;">
<div style="width: 50%; height: 50%; overflow: auto;">
<div style="width: 50%; height: 50%;">
-->
<div style="width: 50%; height: 50%; overflow: auto;">
Hi there, this is a long line (how about we make it longer) inside the form and div elements
</div>
After closing the div tag, before closing the form tag.
</form>
After closing the form element.
</body></html>
I've included three different divs. Each of the height and overflow
attributes seem to cause the problem.
I've looked through the HTML4.01 and CSS1/2 specs and haven't found anything saying I can't do this. I've run the code through the W3C HTML and CSS validators, which found no errors.
Anyone know what is going on here?
Thanks!
Christina
Are you trying to add or miss out a scroll bar here?
I read your post twice and can't work out what you're trying to do ;)
Nick
The meaning of auto is up to the browser.
Sorry, I should have been clearer. What I have is:
<form>
<div style="height: 30%; width: 100%; overflow: auto;">
data line 1
data line 2
data line 3
...
data line N
</div>
<div style="height: 30%; width: 100%; overflow: auto;">
data line 1
...
data line N
</div>
</form>
The desired result is two scrollboxes inside the form. But Moz/N6.2 on most OSes doesn't display what's in the divs at all. IE5.5 handles it fine, and it seems to be valid html/css. If you remove the form tags, the divs work fine. If you remove the overflow and height attributes, the divs work fine even inside the form tags. But I need the multiple scrollboxes inside the form tags. If I can't get it working across the major browser/OS combinations, I'll just have to go back to having extremely long pages.
Thanks for reading!
Christina
Why do you need it inside a form? Why not have it outside of the form tags? It's not part of an input or anything right?
Nick
Yes - the lines inside the divs have checkboxes - the user needs to be able to select rows from any of the div sets (so the form tags have to go outside of all of the divs) and then submit to another form.
Christina
Well, I'm sorry to say that I'm stumped.
Here's a thought though:
Why not break this long form up with <fieldset> and <legend> tags to group the different groups of data?
If you style these elecments you can make very attractive forms with nicely segmented areas, making them more useable and accessible.
Just a thought ;)
Nick
<div style="height: 80px; width: 50%; overflow: scroll; clip:rect(0,0,0,0);">
Note that I couldn't use a percentage on the height.
<div style="width: 50%; height: 70px; overflow: auto;">
<div style="width: 50%; height: 4em; overflow: auto;">What happens otherwise, is that Mozilla will simply collapse your div to zero pixels height, as it doesn't have a directly surrounding block element with a fixed height. The next parent block is the form, and without a height specification, that one will be treated as "dynamic" in height. Ultimately this might be a bug, but the browser doesn't seem to be able to take a percentage of that dynamic value.
Btw: If you leave the overflow:auto away, even funnier things will happen... ;)
I didn't think of trying the height ;)
Nick
Happy happy happy! :)
Christina
