div no scroller in IE but fine in firefox

Discussion in 'HTML' started by pbx, Jan 6, 2007.

  1. pbx

    pbx Guest

    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, Jan 6, 2007
    #1
    1. Advertising

  2. pbx

    BootNic Guest

    > pbx <> wrote:
    > news:
    > 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*
     
    BootNic, Jan 6, 2007
    #2
    1. Advertising

  3. pbx

    pbx Guest

    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:
    > > 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, Jan 6, 2007
    #3
  4. pbx

    BootNic Guest

    > pbx <> wrote:
    > news:
    >> BootNic wrote:
    >>> pbx <> wrote:
    >>> news:
    >>> 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, Jan 6, 2007
    #4
  5. pbx

    pbx Guest

    BootNic wrote:
    > > pbx <> wrote:
    > > news:
    > >> BootNic wrote:
    > >>> pbx <> wrote:
    > >>> news:
    > >>> 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.
     
    pbx, Jan 6, 2007
    #5
  6. pbx

    pbx Guest

    BootNic wrote:
    > > pbx <> wrote:
    > > news:
    > >> BootNic wrote:
    > >>> pbx <> wrote:
    > >>> news:
    > >>> 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>
     
    pbx, Jan 6, 2007
    #6
  7. pbx

    Rik Guest

    pbx wrote:
    > BootNic wrote:
    >>> pbx <> wrote:
    >>> news:
    >>>> 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 :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.
    --
    Rik Wasmus
     
    Rik, Jan 6, 2007
    #7
  8. pbx

    pbx Guest

    Rik wrote:
    > pbx wrote:
    > > BootNic wrote:
    > >>> pbx <> wrote:
    > >>> news:
    > >>>> 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 :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.
    > --
    > 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, Jan 6, 2007
    #8
  9. pbx

    BootNic Guest

    > pbx <> wrote:
    > news:
    >>>
    >>> 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;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*
     
    BootNic, Jan 6, 2007
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    0
    Views:
    591
  2. Replies:
    2
    Views:
    1,424
    Adrienne Boswell
    Jan 10, 2007
  3. Mickey
    Replies:
    1
    Views:
    102
    Stephen Chalmers
    Jul 31, 2005
  4. Avi
    Replies:
    1
    Views:
    124
    Martin Honnen
    Oct 24, 2005
  5. gezerpunta
    Replies:
    1
    Views:
    98
    -Lost
    May 4, 2007
Loading...

Share This Page