IE overflow scrolling of relative positioned DIV

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Justin England
    #1

    IE overflow scrolling of relative positioned DIV

    Background:

    I am working for a client putting a textbook online. The layout of the
    textbook is straight forward and is easy enough to style with <h?>, <p>,
    <uland <oltags. The text book also contains small images of a key that
    represent a key point within the text. In the printed book, these keys are
    positioned to the left of the text (in the margins if you will) and some
    paragraphs may have more than one key. It is important to the client that
    these keys be placed accordingly.

    This posed a slight problem, but was easily solved (so I thought) using
    absolute positioning. I wrap a paragraph within a <div style="position :
    relative;"then the key image(s) is positioned 'absolute' with respect to
    that particular <div(and are placed before the <pin the source). Easy
    enough so far, give it a top: 0;(or whatever) and left: -60px; and the key
    appears just like it should (and very damn close to how it looks in the
    printed book).

    The Problem:

    The site layout is a non-liquid two column layout with a header. The right
    column has a fixed height with overflow: auto; which works fine when the
    content overflows the height of the right column, the scroll bars appear and
    work as expected. The problem comes in when a <divhas position: relative;
    in IE 7 and the content overflows the right column height. IE will not
    include the position: relative; <div>'s in the scrollable content, even
    though the initial containing <divis within the overflow: auto; <div>.

    In Firefox and Opera (both windows and Unix (FreeBSD) ) it works just as
    expected, but IE doesn't work. What I find odd, is that if I remove the
    <doctypetag, it works just fine in all browsers including IE (found that
    out by mistake), so I know that IE has the capability to do what I am
    looking for.

    Example:

    To see an example of exactly what I am talking about, view
    http://www.rapidcity.net/~justin/test/position.html

    Both the HTML and CSS validate.

    Everything is right there in the HTML so a simple "View Source" will show
    you all the html and CSS.

    The Question:

    Is there a workaround for this in IE? I have searched but have not found
    anything in reference to IE7. Or, is there a better way to position the key
    images to the left of the text (and some cases need to be in the middle of
    or at the bottom of the paragraph)? If I take out all the position:
    attributes, it works perfectly in all browsers, but obviously the keys do
    not appear as they should.

    Thanks,

    Justin England
    justin@rapidcit y.net


    Tags: None
    • =?ISO-8859-1?Q?G=E9rard_Talbot?=
      #2
      Re: IE overflow scrolling of relative positioned DIV

      Justin England wrote :

      [snipped]
      The Problem:
      >
      The problem comes in when a <divhas position: relative;
      in IE 7 and the content overflows the right column height. IE will not
      include the position: relative; <div>'s in the scrollable content, even
      though the initial containing <divis within the overflow: auto; <div>.
      Example:
      >
      To see an example of exactly what I am talking about, view
      http://www.rapidcity.net/~justin/test/position.html

      Both the HTML and CSS validate.
      This is a known bug.

      Overflow auto and position: relative by Rowan Wigginton
      http://rowanw.com/bugs/overflow_relative.htm


      MSIE 6 and MSIE 7 bug with overflow and position: relative bug by Emmett
      the Sane
      IE6 bug with overflow and position:relative
      http://mt-olympus.com/emmett/bug_overflow_positionrelative.php?doctype=htmlstrict&overflow=auto


      Pretty sure Bruno Fassino also has a test case like that for that
      particular overflow and position: relative design.

      MSIE 7 bugs collections
      Bugs in MSIE 7 for Windows
      http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/


      Justin, if you reduce that test page and leave it at your URL, I will
      add it in my IE7 bugs page. If you do that, this can (will?) help make
      Microsoft understand that this bug should be a priority.

      Gérard
      --
      Using Web Standards in your Web Pages (Updated Dec. 2006)
      Page not found | MDN
      http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
      The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

        Comment

        • =?ISO-8859-1?Q?G=E9rard_Talbot?=
          #3
          Re: IE overflow scrolling of relative positioned DIV

          Gérard Talbot wrote:
          Pretty sure Bruno Fassino also has a test case like that for that
          particular overflow and position: relative design.
          Yep!
          Overflow & position:relative
          http://www.brunildo.org/test/OverflowR.html


          Gérard
          --
          Using Web Standards in your Web Pages (Updated Dec. 2006)
          Page not found | MDN
          http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
          The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

            Comment

            • Gus Richter
              #4
              Re: IE overflow scrolling of relative positioned DIV

              Justin England wrote:
              To see an example of exactly what I am talking about, view
              http://www.rapidcity.net/~justin/test/position.html

              Both the HTML and CSS validate.
              >
              Is there a workaround for this in IE?
              >
              Here is my way that works for Fx, IE and Opera:

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
              <html>
              <head>
              <title>Positi on Test</title>

              <style type="text/css">
              div#container {
              position:relati ve;
              width: 55%;
              height: 200px;
              overflow: auto;
              border: 1px solid red;
              background-color: yellow;
              }
              div.box {
              margin-left: 100px;
              width: 50%;
              border: 1px solid black;
              background-color: gray;
              }

              span {font-size:10px;}
              img.position {
              position: absolute;
              top: auto;
              left: 2em;
              }
              </style>
              </head>
              <body>
              <div id="container" >
              <div class="box">
              <p>
              This box is positioned relative to it's container (the yellow box) and
              the key to the left has been positioned absolute in reference to this
              box. With the doctype of <span>&lt;!DOCT YPE HTML PUBLIC "-//W3C//DTD
              HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; </span>
              it does not work as expected in IE7.
              <img class="position " src="position_f iles/key.png" alt="Image of a Key"
              title="Key Point">
              The gray boxes should stay withing
              the confines of the yellow box. Once I remove the doctype tag,
              (essentially putting IE in quirks mode) it works as expected. This
              positioning works in FF 1.5 and Opera 9.2 on windows, and FF 1.5 on
              Unix (FreeBSD) with the DOCTYPE tag. </p>
              </div>
              <div class="box">
              <p>
              Vestibulum lacinia. Quisque suscipit suscipit ligula. Integer
              condimentum mollis nisl. Praesent in leo. Aenean nisl. Vivamus
              venenatis. Aliquam felis. Duis ipsum nibh, pulvinar id, vehicula sed,
              mattis id, nibh. Fusce suscipit, nisi vel pretium lacinia, massa nisl
              consequat leo, non imperdiet eros orci sed sem. Donec ac mi in eros
              interdum molestie. Nam aliquet mollis leo. Praesent tincidunt dolor at
              erat. Curabitur mollis augue. Morbi vulputate enim sed ante. Sed non
              tellus. Sed convallis dapibus quam. Vestibulum nonummy, turpis nec
              tristique molestie, erat tortor consequat felis, a molestie nisl arcu a
              dolor. Pellentesque tellus massa, accumsan eu, facilisis vel, sagittis
              a, velit. </p>
              </div>
              <div class="box">
              <p>
              Integer tincidunt lacinia sem. Integer facilisis arcu nec nisi.
              Maecenas a diam et justo fermentum porta. Vestibulum rhoncus. Mauris
              tincidunt metus vitae enim. Nunc dignissim tincidunt elit. Mauris elit.
              Maecenas interdum enim ac est. Nullam eu tortor eu massa elementum
              sodales. Pellentesque habitant morbi tristique senectus et netus et
              malesuada fames ac turpis egestas. Vivamus tincidunt. </p>
              </div>
              <p>
              Quisque lacinia. Aliquam hendrerit viverra dolor. Sed non est. Etiam
              ultrices turpis consectetuer justo. In metus ante, rutrum eget,
              consectetuer sit amet, eleifend ut, ante. Donec nec tellus ac libero
              blandit pharetra. Fusce vestibulum nibh tincidunt tortor. Lorem ipsum
              dolor sit amet, consectetuer adipiscing elit. Cras commodo molestie
              lacus. Nulla accumsan tincidunt neque. Aliquam dolor. Maecenas eros
              diam, gravida in, euismod convallis, porttitor sed, diam. </p>
              <p>
              Integer porta lorem sed dui. Lorem ipsum dolor sit amet, consectetuer
              adipiscing elit. Donec leo risus, ornare et, lobortis in, convallis
              varius, erat. Etiam iaculis metus vitae lorem. Aenean tincidunt.
              Quisque id lectus feugiat turpis imperdiet varius. Mauris sed sapien.
              Fusce ac tortor ut neque porttitor tempus. Vivamus nonummy, mauris eget
              fringilla dignissim, dolor felis pharetra sem, quis pharetra arcu augue
              quis augue. Aenean sit amet tortor a dolor vulputate tincidunt.
              Maecenas sapien ligula, rhoncus vitae, laoreet eget, molestie et,
              lorem. Nam lectus. Nam nec nunc. Nullam felis dui, sodales at,
              ultricies nec, sodales et, nulla. Morbi ante. Phasellus justo. </p>
              </div>

              <div
              style="position :absolute;top:3 00px;left:200px ;width:700px;bo rder:1px
              solid;backgroun d:orange;paddin g:6px;">
              In this version, the scrollable portion is working now in IE, Fx and
              Opera along with the image scrolling in sync with the "Key

              Point" - with the changes as noted here:
              <pre style="font-size:11px;">
              div#container {
              position:relati ve;
              width: 55%;
              height: 200px;
              overflow: auto;
              border: 1px solid red;
              background-color: yellow;
              }
              div.box {
              margin-left: 100px;
              width: 50%;
              border: 1px solid black;
              background-color: gray;
              }

              span {font-size:10px;}
              img.position {
              position: absolute;
              top: auto;
              left: 2em;
              }

              At the "Key Point", the following is inserted:

              &lt;img class="position " src="position_f iles/key.png" alt="Image of a
              Key" title="Key Point">
              </pre>
              </div>

              </body>
              </html>

              --
              Gus

                Comment

                Previous template Next
                Working...