1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

css scroll function in firefox

Discussion in 'CSS' started by michaeld8867, Jun 6, 2005.

0
  1. #1
    Does anyone know how to force the scroll function to work in firefox?

    I have created a standard overflow:scroll; that works just fine in IE but is ignored by firefox.
     
    michaeld8867, Jun 6, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Add more content so that it overflows this element.

    J.D.
     
    J.D., Jun 6, 2005 IP
  3. michaeld8867

    michaeld8867 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    OK---I should have mad this more clear. The content is there--but it simply displays outside of the box--the scroll bar does not appear. In other words, the page dimensions are set to the size of the screen, but the form that is contained within the box that should scroll just appears in its entirety. Thanks for your help J.D.
     
    michaeld8867, Jun 6, 2005 IP
  4. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Keep in mind, overflow only applies to block-level elements (e.g. <p>), replaced elements (e.g. <img>), table cells and inline blocks (not supported by all browsers). If you use it on something else, it won't work. For example, this will give you the scroll bars (regardless of the content size :eek: ):

    <p style="width: 200px; height: 5em; overflow: scroll;">
    0123456789 0123456789 0123456789 0123456789
    </p>

    If you use auto, scroll bars will appear and disappear as needed.

    J.D.
     
    J.D., Jun 6, 2005 IP
  5. michaeld8867

    michaeld8867 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You kind of lost me there--sorry. I am attaching a snagit pic--you can see the form bleeding beyoned the page. The grey area should be the footer. Does this help? What would you like to see?
     

    Attached Files:

    • sc3.png
      sc3.png
      File size:
      7.1 KB
      Views:
      2,099
    michaeld8867, Jun 6, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Post the HTML element that has the overflow property set to scroll (just the tag with the attributes).
     
    J.D., Jun 6, 2005 IP
  7. michaeld8867

    michaeld8867 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    .css---

    .f
    {
    position: absolute;
    height: $formH;
    width: $formW;
    top: $formT;
    left: $formL;
    background-color:White;
    overflow:auto;
    }

    html (partial)----


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <HTML>
    <HEAD>
    <title>Data</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <LINK href="../Styles/Beef.css" type="text/css" rel="stylesheet">
    </HEAD>
    <body id="Body1" onload="javascript:drawTable()">
    <form name="Form1" method="post" action="Data.aspx?id=15" id="Form1">
    <input type="hidden" name="__VIEWSTATE"


    </thead><tbody id="gridbody">

    </tbody>
    </table>
    </div><div class="h">

    </div><div class="v">

    </div><div class="mh">

    </div><div class="mv">

    </div><div class="md">

    </div><div class="f" id="m_f">
    <div id="m_f_te0" class="eb">
    <div class="ebt">
    <span id="m_f_te0_ti">Name</span>
    </div><div class="ebi">
    <input name="m:f:te0:t0" type="text" id="m_f_te0_t0" />&nbsp;<span id="m_f_te0_e0"
     
    michaeld8867, Jun 6, 2005 IP
  8. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #8
    This works just fine. Make sure that all your tags are closed and that your height and width have units (e.g. px). If you just have numbers, it will work only with IE (not having explicit units is against the spec for most properties/values).

    <html><head><title>Data</title>
    <style type="text/css">
    .f
    {
    position: absolute;
    height: 50px;
    width: 300px;
    top: 0;
    left: 0;
    background-color: White;
    overflow: scroll;
    }
    </style></head><body>

    <form name="Form1" method="post" action="Data.aspx?id=15" id="Form1">
    <div class="f" id="m_f">
    <div id="m_f_te0" class="eb">
    <div class="ebt">
    <span id="m_f_te0_ti">Name</span>
    </div></div></div>
    </form></body></html>

    J.D.
     
    J.D., Jun 6, 2005 IP
  9. michaeld8867

    michaeld8867 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanks to J.D. for big-time help with this. In case your interested, further research has led me to the conclusion that a big problem with the rendering of firefox and other browsers is that the ASP.NET engine on web servers will often treat other browsers as second class citizens. In other words, if asp.net recognizes a browser other than IE it will often kickout html 3.2 rather than 4.0--which of course renders differently. This was part of my prblem. This may be common knowledge, I don't know. But if you'd like to read more, go to http://aspnet.4guysfromrolla.com/articles/050504-1.aspx
     
    michaeld8867, Jun 7, 2005 IP
  10. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thanks for the update. I don't use this feature (i.e. generating per-browser HTML). Now I see that there's a good reason for this :)

    J.D.
     
    J.D., Jun 7, 2005 IP