Scrolling DIV in a table - IE vs Mozilla

Geoff Smith · Sep 9, 2003

This may be over ambitious but I wish to create a div that is sized and
positioned relative to the page. Then within that div I want a header
and footer and between them another div with content that displays a
scroll bar when necessary. The header and footer will be of a fixed size
the content will take the remainder of the space.

I have something that works in IE6.0 but it doesn't in Mozilla (Firebird
0.6.1)

If you have a look at the code below in IE6 and mess around with the
window size you will see what I'm trying to acheive - but Mozilla
doesn't contain the size of the content area.

Is this a bug in Mozilla or IE doing things that are no standard?

Is there a way I can get the IE behaviour across all (well most)
browsers?

<html>
<body>
<div style="position: absolute; left:10%; top:10%; width:80%;
height:80%;">
<table width="100%" height="100%" border="1" cellspacing="0"
cellpadding="2">
<tr>
<td height="5%">header</td>
</tr>
<tr>
<td height="90%">
<div style="position: relative; overflow: auto; left: 0px; top:
0px; height: 100%; width: 100%; background-color: #FFFFCC; border: 1px
solid #000000; ">
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
</div>
</td>
</tr>
<tr>
<td height="5%">footer</td>
</tr>
</table>
</div>
</body>
</html>

Uni Wien · Sep 10, 2003

well, for me it works fine in mozilla - not tested in firebird, but mozilla
1.4; so probably you have just to wait for a stable version of
mozilla-firebird to solve your problem.

Els · Sep 10, 2003

Uni said:
well, for me it works fine in mozilla - not tested in firebird, but mozilla
1.4; so probably you have just to wait for a stable version of
mozilla-firebird to solve your problem.

Well, maybe I'm misunderstanding things (I do that sometimes
;-)), but in both my Firebird and my Moz. 1.4, this code
doesn't give a scrollbar like it does in IE6.0.

Geoff Smith · Sep 10, 2003

Well, maybe I'm misunderstanding things (I do that sometimes
;-)), but in both my Firebird and my Moz. 1.4, this code
doesn't give a scrollbar like it does in IE6.0.

I haven't tried Mozilla it's self yet but that's what I get - in Firebird
the content expands off the bottom of the window instead of activating the
scroll bar.

John W. · Sep 10, 2003

Geoff Smith said:
I haven't tried Mozilla it's self yet but that's what I get - in Firebird
the content expands off the bottom of the window instead of activating the
scroll bar.

Even after adding the missing <head><title></title></head> and not
removing the height="100%" (brrrr.), there is no hor. scrollbar in IE
6, O 7.11, Firebird, Moz 1.4.

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

Els · Sep 11, 2003

John said:
Even after adding the missing <head><title></title></head> and not
removing the height="100%" (brrrr.), there is no hor. scrollbar in IE
6, O 7.11, Firebird, Moz 1.4.

I thought we were talking about a vertical scrollbar, which
does appear in IE6.0 and Opera 7.11, but the horizontal one
will appear in Opera 7.11 and MSN Explorer when you make
sure there is a 'long word' in the content. Not in IE 6.0
though, which I think is funny...

Els · Sep 11, 2003

Els said:
I thought we were talking about a vertical scrollbar, which does appear
in IE6.0 and Opera 7.11, but the horizontal one will appear in Opera
7.11 and MSN Explorer when you make sure there is a 'long word' in the
content. Not in IE 6.0 though, which I think is funny...

Oops, hang on, in MSN Explorer it does give a hor.scrollbar,
but it doesn't help, the div doesn't get narrower with the
window... But still, Opera does everything correctly.

John W. · Sep 11, 2003

Els said:
I thought we were talking about a vertical scrollbar, which
does appear in IE6.0 ...

The *space* for a vert. scrollbar is there, but no usable triangle for
sliding up/down the screen.

... and Opera 7.11,

No scrollbar, vertical nor horizontal, sorry.

but the horizontal one
will appear in Opera 7.11 and MSN Explorer when you make
sure there is a 'long word' in the content.

I copied the source from OP as given, no long words in there.

Not in IE 6.0 though, which I think is funny...

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

John W. · Sep 11, 2003

Els said:
Oops, hang on, in MSN Explorer it does give a hor.scrollbar,

but it doesn't help, the div doesn't get narrower with the
window... But still, Opera does everything correctly.

O.K. we start all over again:
IE 6.0: initially there is no scrollbar, except the *reserved* space
on the right side of the white area, the usual one.
Making the screen smaller: 2 bars appear in the yellow area, but the
hor. one disappears after a refresh, no word is long enough, the vert.
one remains because of the total height amount of content.
Moz 1.4: initially no bars, no reserved space.
Making the screen smaller eventually a vert.one on the right side of
the white area appears because the yellow content moves downward.
Reloading/refreshing has no effect whatsoever.
O 7.11: initially no scrollbars whatsoever.
Making the screen smaller a vert. one appears in the yellow area,
after reloading it disappears.
Making the screen even smaller and reloading: the content disappears
left over is a bordered outline of a white bg table (no yellow
anymore) which looks like having 4 cells (actually there are 3 cells)
with the word header in the topcell and footer in the bottomcell.
FireBird: same as Moz.

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

Els · Sep 11, 2003

John said:
The *space* for a vert. scrollbar is there, but no usable triangle for
sliding up/down the screen.

Works fine (both triangles and the bar are clickable and
functioning) in my IE6.0 (unless I put a doctype in it)

No scrollbar, vertical nor horizontal, sorry.

Works with or without doctype, and with or without
<head><title>test</title></head>, and without the long word
(original source from OP) I still get a vertical scrollbar
in Opera 7.11

I copied the source from OP as given, no long words in there.

I did notice that, but I don't think there 'should' be a
horizontal scrollbar when there is no 'no wrap'-content?

Els · Sep 11, 2003

John said:
Els:

O.K. we start all over again:
IE 6.0: initially there is no scrollbar, except the *reserved* space
on the right side of the white area, the usual one.
Making the screen smaller: 2 bars appear in the yellow area, but the
hor. one disappears after a refresh, no word is long enough, the vert.
one remains because of the total height amount of content.
Moz 1.4: initially no bars, no reserved space.
Making the screen smaller eventually a vert.one on the right side of
the white area appears because the yellow content moves downward.
Reloading/refreshing has no effect whatsoever.
O 7.11: initially no scrollbars whatsoever.
Making the screen smaller a vert. one appears in the yellow area,
after reloading it disappears.
Making the screen even smaller and reloading: the content disappears
left over is a bordered outline of a white bg table (no yellow
anymore) which looks like having 4 cells (actually there are 3 cells)
with the word header in the topcell and footer in the bottomcell.
FireBird: same as Moz.

Now I get it. I do see the same as you, just didn't
reload/watch closely enough. And as far as IE6.0 goes: I
wasn't aware of the need for scrollbars when the window was
big enough, I thought it had to appear (vert.one only) after
narrowing the window, which it does.
The line in the middle after reloading in O 7.11 is the
outline of the div inside the td. If I set a min-height of
50px, it looks 50px high after a reload. But of course it
should be 100% of the td, and I have no idea why it doesn't
show that way after each reload. You?

John W. · Sep 11, 2003

Els said:
[...]

No scrollbar, vertical nor horizontal, sorry.

Click to expand...

Works with or without doctype, and with or without
<head><title>test</title></head>, and without the long word
(original source from OP) I still get a vertical scrollbar
in Opera 7.11

My O 7.11 is automagically reloading maybe?

You don't want a prt scr do you?

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

John W. · Sep 11, 2003

Els said:
[...]

I did notice that, but I don't think there 'should' be a
horizontal scrollbar when there is no 'no wrap'-content?

Sorry vergeten:
m.b.t.: *<div style="position: relative; overflow: auto;*
See: http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
<q>
auto
The behavior of the 'auto' value is user agent-dependent, but should
.....................................^^^^^^^^^^^^^^^^^^^.......^^^^^^
cause a scrolling mechanism to be provided for overflowing boxes.
</>

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

Els · Sep 11, 2003

John said:
John W. wrote:

Els <[email protected]>:

John W. wrote:

Geoff Smith <[email protected]>:

Click to expand...

[...]

... and Opera 7.11,

No scrollbar, vertical nor horizontal, sorry.

Click to expand...

Works with or without doctype, and with or without
<head><title>test</title></head>, and without the long word
(original source from OP) I still get a vertical scrollbar
in Opera 7.11

Click to expand...

My O 7.11 is automagically reloading maybe?

Sorry, I wasn't clear: only after resizing to a small enough
window to need a scrollbar.

You don't want a prt scr do you?

Nah ;-), only if you would insist on not getting any
scrollbar after making the window too small and without
reloading ;-)

Els · Sep 11, 2003

John said:
John W. wrote:

Els <[email protected]>:

John W. wrote:

Geoff Smith <[email protected]>:

Click to expand...

[...]

I did notice that, but I don't think there 'should' be a
horizontal scrollbar when there is no 'no wrap'-content?

Click to expand...

Sorry vergeten:
m.b.t.: *<div style="position: relative; overflow: auto;*
See: http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
<q>
auto
The behavior of the 'auto' value is user agent-dependent, but should
....................................^^^^^^^^^^^^^^^^^^^.......^^^^^^
cause a scrolling mechanism to be provided for overflowing boxes.
</>

stippeltjes i.p.v. spaties: slim ;-)

I would read it differently still though: "a scrolling
mechanism to be provided for overflowing boxes"

A div with content that is smaller than the box, is not an
"overflowing box". ;-)
If you are right in your interpretation, I would prefer W3C
to have written: "...to be provided for boxes with the
overflow property value set to 'auto'."
Of is dat nou muggeziften van mijn kant? ;-)

John W. · Sep 11, 2003

Els said:
John said:

John W. wrote:

Els <[email protected]>:

John W. wrote:

Geoff Smith <[email protected]>:

[...]

I did notice that, but I don't think there 'should' be a
horizontal scrollbar when there is no 'no wrap'-content?

Click to expand...

Sorry vergeten:
m.b.t.: *<div style="position: relative; overflow: auto;*
See: http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
<q>
auto
The behavior of the 'auto' value is user agent-dependent, but should
....................................^^^^^^^^^^^^^^^^^^^.......^^^^^^
cause a scrolling mechanism to be provided for overflowing boxes.
</>

Click to expand...

stippeltjes i.p.v. spaties: slim ;-)

Works fine w. fixed pitch font,
usually I read arial.

I would read it differently still though: "a scrolling
mechanism to be provided for overflowing boxes"

It says very carefully as usual:
*user agent-dependent* and * should* ...

A div with content that is smaller than the box, is not an
"overflowing box". ;-)

The source says * said:
If you are right in your interpretation, I would prefer W3C
to have written: "...to be provided for boxes with the
overflow property value set to 'auto'."

Prefer is wat anders dan hebben.

Of is dat nou muggeziften van mijn kant? ;-)

Er zijn op joesnet al oorlogen uitgevochten over terminologie

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

Els · Sep 12, 2003

John said:
Els:

It says very carefully as usual:
*user agent-dependent* and * should* ...

The source says *<div style="position: relative; overflow: auto;..>*

Yes, which means it is a potentially overflowing box. It
will be an overflowing box, as soon as the box gets smaller
than the content

Prefer is wat anders dan hebben.
Helaas!

Er zijn op joesnet al oorlogen uitgevochten over terminologie

Zover wou ik niet gaan (vandaag ;-))...

Maakt ook niet uit of ik dat anders interpreteer dan jij,
die browsers doen het toch zoals ze het doen, een
interpretatie verandert daar niets aan. (tenzij jij of ik
bij die browser company werkt als interpreteur van de specs
voor de nieuwe versie van de browser

)

John W. · Sep 12, 2003

Els said:
John W. wrote:

Maakt ook niet uit of ik dat anders interpreteer dan jij,
die browsers doen het toch zoals ze het doen, een

Voorzover ik het begrijp betekent *user agent-dependent* inderdaad dat
er browsers zijn die het anders doen (dan gewenst) en *should*
betekent dat het wenselijk is maar should is niet hetzelfde als *must*

interpretatie verandert daar niets aan. (tenzij jij of ik
bij die browser company werkt als interpreteur van de specs
voor de nieuwe versie van de browser )

Yep

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

Els · Sep 12, 2003

Els said:
P.S. Misschien is dat ook wel de oplossing voor de OP (ergens in een
grijs verleden was er een vraag gesteld ;-)), ben nu benieuwd hoe die
box reageert op 'overflow:scroll', ik ga zo eens even kijken.

Nee, dat werkt dus niet. Was ook niet de vraag van OP die ik
bedoelde, maar de reaktie van Opera met die lijn in het
midden na reloaden. Met overflow:scroll doet-ie het precies
andersom: bij resizen van het venster zie je die lijn, en na
reloaden komt de tekst terug... :-(

John W. · Sep 12, 2003

Els said:
Helemaal eens, maarreh... mijn van de jouwe verschillende
interpretatie kwam niet door het Engels hoor, het komt omdat
ik de zin erna anders interpreteer: die van een overflowing
box. Het is enkel en alleen de definitie van een overflowing
box die we verschillend interpreteren.

Jij vind dat een overflowing box bestaat zodra er
'overflow:auto' in de style staat, en ik vind dat

Nou nee, want zodra er <div> staat hebben we al te maken met een
(block)box.
Daarbij nog afgezien van de box(en) waar die div zowiezo al in staat
en van de boxen waar die box dan ook weer in staat.

Het is dacht ik in NL-speak als volgt:
*overflow:....* geeft aan wat er gebeuren moet indien de inhoud meer
plaats nodig heeft dan die, die met width (of height) voordien als
beschikbaar voor de containing blockbox is aangegeven.
Zie:
<http://www.w3.org/TR/2002/WD-CSS21-20020802/visufx.html#propdef-overflow>
waarbij scroll: altijd een scrollbar moet veroorzaken en voor auto,
daar komt het weer: ... is user agent-dependent, but should ...enz.

daarbovenop nog eens een 'te grote' content aanwezig moet zijn.

Indien de inhoud niet te groot is gebeurt er dus niets.

Anders zou 'overflow:scroll' hetzelfde zijn als
'overflow:auto'...

(toch?)

Zie hierboven

P.S. Misschien is dat ook wel de oplossing voor de OP
(ergens in een grijs verleden was er een vraag gesteld ;-)),
ben nu benieuwd hoe die box reageert op 'overflow:scroll',
ik ga zo eens even kijken.

De problemen die OP heeft komen principieel door het feit dat OP
meedere malen probeert <table height=""> en <td height=""> vast te
leggen en aangezien height niet valide is proberen alle browsers dus
maar naar beste kunnen er iets van (van de box en het gedrag) te
bakken.

De source is onzorgvuldig en niet netjes: tagsoup met het welbekende
resultaat.

John OO
--

<http://webcel.nl/>
<http://www.webcel.nl/bayshop/shop/bayshop.html>

"Time is what prevents everything from happening at once"
- John Archibald Wheeler -

Scrolling DIV in a table IE vs Mozilla	0	Sep 9, 2003
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Im having trouble containing a title an image and a button	2	Oct 26, 2022
action_page.php form	2	Oct 25, 2020
Help with Visual Lightbox: Scripts	2	May 3, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Help with code	0	Jun 12, 2022

Scrolling DIV in a table - IE vs Mozilla

Geoff Smith

Uni Wien

Els

Geoff Smith

John W.

Els

Els

John W.

John W.

Els

Els

John W.

John W.

Els

Els

John W.

Els

John W.

Els

John W.

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads