Simon Willison’s Weblog

Ooh. That is cool. I can see that being implemented in countless home page header/banner arrangements from now on. It fills me with immense pride that people are willing to share this kind of knowledge. There aren't many industries where this kind of pooling goes on.

Simon Jessey - 6th July 2003 22:23 - #

In IE5.0 it's work correctly.

Evgeny Fedorenko - 7th July 2003 07:42 - #

Works in Safari 1.0 (v83)

Chris - 7th July 2003 08:49 - #

Well, actually there is a problem with overflow: hidden, and I happen to be struggling with it at the moment:

If the div contents are wider than the browser window, you get an ugly horizontal scrollbar on Mozilla and derivatives.

You can see the problem here. Just resize the window so that the dotted rectangle is more or less centered (the scroller will currently only work on Mozilla and Safari, since I'm trying to figure out if the UI is usable before committing to it).

And yes, it does have a clip rectangle.

I'm considering skipping overflow altogether and going for an iframe for this, unless someone can lead me to a workaround...

Rui Carmo - 7th July 2003 10:51 - #

you can do the same expanding picture trick using an iframe, which is how i experimented with it. obviously turn of the border settings and margins unless you really want that 'ugly border' effect. whoops! just read rui's last paragraph. i'll get me coat ;-)

pete - 7th July 2003 13:24 - #

I think you have to use: overflow:-moz-scrollbars-none; for mozilla. Actually, I think Mozilla is doing the right thing by displaying a scrollbar, since the hidden content is still there. More info here: http://www.blooberry.com/indexdot/css/properties/p osition/overflow.htm

Martijn - 7th July 2003 16:06 - #

Thanks Martijn, overflow:-moz-scrollbars-none; did it. It feels like a hideous kludge, but fixed the scrollbar in Camino (which is Mozilla-derived) without breaking Safari.

I wonder, however, what IE and the like will make of it... Oh well. I'll get the rest working first :)

Rui Carmo - 7th July 2003 20:29 - #

Three remarks: 1. for overflow IE users also have overflow-x and overflow-y at their disposal and depending on the situation it can be very handy. 2. The usage of Haiko Hebig is NOT good practice in terms of bandwidth, download speed. If one does nothing more then showing a clipped (why not using clipping anyway) version of the large picture it is a waist. Better cut the part you want to show in a graphical program and serve the smaller image instead. 3. It can be usefulle to use a large image and show a part of it if you are aiming for a dynamical presentation with zooming in and panning (easily done in IE55 and IE6 by using SMIL and the margin-left, margin-top, width and height animation). At above adress I will demonstrate that. Cybarber

cybarber - 7th July 2003 21:16 - #

O this link is cool! I use the same technique on my weblog, but I use it for blocks of code.

code{ color:#000; background:none; font-family:"Courier New", Courier, monospace; letter-spacing:normal; } code[class]{ display:block; width:90%; overflow:auto; text-align:left; letter-spacing:normal; white-space:pre; }

[ Example ]

Anne van Kesteren - 7th July 2003 21:36 - #

Setting overflow properties can be pretty handy. I use it to limit the list of recent referrers on my site to a scrollable box no higher than 150px. IE-users get overflow-y and a coloured scrollbar as a bonus.

About the linked example though: couldn't the same effect be achieved by simply defining a background-image for the div?

milov - 8th July 2003 14:04 - #

milov, how would one add a hyperlink, alt tag to the image if it is used as a background?

jimmy - 8th July 2003 15:01 - #

@cybarber: "Better cut the part you want to show in a graphical program and serve the smaller image instead." - That's what I did, and that's why I have to disagree with your conclusion. As explained on my page, what gets served is this cutout of this picture. It is 483 pixels wide and weights 24 kilobytes. A smaller cutout would not make sense as some people use very high screen resolutions.

Haiko Hebig - 8th July 2003 16:42 - #

how would one add a hyperlink, alt tag to the image if it is used as a background?

Well, instead of using a div with a background-image, you could use an <a>-tag with display:block and a background-image - that way the link becomes a big clickable block without needing an image tag in it. And you can add a title="whatever" parameter to links for alt-tag-like tooltips.

milov - 9th July 2003 14:07 - #

Arises an interesting problem: some browsers cut from the left, some from the right - see screenshots

Haiko Hebig - 9th July 2003 14:51 - #

Please see the following:

http://www.sitepoint.com/forums/showthread.php?t=1 50958

http://www.sitepoint.com/forums/showthread.php?t=1 50957

I'm designing an interactive mapping application that lets a user zoom and pan by clicking and dragging a map image. The map image, while contained in a clipped parent div with overlflow:hidden, frequently is dragged beyond the bounds of the browser window. Scrollbars pop up in the browser window on NS/Mozilla and Opera. overflow:-moz-scrollbars-none; fixes the problem on Mozilla, but Opera is still broken and IE, which worked without the -moz fix, now overflows the content. I'm reluctant to use browser specific switches to activate certain css properties. (Actually, is there an easy way to get Mozilla to recognize something that is ignored by IE? I know the reverse is quite common.)

As described in the links above, I found the following to work in IE, NS/Moz, and Opera. I have yet to see what happens in Safari/Konqueror, but I'm willing to bet they'll work, too.

Set absolutely positioned parent container of specified dimensions to {overflow:hidden;}
* Now works in IE

Changed map image div to {position: relative;}
* Mozilla/NS are happy

Set {overflow:hidden;} in map image
* Opera happier

Russell - 5th February 2004 04:18 - #

hi i have placed datagrid. whenever the limit exceeds while adding the entries scroll bar appears. I could able to see this scrollbar in IE but not in konqueror 2.1.1 as i am using div tag to do this. if u have an idea please do help me. Regards request.

Request - 1st August 2005 12:27 - #