Results 1 to 4 of 4
Oct 26, 2007, 01:32 #1
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">
<div id="tab2" style="positive: relative; top: -800px">
tab3, tab4 the same way as tab2...
Oct 26, 2007, 01:41 #2
oh i mean position, not positive
Oct 26, 2007, 02:09 #3
- Join Date
- Dec 2004
- Derbyshire - UK
- 0 Post(s)
- 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
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.
Oct 26, 2007, 02:31 #4
"display" or "visibility" to implement tabs. i just wonder if there are pros and cons?
- Join Date
- Jan 2003
- Hampshire UK
- 182 Post(s)
- 6 Thread(s)
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.