SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using display or visibility to implement tabs

    it seems that we can actually use "display" or "visibility" to implement tabs. i just wonder if there are pros and cons?

    it seems that if we use "display", the browser may need to shrink the 1st tab first, and then redisplay the second, thus causing a time delay.

    with visibility, there probably is not such delay...

    so is this how you make the big tabs content div's:

    <div id="tab1" style="height: 800px">
    content 1
    </div>

    <div id="tab2" style="positive: relative; top: -800px">
    content 2
    </div>

    tab3, tab4 the same way as tab2...

    and then just use javascript to toggle the visibility.

    thanks.

  2. #2
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh i mean position, not positive

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure from your description what you're trying to achieve but using display: none; or visibility can be bad for accessibility as screen readers won't read the content.

    If you're after a decent tab solution then you might find the following useful

    http://www.dave-woods.co.uk/?p=101

    It uses the sliding doors technique along with using background position to create the hover and is a much easier and user friendly method to use.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    "display" or "visibility" to implement tabs. i just wonder if there are pros and cons?
    Apart form the accessibility issues mentioned by Dave there is a fundamental difference between display:none and visibility:hidden.

    Display;none does exactly as its name suggests and completely removes the element from the document so that it has no effect on any of the content at all. It's as if the element isn't there at all.

    On the other hand visibility:hidden just makes the element invisible but it still occupies the same space on the screen and takes up the same amount of room. It's just that we can't see it. All elements on the page will treat the invisible element as though nothing had changed.

    Therefore when hiding elements you would use display:none because you would want the elements space to collapse to zero in most cases.

    Elements can be removed from the flow by making them position:absolute and placing them miles off to the left of the screen. This removes them from view and from the flow but still leaves them available for screen readers.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •