div no scroller in IE but fine in firefox

P

pbx

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?
 
B

BootNic

pbx said:
news: (e-mail address removed)
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*
 
P

pbx

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?
 
B

BootNic

pbx said:
BootNic said:
news: (e-mail address removed)
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.
 
P

pbx

BootNic said:
pbx said:
BootNic wrote:
news: (e-mail address removed)
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.
 
P

pbx

BootNic said:
pbx said:
BootNic wrote:
news: (e-mail address removed)
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;overflow-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;overflow-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>
 
R

Rik

pbx said:
BootNic said:
news: (e-mail address removed)
BootNic 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 :p
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.
 
P

pbx

Rik said:
pbx said:
BootNic said:
news: (e-mail address removed)
BootNic 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 :p
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.

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.
 
B

BootNic

pbx said:
[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;overflow-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;overflow-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*
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top