4 replies [Last post]
Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 11 years 1 week ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

As many of you would be aware, when IE encounters anything that is larger than the containing div, IE will expand to cater for the large item. Moz does not.

Alough this does not SEEM to work on % widths and heights it does work on fixed widths and heights like 200px

By adding overflow: hidden; to your CSS then the fixed width or height box will not expand past what you set it to.

I have not fully tested this, and will investigate more.

Would love if someone could test it in IE5.x

Regards
Day

The only way to learn is to do it yourself

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 11 years 3 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

CSS IE fixed width and height

Quote:
By adding overflow: hidden; to your CSS then the fixed width or height box will not expand past what you set it to.

The default overflow value is "visible", which is supposed to
allow the content to protrude out of a fixed height or width
container. IE enlarges the box instead. "overflow: hidden;"
does constrain the box size in IE, but at the cost of hiding
overflowed content. If that content is text that a user has
enlarged because of weak vision and half the text is gone,
they won't be happy.

My method uses the text in an absolute nested div to trick
IE into not expanding the box. It's a complex fix, but that's
typical when dealing with IE.

What really burns my toast is that M$ did this on purpose,
just to be 'helpful'. After all, who would ever want a box
NOT to enclose all content? Those W3C jerks are idiots!
Okay, so an enlarged float might explode a layout, but
serves 'em right for not using tables.

http//www.positioniseverything.net/

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 11 years 1 week ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

CSS IE fixed width and height

Big John wrote:

"overflow: hidden;"
does constrain the box size in IE, but at the cost of hiding
overflowed content.

The point I am trying to get across is "there is a way to fix the size of the box in IE" and emulate Moz which will fix the width or height.

When positioning with CSS, it is annoying when a box will not stay where you put it, or your whole layout is broken by the fact that IE will expand the box when something inside is too big. Take the 3 column layout as per Douglas livingstone where it would be so handy to be able to stop the left and right columns expanding and therefore breaking the whole layout.

A fixed width or height in Moz is fixed and you will lose text if it is larger as well, and now we can emulate that in IE. More testing still required though.

Big John wrote:

My method uses the text in an absolute nested div to trick
IE into not expanding the box. It's a complex fix, but that's
typical when dealing with IE.

Isn't the above better then?

Big John wrote:

The default overflow value is "visible", which is supposed to
allow the content to protrude out of a fixed height or width
container. IE enlarges the box instead.

Yes can see that. I also notice Moz does not enlarge the box when you use "visible", but the content still flows out of the box and no scroll bar appears.

I use "auto" and both IE and Moz work perfectly. I have been using it for awhile now and hadn't really looked at "visible" Now I will have to look at some hacks for browsers that use visible.

Regards
Day

The only way to learn is to do it yourself

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 11 years 3 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

CSS IE fixed width and height

Quote:
I use "auto" and both IE and Moz work perfectly. I have been using it for awhile now and hadn't really looked at "visible" Now I will have to look at some hacks for browsers that use visible.

That's just it, they all use it because it is the default value for "overflow".
Thus, when overflow is not specified the extra content should be visible.
That is when IE fails to obey the specs, inflating the box. Sure"auto"
works, and "hidden" works, but the default "visible" does not work in IE,
at least not as required by the specs. Hiding the extra content does
not solve the problem IMO, altho I'm willing to admit that others may
feel differently.

I have had a number of float layouts made useless by this screw-up
perpetrated by the faceless programmers at M$, so perhaps I'm
slightly bitter. Sorry.

http//www.positioniseverything.net/

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 11 years 1 week ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

CSS IE fixed width and height

Big John wrote:

That's just it, they all use it because it is the default value for "overflow".
Thus, when overflow is not specified the extra content should be visible.
That is when IE fails to obey the specs, inflating the box. Sure"auto"
works, and "hidden" works, but the default "visible" does not work in IE,
at least not as required by the specs. Hiding the extra content does
not solve the problem IMO, altho I'm willing to admit that others may
feel differently.

I have had a number of float layouts made useless by this *beep*-up
perpetrated by the faceless programmers at M$, so perhaps I'm
slightly bitter. Sorry.

Understand - pity MOZ FB0.7 has the same problem with overflow: visible;.

At least we have a hack for expanding fixed widths and heights in IE. Have already used it twice.

Regards
Day

The only way to learn is to do it yourself