Liquid design: Horizontal centering + overflow: hidden = problem in IE6

#1 July 20th, 2005, 09:40 PM

As part of my explorations in liquid design, I'm exploring ways to use the
overflow: hidden property -- when browser windows become too narrow, I want
(some) images to get cropped rather than have the layout break up. In some
cases, losing parts of images can be an interesting option.
http://www.hebig.org/blog/titlepic.php was the first example I found, and
it's quite nifty. His image works well when progressively cropped from the
right, in my case, I'm also trying to get the images to get cropped equally
from both sides, leaving the (presumably interesting) center area to be
displayed.

I have a test page up
(http://www.blaqzone.com/Temp/Centere...Overflow.html), and it works
fine in Mozilla -- but not in IE6/PC. Are there any curious souls out there
who would like to have a peek? Is there a cross-browser way to do this?

#2 July 20th, 2005, 09:40 PM

>[color=blue]
> I have a test page up
> (http://www.blaqzone.com/Temp/Centere...Overflow.html), and it works
> fine in Mozilla -- but not in IE6/PC. Are there any curious souls out[/color]
there[color=blue]
> who would like to have a peek? Is there a cross-browser way to do this?
>[/color]
Hi
Your DTD puts IE6 in quirks mode. Try
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

and see if IE6 plays ball now.
HTH
David

#3 July 20th, 2005, 09:40 PM

David Graham wrote:
[color=blue]
> Your DTD puts IE6 in quirks mode. Try
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
>
> and see if IE6 plays ball now.[/color]

Setting IE6 to Standards mode does work better: the images are now centered
in their DIVs. Unfortunately, the overflow does not get hidden.

1) Time to do some research on IE6(Standards) vs. overflow:hidden
2) If I'm going to use this technique, I'd better find a way for Quirks mode
to also work, since tons of people use IE5.

David, any further thoughts?

--Charles, whose life would be *so much* simpler if he could just limit
himself to fixed-width layouts...

#4 July 20th, 2005, 09:41 PM

"Charles Blaquière" <blaq@interlog.com> wrote in message
news:Sixnb.105825$h61.57135@news01.bloor.is.net.ca ble.rogers.com...[color=blue]
> David Graham wrote:
>[color=green]
> > Your DTD puts IE6 in quirks mode. Try
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> > "http://www.w3.org/TR/html4/loose.dtd">
> >
> > and see if IE6 plays ball now.[/color]
>
> Setting IE6 to Standards mode does work better: the images are now[/color]
centered[color=blue]
> in their DIVs. Unfortunately, the overflow does not get hidden.
>
> 1) Time to do some research on IE6(Standards) vs. overflow:hidden
> 2) If I'm going to use this technique, I'd better find a way for Quirks[/color]
mode[color=blue]
> to also work, since tons of people use IE5.
>
> David, any further thoughts?
>[/color]
Hi Charles
I know IE (all versions) has some odd ways of handling the overflow
property. One mistake it makes is with
overflow: visible;
Instead of letting the contents spill out of the containing div, IE expands
the div so that it is big enough to fit the contents. A nice link explaining
how different browsers handle overflow is

http://www.xs4all.nl/~ppk/css2tests/overflow.html

I dont think IE has problems with hidden though!
Try removing the multiple classes incase its an issue related to that.

As for presenting IE5 and IE5.5 with sonething different to IE6 (standard
mode) I use conditional comments. These don't rely on any browser sniffing
and are quite safe and reliable. A useful link on this is

http://msdn.microsoft.com/library/de...thor/dhtml/ove
rview/ccomment_ovw.asp

I had a problem with older versions of IE not rendering the position of my
nav div correctly so I stuck the lines below into each page and it solved
the problem.

<![if lt IE 5.5000]>
<DIV ID="navigation">
<![endif]>





Watch out for spaces in the above i.e the must be a space between each
seperate bit inside the square brakets. I'm basically saying above that if
IE less than version 5 (lt = less than) use the navigation div as it is, if
you IE5 then do the correction to the left position and if your IE6 then do
this other left correction. (OT) Having said all that, someone in this
group, might have been Toby, experimented for me and found out that IE did
not like my left: 0 - anyway it wasn't really necessary and when I took out
left: 0; it all worked the same in all IE versions.

HTH
David

#5 July 20th, 2005, 09:41 PM

and it solved[color=blue]
> the problem.
>
> <![if lt IE 5.5000]>
> <DIV ID="navigation">
> <![endif]>
>
> 
>
> 
>
> Watch out for spaces in the above i.e the must be a space between each
> seperate bit inside the square brakets. I'm basically saying above that if
> IE less than version 5 (lt = less than)[/color]

woops - meant version 5.5000

#6 July 20th, 2005, 09:50 PM

There seem to be two methods available for cropping images that don't fit
within their container. (e.g. when the browser window is resized way too
small) We can place the image in a div and give the div the "overflow:
hidden" style, or we can define the image as a background for the div.
Background images, having been around much longer than the CSS2 overflow
property, would presumably be more reliable.

My first test [ http://www.blaqzone.com/Temp/Centere...nOverflow.html ]
occasionally gave funky results in IE, so I temporarily set it aside and
tried the background-image route. [
http://www.blaqzone.com/Temp/Centere...ckground).html ]
seems to work better, so I decided to put it to work in a test page using
the layout from the target site:

http://www.kpuc.org/events/90th-anniversary-test.html

The images crop well, making the page much sturdier at narrow browser
widths. However, my ambitious nature gave rise to a desire to find a
generalized technique, one that would allow images to:

- crop from the left
- crop from the right
- crop from both sides

and allow me to place images:

- mostly left-aligned in their container
- centered in their container
- mostly right-aligned in their container

Examples such as http://www.hebig.org/blog/titlepic.php crop a left-aligned
image from its right edge -- but what happens if the important material is
on the right, not the left, of the image? This is why I'm hoping to come up
with a generalized technique allowing maximum design flexibility.

Please have a look at the test page. I've hit a block at this point. Thanks!

What is Bytes?

Popular Articles