When using collapsing/expanding DIVs in IE6 container does not expand.

[Chris K.]

Hello,

I have some simple javascript and CSS styles that allow for a DIV to expand
and collapse based on what a person clicks on. The CSS fully validates and
there are no errors.

The problem is that in Internet Explorer 6 when a DIV is expanded the
container of the DIV does not expand so the contents of the DIV are shown
past the edges of the container. The URL for the site is below.

https://wesleyseminary.edu/support/donatestep1.asp

The problem is not with IE7, Opera, Firefox, or even Konquerer.

Only with IE6 (would be a nice touch for earlier versions but not required!)
when any of the events for expaning and collapsing divs (try the top radio
buttons on the form) the bottom of the form is not expanded.

What can I do to make this site work in IE6 like it works on all of the
other browsers?

Thanks for your time.

Regards,
Christopher Koeber

 

[Bergamot]

The problem is that in Internet Explorer 6 when a DIV is expanded the
container of the DIV does not expand so the contents of the DIV are shown
past the edges of the container. The URL for the site is below.

https://wesleyseminary.edu/support/donatestep1.asp

FYI, content spilling out of its container is not limited to IE:
http://www.bergamotus.ws/screenshots/wesleyseminary.png

Don't set a fixed height on text blocks, especially not in px units,
unless you don't care if text spills out.

 

[Chris K.]

Thanks so much for your time. What web browser was this? It also seems like
the text size on your browser is set larger that normal. Is that the case?

In either case I will try and convert text sizes to em to see how that will
help.

Regards,
Christopher Koeber

 

[dorayme]

Thanks so much for your time. What web browser was this? It also seems like
the text size on your browser is set larger that normal. Is that the case?

In either case I will try and convert text sizes to em to see how that will
help.

You are missing the point of Bergamot's good advice. He was not talking
about your text size, he was talking about the blocks they are in. You
see, if a block like a paragraph element has a fixed height and is not
left to grow height naturally, where is the text to go when the height
is used up. It does not matter what size the text is except in relevance
to how quickly the height is reached.

Please do not top post.

 

[Bergamot]

What web browser was this? It also seems like
the text size on your browser is set larger that normal. Is that the case?

The browser doesn't matter, nor does the fact I use large type by
default. What does matter is that you cannot control the user's font
size, regardless of how much you wish otherwise.

In either case I will try and convert text sizes to em to see how that will
help.

That won't make any difference if you keep the height:110px; on the
container divs. Remove the height restriction and the box will size
itself as needed to fit the content. Set a min-height if you like, but
not a fixed height.

And please don't top-post.
http://web.presby.edu/~nnqadmin/nnq/nquote.html