CSS image gallery question

I am confused about some code in this css image gallery example:

Dynamic Drive CSS Library- CSS Image Gallery

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

Why the left: -1000px? It moves it off the screen, but is that necessary when you use visibility: hidden;?

Thanks

Karin

I suppose it depends whether 1000px is enough to move it off screen which is not actually enough on my screen to make it disappear when maximised.

I usually use -999em just to be sure but not too large as browsers have limits.

Sometimes people use visibility:hidden as well just to be sure it is hidden but it may stop screen readers from seeing the element though which is why the off-left approach is preferred.

Sometimes people use visibility:hidden as well just to be sure it is hidden but it may stop screen readers from seeing the element though which is why the off-left approach is preferred.

In this specific case of the image gallery I think it would be preferred that the screen reader not see it, since the element is simply an enlargement of an element already on the page.

Would you anticipate any problems if I left that out? I am just beginning to transition to CSS and know not all browsers behave the same. Do some not deal well with hidden? Is that why this example uses both methods?

Thanks,

Karin

if that the case, using display: none; instead of positioning or visibility will work perfectly.

Actually guys, the visibility:hidden and visible swap has the same effect as changing it from display:inline when hidden to display:block – the state change forces legacy IE to not “stick” in either the on or off state.

You omit that, IE7 and lower tend to leave it in place when you mouse-out at random intervals.

NOT that I’d advise using that technique given it tends to have accessibility issues regarding width (as evidenced by the dynamic drive page where the right half of the image blows out of the container and off screen)

Yes good point but you don’t actually need the visibility:hidden to start with. visbility:visible on the hover state alone will do that all by itself.

In this specific case of the image gallery I think it would be preferred that the screen reader not see it, since the element is simply an enlargement of an element already on the page.

Then display:none is as good as any although it doesn’t hide from all screen readers apparently.

Well, let’s face it, if people wrote their CSS properly and bothered using HTML to it’s original intent, screen readers wouldn’t have any business looking at anything in the CSS in the first place… well, unless you targeted it.

Since media=“screen” does not equal media=“speech”

But since nobody bothers writing code correctly, throw their screen specific CSS at “all” assuming they even BOTHER using the media attribute, the screen readers have to do stuff they shouldn’t just to make their users lives easier.