Position absolute not always removed from flow?

Discussion in 'HTML' started by Nik Coughlin, Apr 30, 2008.

  1. Nik Coughlin

    Nik Coughlin Guest

    Why does a page behave differently with an element styled:

    position: absolute;
    left: -128px;

    from the page with:

    position: absolute:
    right: -128px;

    In the first case the absolutely positioned element is removed from the page
    flow as expected, in the second case it's not. Examples:

    http://nrkn.com/posAbsProblem/leftOnly.html

    http://nrkn.com/posAbsProblem/rightOnly.html

    You can see that when you resize the browser below a certain point the right
    positioned element causes a horizontal scrollbar but the left positioned
    element doesn't.

    For further illumination, here is the same page with both left and right
    positioned elements:
    http://nrkn.com/posAbsProblem/index.html

    Behaves the same as the page with only the right positioned element. And
    the page with just the left behaves the same as a page with no positioned
    elements:

    http://nrkn.com/posAbsProblem/noBackgrounds.html

    CSS is here:

    http://nrkn.com/posAbsProblem/layout/main.css

    The intention of all this is that the positioned elements are shown when
    there is spare room for them, but disappear out of the viewport to make room
    for the content if necessary, without creating a horizontal scrollbar.

    Any idea of why this happens? As it happened in all the browsers I checked*
    it is clearly supposed to work like this but I was under the impression that
    absolutely positioning an element removes it from the page flow and I can't
    see why in this example the left doesn't cause scrollbars but the right
    does, with the only difference between them being whether it is positioned
    left or right.

    FF, Opera, Safari. Didn't try IE.
    Nik Coughlin, Apr 30, 2008
    #1
    1. Advertising

  2. Nik Coughlin

    Bergamot Guest

    Ben C wrote:
    >
    > The BBC news site for example used a
    > huge negative text-indent to whisk away text labels that it replaced
    > with images.
    >
    > The idea is, no CSS and you get the text, otherwise the images.


    Except when image loading is disabled (but CSS enabled), then you get
    nothing at all. Sweet.

    > Much better to use display: none to achieve this.


    No, it is not better. There are some potentially serious accessibility
    problems any time you use display:none. Use with caution.

    BTW, this is just one of several image replacement methods. I don't know
    of any that are problem-free, and most suck when it comes to CSS enabled
    and images disabled.

    --
    Berg
    Bergamot, Apr 30, 2008
    #2
    1. Advertising

  3. Ben C wrote:

    > That's the problem: people do that. The BBC news site for example used a
    > huge negative text-indent to whisk away text labels that it replaced
    > with images.
    >
    > The idea is, no CSS and you get the text, otherwise the images.
    >
    > But in a conforming browser you get a scrollbar and can scroll 10000px
    > to the left and find the text links sitting there looking sorry for
    > themselves.
    >
    > Much better to use display: none to achieve this.


    Well not necessarily. When a negative margin or position is use to
    "pop" an element into view with, the CSS popup, it does not trigger the
    page to reflow whereas toggling display property can in some browsers.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Apr 30, 2008
    #3
  4. Nik Coughlin

    Bergamot Guest

    Ben C wrote:
    > On 2008-04-30, Bergamot <> wrote:
    >>
    >> There are some potentially serious accessibility
    >> problems any time you use display:none.

    >
    > Like what?


    Like screen readers don't see anything at all, the same as when image
    loading is disabled. Ditto with visibility:hidden

    --
    Berg
    Bergamot, Apr 30, 2008
    #4
  5. Ben C wrote:

    > I was thinking of the simple case where you have a text label that you
    > just want nobody to see (or hear) if they are using the stylesheet. No
    > plans to pop it back up.


    Then yes, display none. Possible use, things that are only displayed
    when printing.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Apr 30, 2008
    #5
  6. Nik Coughlin

    Bergamot Guest

    Ed Jay wrote:
    > Bergamot scribed:
    >>Ben C wrote:
    >>> On 2008-04-30, Bergamot <> wrote:
    >>>>
    >>>> There are some potentially serious accessibility
    >>>> problems any time you use display:none.
    >>>
    >>> Like what?

    >>
    >>Like screen readers don't see anything at all, the same as when image
    >>loading is disabled. Ditto with visibility:hidden

    >
    > I always use display:none when I don't want the reader to see anything. I
    > don't understand your point.


    It's a few years old, as is the updated results it links to, but AFAIK
    things haven't changed.
    http://css-discuss.incutio.com/?page=ScreenreaderVisibility

    --
    Berg
    Bergamot, Apr 30, 2008
    #6
  7. Nik Coughlin

    Bergamot Guest

    Ed Jay wrote:
    > Bergamot scribed:
    >>
    >>It's a few years old, as is the updated results it links to, but AFAIK
    >>things haven't changed.
    >>http://css-discuss.incutio.com/?page=ScreenreaderVisibility

    >
    > Thanks. I read it. Are we suggesting that for accessibility reasons,
    > everything should always be 'visible,' even content that is event triggered?


    No, that's not what it means. It does mean that display:none and
    visibility:hidden have side effects you might not have considered. So
    start considering them and act accordingly.

    --
    Berg
    Bergamot, May 1, 2008
    #7
  8. Nik Coughlin

    Andy Dingley Guest

    On 1 May, 05:07, Bergamot <> wrote:

    > No, that's not what it means. It does mean that display:none and
    > visibility:hidden have side effects you might not have considered.


    What _is_ the "side effect" of display:none;?

    "Not being displayed" isn't a side effect!
    Andy Dingley, May 1, 2008
    #8
  9. Nik Coughlin

    Bergamot Guest

    Andy Dingley wrote:
    > On 1 May, 05:07, Bergamot <> wrote:
    >
    >> No, that's not what it means. It does mean that display:none and
    >> visibility:hidden have side effects you might not have considered.

    >
    > What _is_ the "side effect" of display:none;?
    >
    > "Not being displayed" isn't a side effect!


    In the case of image replacement methods, which was the example that
    started this subthread, plain text was positioned out of sight off left
    so a background image would be seen in its stead.

    The suggestion was to use display:none for the text instead.

    A screen reader will still be able to "see" the text in the first
    method, but not the second. That is the kind of side effect I was
    referring to.


    --
    Berg
    Bergamot, May 2, 2008
    #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. Luqman
    Replies:
    1
    Views:
    643
    Luqman
    Feb 7, 2006
  2. Replies:
    3
    Views:
    5,391
    Neredbojias
    Jan 7, 2006
  3. ThunderMusic
    Replies:
    6
    Views:
    416
    ThunderMusic
    Sep 28, 2006
  4. Jack Dowson
    Replies:
    0
    Views:
    441
    Jack Dowson
    May 7, 2007
  5. James Byrne
    Replies:
    3
    Views:
    536
    James Byrne
    Sep 14, 2010
Loading...

Share This Page