IE oversize div and without scrollbars

Herbert Meister · May 19, 2009

HI,

I have an div with an image bigger than the browser window. In Firefox
and Safari I was able to disable the scroll bars with overflow:hidden;
style on the body. But I can't get this to work on IE6 or earlier. The
only thing that worked was a trick with the documenttype (make it render
with some old style engine) but then some older positioning bugs appear.
Is there a way to solve this problem with another style or anything?

TIA

Beauregard T. Shagnasty · May 19, 2009

Herbert said:
I have an div with an image bigger than the browser window. In Firefox
and Safari I was able to disable the scroll bars with
overflow:hidden; style on the body.

How about first a question? How will visitors see the entire image if
you remove the scrollbars? And do you first alert people to the size of
the download on the link calling the page?

But I can't get this to work on IE6 or earlier. The only thing that
worked was a trick with the documenttype (make it render with some
old style engine) but then some older positioning bugs appear. Is
there a way to solve this problem with another style or anything?

Untested (no IE here):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title here</title>
</head>
<body>
<div style="overflow: hidden;">
<img src="..." alt="..." width="3000" height="2000">
</div>
</body>
</html>

dorayme · May 19, 2009

"Beauregard T. Shagnasty said:
How about first a question? How will visitors see the entire image if
you remove the scrollbars? And do you first alert people to the size of
the download on the link calling the page?

Untested (no IE here):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title here</title>
</head>
<body>
<div style="overflow: hidden;">
<img src="..." alt="..." width="3000" height="2000">
</div>
</body>
</html>

This does not work even on Mac FF (or other modern Mac browsers), the
vertical scrollbar is still there. The OP's overflow on BODY does get
rid of both scrolls in FF and other modern browsers.

IE6 and overflow, it is known to be hopeless!

OP might get what he wants by simply making the image a background to an
element, BODY even, no need then for any fancy CSS or dimensions.

Neredbojias · May 20, 2009

HI,

I have an div with an image bigger than the browser window. In
Firefox and Safari I was able to disable the scroll bars with
overflow:hidden; style on the body.

Try the same style on the html element.

Herbert Meister · May 20, 2009

Neredbojias said:
Try the same style on the html element.

Cool, thanks!

Herbert Meister · May 20, 2009

Beauregard said:
How about first a question? How will visitors see the entire image if
you remove the scrollbars?

They won't and that's ok. Because of that I want no scrollbars :-D (it's
a background element)

And do you first alert people to the size of
the download on the link calling the page?

No, that is too much conversation before opening the site. Until the
visitor has read and thought about those alerts at least half of the
picture would be loaded. And I want them to visit the site anyway.

dorayme · May 20, 2009

Herbert Meister said:
They won't and that's ok. Because of that I want no scrollbars :-D (it's
a background element)

It's a background image! Well, FMD! Now you tell us! Excuse me, I have
to go find that hefty piece of 10" x 6" bit of hardwood to knock my
brain out temporarily. This glass of fine wine will simply not do the
job.

Beauregard T. Shagnasty · May 20, 2009

Herbert said:
They won't and that's ok. Because of that I want no scrollbars :-D
(it's a background element)

A background element? Why didn't you say so?

Put this in your CSS:

body { background-image: url('/path/to/image.jpg'); }

No, that is too much conversation before opening the site. Until the
visitor has read and thought about those alerts at least half of the
picture would be loaded.

Do you plan to have a 2- or 3-Megabyte splash page? Not very friendly.
By 'alert', I meant:

And I want them to visit the site anyway.

Well, of course we want people to visit our sites. Do you expect any
visitors using slow connections .. perhaps dialup users?

Herbert Meister · May 20, 2009

Beauregard said:
A background element? Why didn't you say so?
Put this in your CSS:

body { background-image: url('/path/to/image.jpg'); }

Ok the whole story: A background that is centered to the page and to the
content and it is a transparent background on another simple background.

Well, of course we want people to visit our sites. Do you expect any
visitors using slow connections .. perhaps dialup users?

I try to keep it at minimum. Actually at the moment it is quite huge
(300kb) for its content, it is a PNG with transparent elements. I have
to try so save it in a different compression if that's possible. If that
won't work I can live with the 300kb version. After the other stuff is
loaded it will load slowly - it looks all right because it is in between
the content and the main background.

Any ideas about compressing a PNG with alpha channels?

Beauregard T. Shagnasty · May 20, 2009

Herbert said:
Ok the whole story: A background that is centered to the page and to
the content and it is a transparent background on another simple
background.

The whole story .. of the moment. :-/

Now you say the background needs to be centered. Heh. Why would you want
to *center* a background image that won't fit in the browser window to
begin with?

Methinks you don't want a "background" at all. It is time for you to
post a link to the page, as you have it at the moment.

Herbert Meister · May 20, 2009

Beauregard said:
Now you say the background needs to be centered. Heh. Why would you want
to*center* a background image that won't fit in the browser window to
begin with?

To fill the empty space on big displays and look similar on small
displays. Just looks nicer.

Beauregard T. Shagnasty · May 20, 2009

Herbert said:
To fill the empty space on big displays and look similar on small
displays. Just looks nicer.

Perhaps you should look into writing a fluid site which works at all
browser window sizes. Regarding "big" displays, also consider that not
everyone uses a 22-inch browser window. In fact, on my 22-inch
wide-screen monitor, I have two different browsers open side by side, or
each around 900 pixels.

dorayme · May 20, 2009

Herbert Meister said:
To fill the empty space on big displays and look similar on small
displays. Just looks nicer.

Not centering would also fill a big screen, and not centering would also
look similar on small screens (as similar as the screens were similar).
Looks nicer... that is a different matter unable to be penetrated by
logic.

Off page scrollbars with div and css	16	May 9, 2005
Div bumping and 'overflow' property	1	Sep 7, 2007
Old LOCKFILE warning on github repo - I cant run the app locally	1	Apr 22, 2023
div no scroller in IE but fine in firefox	8	Jan 6, 2007
div with background color not rendering in Firefox, but renders in IE.	3	Jun 11, 2007
Frustrating gap between leftmenu div and onecolbody div	4	Sep 5, 2007
TABLE within DIV Issue	5	Feb 6, 2007
div question IE/Opera vs. FireFox/Safari who's right?	2	Mar 17, 2006

IE oversize div and without scrollbars

Herbert Meister

Beauregard T. Shagnasty

dorayme

Neredbojias

Herbert Meister

Herbert Meister

dorayme

Beauregard T. Shagnasty

Herbert Meister

Beauregard T. Shagnasty

Herbert Meister

Beauregard T. Shagnasty

dorayme

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads