Div scrollbar overlapping lower part of table

Discussion in 'HTML' started by phl, Aug 9, 2007.

  1. phl

    phl Guest

    Hello

    I have div element and within it, I have a table. Basically I want to
    use the Div to restricit the table to a certain width, and if it goes
    over this width, the user is then presented with a scroll bar.
    Everything works fine, except in IE7, when the table renders over a
    certain amount of rows, and the Div displays the scroll bar. The last
    row of the Table is obscured by the scrollbar created by the div. It's
    almost like the div did not create extra height for the horizontal
    scroll bar it displaying. The same problem does not happen in Firefox.
    The below is the html, I am using:

    <div style="width: 100px;overflow-y: hidden;overflow-x:
    auto;position:relative;">
    <TABLE width="100%" align="center">
    <TR>
    ....
    ....
    </TR>
    </TABLE>
    </div>

    Can someone please explain whats going on and a possible work around?

    Cheers
    -P
    phl, Aug 9, 2007
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed phl <>
    writing in news::

    > Hello
    >
    > I have div element and within it, I have a table. Basically I want to
    > use the Div to restricit the table to a certain width, and if it goes
    > over this width, the user is then presented with a scroll bar.
    > Everything works fine, except in IE7, when the table renders over a
    > certain amount of rows, and the Div displays the scroll bar. The last
    > row of the Table is obscured by the scrollbar created by the div. It's
    > almost like the div did not create extra height for the horizontal
    > scroll bar it displaying. The same problem does not happen in Firefox.
    > The below is the html, I am using:
    >
    ><div style="width: 100px;overflow-y: hidden;overflow-x:
    > auto;position:relative;">
    ><TABLE width="100%" align="center">
    ><TR>
    > ...
    > ...
    ></TR>
    ></TABLE>
    ></div>
    >
    > Can someone please explain whats going on and a possible work around?
    >
    > Cheers
    > -P
    >
    >


    A URL would be really helpful. The markup shown may not be the cause of
    the problem and there is no way to know without a URL.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Aug 9, 2007
    #2
    1. Advertising

  3. phl

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Thu, 09 Aug 2007 00:53:33 GMT
    phl scribed:

    > Hello
    >
    > I have div element and within it, I have a table. Basically I want to
    > use the Div to restricit the table to a certain width, and if it goes
    > over this width, the user is then presented with a scroll bar.
    > Everything works fine, except in IE7, when the table renders over a
    > certain amount of rows, and the Div displays the scroll bar. The last
    > row of the Table is obscured by the scrollbar created by the div. It's
    > almost like the div did not create extra height for the horizontal
    > scroll bar it displaying. The same problem does not happen in Firefox.
    > The below is the html, I am using:
    >
    > <div style="width: 100px;overflow-y: hidden;overflow-x:
    > auto;position:relative;">
    > <TABLE width="100%" align="center">
    > <TR>
    > ...
    > ...
    > </TR>
    > </TABLE>
    > </div>
    >
    > Can someone please explain whats going on and a possible work around?


    Sounds like an ie bug, but as Adriuenne said...

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Aug 9, 2007
    #3
  4. phl

    phl Guest

    On Aug 8, 7:38 pm, Neredbojias <> wrote:
    > Well bust mah britches and call me cheeky, on Thu, 09 Aug 2007 00:53:33 GMT
    > phl scribed:
    >
    >
    >
    >
    >
    > > Hello

    >
    > > I have div element and within it, I have a table. Basically I want to
    > > use the Div to restricit the table to a certain width, and if it goes
    > > over this width, the user is then presented with a scroll bar.
    > > Everything works fine, except in IE7, when the table renders over a
    > > certain amount of rows, and the Div displays the scroll bar. The last
    > > row of the Table is obscured by the scrollbar created by the div. It's
    > > almost like the div did not create extra height for the horizontal
    > > scroll bar it displaying. The same problem does not happen in Firefox.
    > > The below is the html, I am using:

    >
    > > <div style="width: 100px;overflow-y: hidden;overflow-x:
    > > auto;position:relative;">
    > > <TABLE width="100%" align="center">
    > > <TR>
    > > ...
    > > ...
    > > </TR>
    > > </TABLE>
    > > </div>

    >
    > > Can someone please explain whats going on and a possible work around?

    >
    > Sounds like an ie bug, but as Adriuenne said...
    >
    > --
    > Neredbojias
    > Half lies are worth twice as much as whole lies.- Hide quoted text -
    >
    > - Show quoted text -



    OK, so here's the problem. the entire html is there:

    <html>
    <header></header>
    <body>

    <div style="width: 300px; height: 100px; overflow-x: scroll !
    important; overflow-y: hidden ! important">
    I am going forth with this tutorial even though it is second in the
    poll results. The reason is that creating a

    joomlafied template from an open source template is lot more
    complicated and it takes me two days to make one

    for my site with final touch so that it works fine in all common
    browsers and everyone knows the crap IE.

    http://www.joomlaprodigy.com/administrator/index2.php?option=com_content
    </div>


    </body></html>

    how do you get the div to make space so the horizontal scroll bar does
    not overlap the text in the bottom? I can just add space after the
    content but this shows as extra space in Firefox or opera.
    phl, Aug 9, 2007
    #4
  5. phl

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Thu, 09 Aug 2007 22:48:10
    GMT phl scribed:

    > how do you get the div to make space so the horizontal scroll bar does
    > not overlap the text in the bottom? I can just add space after the
    > content but this shows as extra space in Firefox or opera.


    That's simple. Use an ie conditional comment so that it only is read by
    ie7.

    <!--[if IE 7]>
    <div><br></div>
    <![endif]-->

    ....or whatever.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Aug 10, 2007
    #5
  6. phl

    phl Guest

    On Aug 9, 5:13 pm, Neredbojias <> wrote:
    > Well bust mah britches and call me cheeky, on Thu, 09 Aug 2007 22:48:10
    > GMT phl scribed:
    >
    > > how do you get the div to make space so the horizontal scroll bar does
    > > not overlap the text in the bottom? I can just add space after the
    > > content but this shows as extra space in Firefox or opera.

    >
    > That's simple. Use an ie conditional comment so that it only is read by
    > ie7.
    >
    > <!--[if IE 7]>
    > <div><br></div>
    > <![endif]-->
    >
    > ...or whatever.
    >
    > --
    > Neredbojias
    > Half lies are worth twice as much as whole lies.



    I have better description of problem here in code below. It shows the
    table inside the div. This table will be created dynamically, so it's
    not simple static content like the previous code. The only way I can
    get IE not to overlap table text is to set the overflow-x style of the
    div to scroll, but then this shows a greyed out scroll bar even when
    it not needed. I guess the question at this stage is, is there some
    way of geting IE to do this properly, without adding extra space, or
    figuring out whether the scroll bar will appear before table is
    generated, or do this from javascript after page has been renderd,
    this will be the least desirable option as it's slow.

    <html>
    <header></header>
    <body>


    <div style="width: 300px; overflow-x: auto ! important; overflow-y:
    hidden ! important">

    <table border=1 width=100%>
    <tr>
    <td>
    I am going forth with this tutorial even though it
    </td>
    <td>
    is second in the poll results. The reason is that
    </td>
    </tr>

    <tr>
    <td>
    creating a joomlafied template from an open source template
    </td>
    <td>
    is lot more complicated and it takes me two
    </td>
    </tr>


    <tr>
    <td>
    days to make one for my site with final touch
    </td>
    <td>
    so that it works fine in all common browsers
    </td>
    </tr>

    <tr>
    <td>
    and everyone knows the crap IE.
    </td>
    <td>
    http://www.joomlaprodigy.com/administrator/index2.php?option=com_content
    </td>
    </tr>




    </div>




    </body></html>
    phl, Aug 10, 2007
    #6
  7. phl

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Fri, 10 Aug 2007 00:37:20
    GMT phl scribed:

    >> > how do you get the div to make space so the horizontal scroll bar

    does
    >> > not overlap the text in the bottom? I can just add space after the
    >> > content but this shows as extra space in Firefox or opera.

    >>
    >> That's simple. Use an ie conditional comment so that it only is read

    by
    >> ie7.
    >>
    >> <!--[if IE 7]>
    >> <div><br></div>
    >> <![endif]-->
    >>
    >> ...or whatever.
    >>
    >> --
    >> Neredbojias
    >> Half lies are worth twice as much as whole lies.

    >
    >
    > I have better description of problem here in code below.


    No, you don't. That "code" tells me nothing. A url is required to see
    the real problem although your markup indicates inaccuracy and
    invalidity.

    > It shows the
    > table inside the div. This table will be created dynamically, so it's
    > not simple static content like the previous code. The only way I can
    > get IE not to overlap table text is to set the overflow-x style of the
    > div to scroll, but then this shows a greyed out scroll bar even when
    > it not needed. I guess the question at this stage is, is there some
    > way of geting IE to do this properly, without adding extra space, or
    > figuring out whether the scroll bar will appear before table is
    > generated, or do this from javascript after page has been renderd,
    > this will be the least desirable option as it's slow.
    >
    > <html>
    > <header></header>
    > <body>
    >
    >
    > <div style="width: 300px; overflow-x: auto ! important; overflow-y:
    > hidden ! important">
    >
    > <table border=1 width=100%>
    > <tr>
    > <td>
    > I am going forth with this tutorial even though it
    > </td>
    > <td>
    > is second in the poll results. The reason is that
    > </td>
    > </tr>
    >
    > <tr>
    > <td>
    > creating a joomlafied template from an open source template
    > </td>
    > <td>
    > is lot more complicated and it takes me two
    > </td>
    > </tr>
    >
    >
    > <tr>
    > <td>
    > days to make one for my site with final touch
    > </td>
    > <td>
    > so that it works fine in all common browsers
    > </td>
    > </tr>
    >
    > <tr>
    > <td>
    > and everyone knows the crap IE.
    > </td>
    > <td>
    > http://www.joomlaprodigy.com/administrator/index2.php?

    option=com_content
    > </td>
    > </tr>
    >
    >
    >
    >
    > </div>
    >
    >
    >
    >
    > </body></html>
    >
    >




    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Aug 10, 2007
    #7
  8. phl

    dorayme Guest

    In article
    <Xns9987E50709F61nanopandaneredbojias@198.186.190.161>,
    Neredbojias <> wrote:

    > > I have better description of problem here in code below.

    >
    > No, you don't. That "code" tells me nothing. A url is required to see
    > the real problem although your markup indicates inaccuracy and
    > invalidity.


    But so important is the quoted code that you quote it all over
    again. Does the idea of editing a post not mean anything to you
    unless your emotions are engaged?

    --
    dorayme
    dorayme, Aug 10, 2007
    #8
  9. phl

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Fri, 10 Aug 2007 05:56:18 GMT
    dorayme scribed:

    >> > I have better description of problem here in code below.

    >>
    >> No, you don't. That "code" tells me nothing. A url is required to see
    >> the real problem although your markup indicates inaccuracy and
    >> invalidity.

    >
    > But so important is the quoted code that you quote it all over
    > again. Does the idea of editing a post not mean anything to you
    > unless your emotions are engaged?


    I quoted it only because I referred to it. You should try being less
    critical, like me.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Aug 10, 2007
    #9
  10. phl

    dorayme Guest

    In article
    <Xns9987F385C1CFDnanopandaneredbojias@198.186.190.161>,
    Neredbojias <> wrote:

    > Well bust mah britches and call me cheeky, on Fri, 10 Aug 2007 05:56:18 GMT
    > dorayme scribed:
    >
    > >> > I have better description of problem here in code below.
    > >>
    > >> No, you don't. That "code" tells me nothing. A url is required to see
    > >> the real problem although your markup indicates inaccuracy and
    > >> invalidity.

    > >
    > > But so important is the quoted code that you quote it all over
    > > again. Does the idea of editing a post not mean anything to you
    > > unless your emotions are engaged?

    >
    > I quoted it only because I referred to it.


    If this is the criteria, then God help us all. You wrote to
    dismiss all interest in it, not to refer to it for some useful
    purpose evident in what you had to say. Getting this point or
    shaping up to resist with your usual schmuckery...

    --
    dorayme
    dorayme, Aug 10, 2007
    #10
  11. phl

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Fri, 10 Aug 2007 07:44:50
    GMT dorayme scribed:

    >> >> > I have better description of problem here in code below.
    >> >>
    >> >> No, you don't. That "code" tells me nothing. A url is required
    >> >> to see the real problem although your markup indicates inaccuracy
    >> >> and invalidity.
    >> >
    >> > But so important is the quoted code that you quote it all over
    >> > again. Does the idea of editing a post not mean anything to you
    >> > unless your emotions are engaged?

    >>
    >> I quoted it only because I referred to it.

    >
    > If this is the criteria, then God help us all. You wrote to
    > dismiss all interest in it, not to refer to it for some useful
    > purpose evident in what you had to say. Getting this point or
    > shaping up to resist with your usual schmuckery...


    Well, I can see your opinionated side of things, but I simply followed the
    rules. If you refer to something, you should quote it. What's the big
    deal, anyway? If a few extra lines of text can upset your world, how
    tentative that world must be.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Aug 10, 2007
    #11
  12. phl

    dorayme Guest

    In article
    <Xns9988C1F3F843nanopandaneredbojias@198.186.190.161>,
    Neredbojias <> wrote:

    > Well bust mah britches and call me cheeky, on Fri, 10 Aug 2007 07:44:50
    > GMT dorayme scribed:
    >
    > >> >> > I have better description of problem here in code below.
    > >> >>
    > >> >> No, you don't. That "code" tells me nothing. A url is required
    > >> >> to see the real problem although your markup indicates inaccuracy
    > >> >> and invalidity.
    > >> >
    > >> > But so important is the quoted code that you quote it all over
    > >> > again. Does the idea of editing a post not mean anything to you
    > >> > unless your emotions are engaged?
    > >>
    > >> I quoted it only because I referred to it.

    > >
    > > If this is the criteria, then God help us all. You wrote to
    > > dismiss all interest in it, not to refer to it for some useful
    > > purpose evident in what you had to say. Getting this point or
    > > shaping up to resist with your usual schmuckery...

    >
    > Well, I can see your opinionated side of things, but I simply followed the
    > rules. If you refer to something, you should quote it. What's the big
    > deal, anyway? If a few extra lines of text can upset your world, how
    > tentative that world must be.


    I told you ages ago the story about Travis' candidate for
    President of a country that produced the Jazz musical form, 12
    Angry Men, and some of the most interesting things on God's
    earth, America! Yup, George Bush!

    Now there is a schmuck, surely! And the story was about Peter
    Singer's analysis of his arrested moral development. He had to
    make a speech that was to be broadcast the following Saturday. In
    the middle of the speech, he kept stopping and objecting at the
    line that read "... and today I ..." because he thought this was
    somehow lying! It was not Saturday already!

    Jesus Christ!

    You see, Boji, he learnt his moral rules like a parrot and had no
    real understanding of them, what was important about them. He
    never grew up properly. He drank too much and that is perhaps
    what hindered his progress? I suspect, in his case, his
    Christianity was an effect of a basic deep down problem rather
    than the cause of it. Some Christians are quite sophisticated and
    it takes skill to see through the best of them.

    Since you are being not directly offensive to me, I will just
    give you some advice. Examine the rules you follow and see what
    is important about them, pick out the relevant bits and adapt to
    situations. Try not to be a George.

    --
    dorayme
    dorayme, Aug 10, 2007
    #12
  13. phl

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Fri, 10 Aug 2007 08:43:35
    GMT dorayme scribed:

    >> >> >> > I have better description of problem here in code below.
    >> >> >>
    >> >> >> No, you don't. That "code" tells me nothing. A url is
    >> >> >> required to see the real problem although your markup indicates
    >> >> >> inaccuracy and invalidity.
    >> >> >
    >> >> > But so important is the quoted code that you quote it all over
    >> >> > again. Does the idea of editing a post not mean anything to you
    >> >> > unless your emotions are engaged?
    >> >>
    >> >> I quoted it only because I referred to it.
    >> >
    >> > If this is the criteria, then God help us all. You wrote to
    >> > dismiss all interest in it, not to refer to it for some useful
    >> > purpose evident in what you had to say. Getting this point or
    >> > shaping up to resist with your usual schmuckery...

    >>
    >> Well, I can see your opinionated side of things, but I simply
    >> followed the rules. If you refer to something, you should quote it.
    >> What's the big deal, anyway? If a few extra lines of text can upset
    >> your world, how tentative that world must be.

    >
    > I told you ages ago the story about Travis' candidate for
    > President of a country that produced the Jazz musical form, 12
    > Angry Men, and some of the most interesting things on God's
    > earth, America! Yup, George Bush!
    >
    > Now there is a schmuck, surely! And the story was about Peter
    > Singer's analysis of his arrested moral development. He had to
    > make a speech that was to be broadcast the following Saturday. In
    > the middle of the speech, he kept stopping and objecting at the
    > line that read "... and today I ..." because he thought this was
    > somehow lying! It was not Saturday already!
    >
    > Jesus Christ!
    >
    > You see, Boji, he learnt his moral rules like a parrot and had no
    > real understanding of them, what was important about them. He
    > never grew up properly. He drank too much and that is perhaps
    > what hindered his progress? I suspect, in his case, his
    > Christianity was an effect of a basic deep down problem rather
    > than the cause of it. Some Christians are quite sophisticated and
    > it takes skill to see through the best of them.
    >
    > Since you are being not directly offensive to me, I will just
    > give you some advice. Examine the rules you follow and see what
    > is important about them, pick out the relevant bits and adapt to
    > situations. Try not to be a George.


    Um, okay, I guess. I don't like GB, either, but I don't know if I can
    attribute his failings to what you said. I think he's just conceited, a
    bit of a power-monger, and even less altruistic than a "normal" person
    with an inflated ego might be. It's like "Hooray for George, and what
    peons...?" Public Service often is shucked at the top, and I think
    Georgy boy is more interested in service to his family and peers than to
    the overall citizenry of this country. What gets me, though, is I sat
    there and watched much of his second election returns, and a majority of
    the morons here did, indeed, vote for him. So much for the intelligence
    of the American people...

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Aug 10, 2007
    #13
  14. phl

    phl Guest

    On Aug 9, 10:30 pm, Neredbojias <> wrote:
    > Well bust mah britches and call me cheeky, on Fri, 10 Aug 2007 00:37:20
    > GMT phl scribed:
    >
    >
    >
    >
    >
    >
    >
    > >> > how do you get the div to make space so the horizontal scroll bar

    > does
    > >> > not overlap the text in the bottom? I can just add space after the
    > >> > content but this shows as extra space in Firefox or opera.

    >
    > >> That's simple. Use an ie conditional comment so that it only is read

    > by
    > >> ie7.

    >
    > >> <!--[if IE 7]>
    > >> <div><br></div>
    > >> <![endif]-->

    >
    > >> ...or whatever.

    >
    > >> --
    > >> Neredbojias
    > >> Half lies are worth twice as much as whole lies.

    >
    > > I have better description of problem here in code below.

    >
    > No, you don't. That "code" tells me nothing. A url is required to see
    > the real problem although your markup indicates inaccuracy and
    > invalidity.
    >
    >
    >
    >
    >
    >
    >
    > > It shows the
    > > table inside the div. This table will be created dynamically, so it's
    > > not simple static content like the previous code. The only way I can
    > > get IE not to overlap table text is to set the overflow-x style of the
    > > div to scroll, but then this shows a greyed out scroll bar even when
    > > it not needed. I guess the question at this stage is, is there some
    > > way of geting IE to do this properly, without adding extra space, or
    > > figuring out whether the scroll bar will appear before table is
    > > generated, or do this from javascript after page has been renderd,
    > > this will be the least desirable option as it's slow.

    >
    > > <html>
    > > <header></header>
    > > <body>

    >
    > > <div style="width: 300px; overflow-x: auto ! important; overflow-y:
    > > hidden ! important">

    >
    > > <table border=1 width=100%>
    > > <tr>
    > > <td>
    > > I am going forth with this tutorial even though it
    > > </td>
    > > <td>
    > > is second in the poll results. The reason is that
    > > </td>
    > > </tr>

    >
    > > <tr>
    > > <td>
    > > creating a joomlafied template from an open source template
    > > </td>
    > > <td>
    > > is lot more complicated and it takes me two
    > > </td>
    > > </tr>

    >
    > > <tr>
    > > <td>
    > > days to make one for my site with final touch
    > > </td>
    > > <td>
    > > so that it works fine in all common browsers
    > > </td>
    > > </tr>

    >
    > > <tr>
    > > <td>
    > > and everyone knows the crap IE.
    > > </td>
    > > <td>
    > >http://www.joomlaprodigy.com/administrator/index2.php?

    > option=com_content
    > > </td>
    > > </tr>

    >
    > > </div>

    >
    > > </body></html>

    >
    > --
    > Neredbojias
    > Half lies are worth twice as much as whole lies.- Hide quoted text -
    >
    > - Show quoted text -- Hide quoted text -
    >
    > - Show quoted text -


    What a waste of time.
    phl, Aug 10, 2007
    #14
  15. phl

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Fri, 10 Aug 2007 17:30:27 GMT
    phl scribed:

    >> >> > how do you get the div to make space so the horizontal scroll bar

    >> does
    >> >> > not overlap the text in the bottom? I can just add space after the
    >> >> > content but this shows as extra space in Firefox or opera.

    >>
    >> >> That's simple. Use an ie conditional comment so that it only is read

    >> by
    >> >> ie7.

    >>
    >> >> <!--[if IE 7]>
    >> >> <div><br></div>
    >> >> <![endif]-->

    >>
    >> >> ...or whatever.

    >>
    >> >> --
    >> >> Neredbojias
    >> >> Half lies are worth twice as much as whole lies.

    >>
    >> > I have better description of problem here in code below.

    >>
    >> No, you don't. That "code" tells me nothing. A url is required to see
    >> the real problem although your markup indicates inaccuracy and
    >> invalidity.

    >
    > What a waste of time.


    Precisely. That's why those who do not offer a url demonstrating their
    problem are usually ignored, as should obviously have been the case here.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Aug 11, 2007
    #15
    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. Edwin Knoppert
    Replies:
    0
    Views:
    405
    Edwin Knoppert
    Jan 24, 2006
  2. Luigi Donatello Asero

    DIV overlapping

    Luigi Donatello Asero, Dec 8, 2005, in forum: HTML
    Replies:
    162
    Views:
    15,364
    Stan McCann
    Dec 20, 2005
  3. Luigi Donatello Asero

    Re: DIV overlapping

    Luigi Donatello Asero, Dec 12, 2005, in forum: HTML
    Replies:
    0
    Views:
    426
    Luigi Donatello Asero
    Dec 12, 2005
  4. jc
    Replies:
    10
    Views:
    3,625
    Kevin Scholl
    Jun 30, 2009
  5. Alex

    ScrollBar? Does it exist just WEB ScrollBar Control?

    Alex, Apr 1, 2004, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    257
    Alvin Bruney [MVP]
    Apr 4, 2004
Loading...

Share This Page