Scrolling div in firefox?

Discussion in 'HTML' started by HDI, Dec 4, 2006.

  1. HDI

    HDI Guest

    Hi,

    How do i get a scrolling div in firefox, works in IE but what should I
    do to make it work in firefox?

    <table>
    <tr>
    <td><div style="width=300px; height=100px; overflow=auto;">

    <a href="#a">a</a><br>
    <a href="#aa">a</a><br>
    <a href="#aaa">a</a><br>
    <a href="#aaaa">a</a><br>
    <a href="#aaaaa">a</a><br>
    <a href="#b">a</a><br>
    <a href="#c">a</a><br>
    <a href="#d">a</a><br>
    <a href="#e">a</a><br>
    <a href="#f">a</a><br>
    <a href="#g">a</a><br>
    <a href="#h">a</a><br>
    <a href="#i">a</a><br>
    <a href="#j">a</a><br>
    <a href="#k">a</a><br>
    <a href="#l">a</a><br>
    <a href="#m">a</a><br>
    <a href="#n">a</a><br>
    <a href="#o">a</a><br>
    <a href="#p">a</a><br>
    <a href="#q">a</a><br>
    <a href="#r">a</a><br>

    </div></td></tr></table>


    Thx
    HDI, Dec 4, 2006
    #1
    1. Advertising

  2. HDI wrote:
    > Hi,
    >
    > How do i get a scrolling div in firefox, works in IE but what should I
    > do to make it work in firefox?
    >
    > <table>
    > <tr>
    > <td><div style="width=300px; height=100px; overflow=auto;">

    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    Try CSS syntax!

    style="width: 300px; height: 100px; overflow: auto;"

    Also why all the TABLE rubbish? Looks like a links list to me.

    <ul style="width: 300px; height: 100px; overflow: auto; list-style: none;">
    <li><a href="#a">a</a></li>
    <li><a href="#aa">a</a></li>
    <li><a href="#aaa">a</a></li>
    <li><a href="#aaaa">a</a></li>
    <li><a href="#aaaaa">a</a></li>
    <li><a href="#b">a</a></li>
    <li><a href="#c">a</a></li>
    <li><a href="#d">a</a></li>
    <li><a href="#e">a</a></li>
    <li><a href="#f">a</a></li>
    <li><a href="#g">a</a></li>
    <li><a href="#h">a</a></li>
    <li><a href="#i">a</a></li>
    <li><a href="#j">a</a></li>
    <li><a href="#k">a</a></li>
    <li><a href="#l">a</a></li>
    <li><a href="#m">a</a></li>
    <li><a href="#n">a</a></li>
    <li><a href="#o">a</a></li>
    <li><a href="#p">a</a></li>
    <li><a href="#q">a</a></li>
    <li><a href="#r">a</a></li>
    </ul>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 4, 2006
    #2
    1. Advertising

  3. HDI

    Neredbojias Guest

    To further the education of mankind, "HDI" <> vouchsafed:

    > Hi,
    >
    > How do i get a scrolling div in firefox, works in IE but what should I
    > do to make it work in firefox?
    >
    > <table>
    > <tr>
    > <td><div style="width=300px; height=100px; overflow=auto;">


    This:

    <div style="width=300px; height=100px; overflow=auto;">

    wrong semantics.

    Should be:

    <div style="width:300px; height:100px; overflow:auto;">

    ....and is preferably placed in a head css section or stylesheet.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Dec 4, 2006
    #3
  4. HDI

    HDI Guest

    Neredbojias schreef:

    > To further the education of mankind, "HDI" <> vouchsafed:
    >
    > > Hi,
    > >
    > > How do i get a scrolling div in firefox, works in IE but what should I
    > > do to make it work in firefox?
    > >
    > > <table>
    > > <tr>
    > > <td><div style="width=300px; height=100px; overflow=auto;">

    >
    > This:
    >
    > <div style="width=300px; height=100px; overflow=auto;">
    >
    > wrong semantics.
    >
    > Should be:
    >
    > <div style="width:300px; height:100px; overflow:auto;">
    >
    > ...and is preferably placed in a head css section or stylesheet.
    >
    > --
    > Neredbojias
    > Infinity has its limits.



    CSS ok but this is only a test.

    What about this:

    Start at 200 an use only the rest of the sreen.

    <table height="100%" width="100%">
    <tr height="150px"><td></td></tr>
    <tr height="50px"><td></td></tr>
    <tr><td>
    <div style="overflow:auto;height:100%;width:100%;">

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    </div>
    </td></tr>
    </table>
    HDI, Dec 5, 2006
    #4
  5. HDI

    HDI Guest

    Neredbojias schreef:

    > To further the education of mankind, "HDI" <> vouchsafed:
    >
    > > Hi,
    > >
    > > How do i get a scrolling div in firefox, works in IE but what should I
    > > do to make it work in firefox?
    > >
    > > <table>
    > > <tr>
    > > <td><div style="width=300px; height=100px; overflow=auto;">

    >
    > This:
    >
    > <div style="width=300px; height=100px; overflow=auto;">
    >
    > wrong semantics.
    >
    > Should be:
    >
    > <div style="width:300px; height:100px; overflow:auto;">
    >
    > ...and is preferably placed in a head css section or stylesheet.
    >
    > --
    > Neredbojias
    > Infinity has its limits.



    CSS ok but this is only a test.

    What about this:

    Start at 200 an use only the rest of the sreen.

    <table height="100%" width="100%">
    <tr height="150px"><td></td></tr>
    <tr height="50px"><td></td></tr>
    <tr><td>
    <div style="overflow:auto;height:100%;width:100%;">

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    </div>
    </td></tr>
    </table>
    HDI, Dec 5, 2006
    #5
  6. HDI wrote:
    > Neredbojias schreef:
    >
    >> To further the education of mankind, "HDI" <> vouchsafed:
    >>
    >>> Hi,
    >>>
    >>> How do i get a scrolling div in firefox, works in IE but what should I
    >>> do to make it work in firefox?
    >>>
    >>> <table>
    >>> <tr>
    >>> <td><div style="width=300px; height=100px; overflow=auto;">

    >> This:
    >>
    >> <div style="width=300px; height=100px; overflow=auto;">
    >>
    >> wrong semantics.
    >>
    >> Should be:
    >>
    >> <div style="width:300px; height:100px; overflow:auto;">
    >>
    >> ...and is preferably placed in a head css section or stylesheet.
    >>
    >> --
    >> Neredbojias
    >> Infinity has its limits.

    >
    >
    > CSS ok but this is only a test.
    >
    > What about this:
    >
    > Start at 200 an use only the rest of the sreen.
    >
    > <table height="100%" width="100%">
    > <tr height="150px"><td></td></tr>
    > <tr height="50px"><td></td></tr>
    > <tr><td>
    > <div style="overflow:auto;height:100%;width:100%;">
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    > </div>
    > </td></tr>
    > </table>
    >


    Why a table! Don't look like tabular data to me, just a list of what
    will be "links?"

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 5, 2006
    #6
  7. HDI

    Neredbojias Guest

    To further the education of mankind, "HDI" <>
    vouchsafed:

    >
    > Neredbojias schreef:
    >
    >> To further the education of mankind, "HDI" <>
    >> vouchsafed:
    >>
    >> > Hi,
    >> >
    >> > How do i get a scrolling div in firefox, works in IE but what
    >> > should I do to make it work in firefox?
    >> >
    >> > <table>
    >> > <tr>
    >> > <td><div style="width=300px; height=100px; overflow=auto;">

    >>
    >> This:
    >>
    >> <div style="width=300px; height=100px; overflow=auto;">
    >>
    >> wrong semantics.
    >>
    >> Should be:
    >>
    >> <div style="width:300px; height:100px; overflow:auto;">
    >>
    >> ...and is preferably placed in a head css section or stylesheet.
    >>
    >> --
    >> Neredbojias
    >> Infinity has its limits.

    >
    >
    > CSS ok but this is only a test.
    >
    > What about this:
    >
    > Start at 200 an use only the rest of the sreen.
    >
    > <table height="100%" width="100%">
    > <tr height="150px"><td></td></tr>
    > <tr height="50px"><td></td></tr>
    > <tr><td>
    > <div style="overflow:auto;height:100%;width:100%;">
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    >
    > a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    > </div>
    > </td></tr>
    > </table>


    I see what you're trying to do, but I doubt it'll work. There seems to
    be problems in css and/or browsers "interpreting" the height of things,
    especially in tables, except under particular circumstances and styling
    conditions. Can you use just a div (without table) and set padding-top
    to 200px instead?

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Dec 6, 2006
    #7
    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. stan
    Replies:
    0
    Views:
    445
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    741
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    182
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    303
    Martin Honnen
    Jun 26, 2005
  5. AngryHank

    focus() on scrolling div in Firefox

    AngryHank, Jul 31, 2006, in forum: Javascript
    Replies:
    3
    Views:
    153
    AngryHank
    Jul 31, 2006
Loading...

Share This Page