«

i have a div tag on my html page as follows:

<div style="overflow-x:scroll;"> (or auto, makes no difference)

the contents of the div are about 1500 pixels wide.

in firefox, the div will get a horizontal scroller, fitting it nicely
within firefox's browser window

in IE, however, no scroller will appear. the content will reach its
full 1500 pixels and the browser's scroll bar will appear.

the firefox behavior is desired, i want the div to have a scroll not
the browser window to grow to accomodate the whole div.

if i set the width to a defined number of pixels, however, IE will
provide a scroller. but i don't want to do this, since obviously the
code is generated on the server and i have no idea with width of the
user's browser window.

btw, the "incorrect" behavior is showing itself in IE 7. using firefox
2.0.

any workaround?

> pbx <> wrote:
> news: om
> i have a div tag on my html page as follows:
>
> <div style="overflow-x:scroll;"> (or auto, makes no difference)
>
> the contents of the div are about 1500 pixels wide.
>
> in firefox, the div will get a horizontal scroller, fitting it nicely
> within firefox's browser window
>
> in IE, however, no scroller will appear. the content will reach its
> full 1500 pixels and the browser's scroll bar will appear.
>
> the firefox behavior is desired, i want the div to have a scroll not
> the browser window to grow to accomodate the whole div.
>
> if i set the width to a defined number of pixels, however, IE will
> provide a scroller. but i don't want to do this, since obviously the
> code is generated on the server and i have no idea with width of the
> user's browser window.
>
> btw, the "incorrect" behavior is showing itself in IE 7. using
> firefox
> 2.0.
>
> any workaround?

style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"

--
BootNic Saturday, January 06, 2007 2:09 PM

Assert your right to make a few mistakes. If people can't accept your
imperfections, that's their fault.
*Dr. David M. Burns*

tried:

style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"

unfortunately it doesn't change anything obvious.

does it matter than the contents of the div is a table?


BootNic wrote:
> > pbx <> wrote:
> > news: om
> > i have a div tag on my html page as follows:
> >
> > <div style="overflow-x:scroll;"> (or auto, makes no difference)
> >
> > the contents of the div are about 1500 pixels wide.
> >
> > in firefox, the div will get a horizontal scroller, fitting it nicely
> > within firefox's browser window
> >
> > in IE, however, no scroller will appear. the content will reach its
> > full 1500 pixels and the browser's scroll bar will appear.
> >
> > the firefox behavior is desired, i want the div to have a scroll not
> > the browser window to grow to accomodate the whole div.
> >
> > if i set the width to a defined number of pixels, however, IE will
> > provide a scroller. but i don't want to do this, since obviously the
> > code is generated on the server and i have no idea with width of the
> > user's browser window.
> >
> > btw, the "incorrect" behavior is showing itself in IE 7. using
> > firefox
> > 2.0.
> >
> > any workaround?
>
> style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
>
> --
> BootNic Saturday, January 06, 2007 2:09 PM
>
> Assert your right to make a few mistakes. If people can't accept your
> imperfections, that's their fault.
> *Dr. David M. Burns*

> pbx <> wrote:
> news: m
>> BootNic wrote:
>>> pbx <> wrote:
>>> news: om
>>> i have a div tag on my html page as follows:
>>>
>>> <div style="overflow-x:scroll;"> (or auto, makes no difference)
>>>
>>> the contents of the div are about 1500 pixels wide.
>>>
[snip]
>>>
>>> any workaround?
>>
>> style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
> tried:
>
> style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
>
> unfortunately it doesn't change anything obvious.
>
> does it matter than the contents of the div is a table?

Folks around these parts get a might testy when you top post. Most
of them are bottom feeders

It would be in your best interest to make an example and provide a
URL. It's not likely I can guess the content that may be causing the issue
you describe.

--
BootNic Saturday, January 06, 2007 3:06 PM

Humor is just another defense against the universe.
*Mel Brooks*

BootNic wrote:
> > pbx <> wrote:
> > news: m
> >> BootNic wrote:
> >>> pbx <> wrote:
> >>> news: om
> >>> i have a div tag on my html page as follows:
> >>>
> >>> <div style="overflow-x:scroll;"> (or auto, makes no difference)
> >>>
> >>> the contents of the div are about 1500 pixels wide.
> >>>
> [snip]
> >>>
> >>> any workaround?
> >>
> >> style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
> > tried:
> >
> > style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
> >
> > unfortunately it doesn't change anything obvious.
> >
> > does it matter than the contents of the div is a table?
>
> Folks around these parts get a might testy when you top post. Most
> of them are bottom feeders
>
> It would be in your best interest to make an example and provide a
> URL. It's not likely I can guess the content that may be causing the issue
> you describe.
>
> --
> BootNic Saturday, January 06, 2007 3:06 PM
>
> Humor is just another defense against the universe.
> *Mel Brooks*

i will try to provide an example on some public server... in the mean
time, here is what i found:

on a simple page if i put the <div> by itself with the style you
recommended it works fine.

if i enclose it in a table, like:

<table>
<tr>
<td>
<div
style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;">

.... div content
</div>
</td>
</tr>
</table>

it stops working in IE (meaning the scroll bar disappears and the
content just runs off to the right, forcing the browser window's
scroller), and works are i wish in firefox 2.0.

BootNic wrote:
> > pbx <> wrote:
> > news: m
> >> BootNic wrote:
> >>> pbx <> wrote:
> >>> news: om
> >>> i have a div tag on my html page as follows:
> >>>
> >>> <div style="overflow-x:scroll;"> (or auto, makes no difference)
> >>>
> >>> the contents of the div are about 1500 pixels wide.
> >>>
> [snip]
> >>>
> >>> any workaround?
> >>
> >> style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
> > tried:
> >
> > style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
> >
> > unfortunately it doesn't change anything obvious.
> >
> > does it matter than the contents of the div is a table?
>
> Folks around these parts get a might testy when you top post. Most
> of them are bottom feeders
>
> It would be in your best interest to make an example and provide a
> URL. It's not likely I can guess the content that may be causing the issue
> you describe.
>
> --
> BootNic Saturday, January 06, 2007 3:06 PM
>
> Humor is just another defense against the universe.
> *Mel Brooks*

(sorry for that top post, i don't do this often. i fear i am about to
make mistake #2 by putting my sample code here vs. a remote server...)

ok, here is some simple HTML that demonstates the problem. copy and
paste into a text file and then open with IE 7 and then Firefox.

the first div, byitself, scrolls as desired.

the second div, enclosed in a simple table, doesn't scroll.

the div contents and style attributes are identical, the second one is
simply enclosed in a table.


<div
style="background-color:WhiteSmoke;width:100%;overflow:scroll;overfl ow-y:visible;overflow-x:scroll;">
<table>
<tr>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
</tr>
</table>
</div>



<br><br>


<table>
<tr>
<td>

<div
style="background-color:WhiteSmoke;width:100%;overflow:scroll;overfl ow-y:visible;overflow-x:scroll;">
<table>
<tr>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
<td>
<img
src="http://images.apple.com/ipod/images/capbottomitunescomp20060912.png ">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

pbx wrote:
> BootNic wrote:
>>> pbx <> wrote:
>>> news: m
>>>> BootNic wrote:
>>>>> pbx <> wrote:
>>>>> i have a div tag on my html page as follows:
>>>>> <div style="overflow-x:scroll;"> (or auto, makes no difference)
>>>>> the contents of the div are about 1500 pixels wide.
>> [snip]
>>>>> any workaround?
>>>>
style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
>>>
style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
>>> unfortunately it doesn't change anything obvious.
>>> does it matter than the contents of the div is a table?
>>
>> It would be in your best interest to make an example and provide a
>> URL. It's not likely I can guess the content that may be causing the
>> issue
>> you describe.
>
> (sorry for that top post, i don't do this often. i fear i am about to
> make mistake #2 by putting my sample code here vs. a remote server...)

Indeed, I will not test the code manually

> ok, here is some simple HTML that demonstates the problem. copy and
> paste into a text file and then open with IE 7 and then Firefox.
>
> the first div, byitself, scrolls as desired.
>
> the second div, enclosed in a simple table, doesn't scroll.
>
> the div contents and style attributes are identical, the second one is
> simply enclosed in a table.

A relative width (%) only works if the parent element has a known width (so
either set in px/em/% etc.). Nesting the div will result in in the
width="100%" being useless, as the width of the td is not set. Why even use
the div anyway? If you've decided to use a table-cell for markup you might
as well set the properties directly on the td itself.

In short: overflow only works when there are known dimensions, and a
percentage of an unkown width is equally unknown.
--
Rik Wasmus

Rik wrote:
> pbx wrote:
> > BootNic wrote:
> >>> pbx <> wrote:
> >>> news: m
> >>>> BootNic wrote:
> >>>>> pbx <> wrote:
> >>>>> i have a div tag on my html page as follows:
> >>>>> <div style="overflow-x:scroll;"> (or auto, makes no difference)
> >>>>> the contents of the div are about 1500 pixels wide.
> >> [snip]
> >>>>> any workaround?
> >>>>
> style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
> >>>
> style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
> >>> unfortunately it doesn't change anything obvious.
> >>> does it matter than the contents of the div is a table?
> >>
> >> It would be in your best interest to make an example and provide a
> >> URL. It's not likely I can guess the content that may be causing the
> >> issue
> >> you describe.
> >
> > (sorry for that top post, i don't do this often. i fear i am about to
> > make mistake #2 by putting my sample code here vs. a remote server...)
>
> Indeed, I will not test the code manually
>
> > ok, here is some simple HTML that demonstates the problem. copy and
> > paste into a text file and then open with IE 7 and then Firefox.
> >
> > the first div, byitself, scrolls as desired.
> >
> > the second div, enclosed in a simple table, doesn't scroll.
> >
> > the div contents and style attributes are identical, the second one is
> > simply enclosed in a table.
>
> A relative width (%) only works if the parent element has a known width (so
> either set in px/em/% etc.). Nesting the div will result in in the
> width="100%" being useless, as the width of the td is not set. Why even use
> the div anyway? If you've decided to use a table-cell for markup you might
> as well set the properties directly on the td itself.
>
> In short: overflow only works when there are known dimensions, and a
> percentage of an unkown width is equally unknown.
> --
> Rik Wasmus

ok, true if i set a px width on the parent element, i get a horizontal
scroller. i can understand the logic of not having a known width,
however, i sure like what firefox does when i don't want to set a
width. setting a px width is not what i want to do, because i have no
idea what to set it to... (if i set it too short and the user's window
is nice and wide, it looks stupid; on the other hand, if i set it too
wide and the user's window isn't so wide, the user's browser gets an
unintended scroller.)

my content doesn't need to be inside a div, but i wasn't aware that i
could set the overflow attribute on the td. i tried it and it didn't
work.

> pbx <> wrote:
> news: om
>>>
>>> style="width:100%;overflow:scroll;overflow-y:visible;overflow-x:scroll;"
>>>
>>> unfortunately it doesn't change anything obvious.
>>>
>>> does it matter than the contents of the div is a table?
[snip]
> ok, here is some simple HTML that demonstates the problem. copy and
> paste into a text file and then open with IE 7 and then Firefox.
>
> the first div, byitself, scrolls as desired.
>
> the second div, enclosed in a simple table, doesn't scroll.
>
> the div contents and style attributes are identical, the second one is
> simply enclosed in a table.
>
> <div
> style="background-color:WhiteSmoke;width:100%;overflow:scroll;overfl ow-y:visible;overflow-x:scroll;">
> <table>
[snip]
> </table>
> </div>
>
> <br><br>
>
> <table>

NO...embedded tables...pure evil I tell ya.

At any rate you could add style="table-layout:fixed;"

> <tr>
> <td>
>
> <div
> style="background-color:WhiteSmoke;width:100%;overflow:scroll;overfl ow-y:visible;overflow-x:scroll;">
> <table>
[snip]
> </table>

An alternative layout could be just images within the div, and add
white-space:nowrap; to the rest of the inline style.

--
BootNic Saturday, January 06, 2007 6:59 PM

I try to take one day at a time, but sometimes several days attack me
at once.
*Jennifer Unlimited*