Link not clickable because of a position:relative

HTML & CSS
1

Hello guys,
I implemented a “Skip to content” link in a page: simply clicking the TAB for a couple of times make the link appear on the top-left screen

http://www.ivanhalen.com/framework/password.asp.htm

The problem is that on Firefox the link is not clickable and the hover doesn’work: you can check against IE8

I removed the markup part:


<div id="main">
...
</div>

And the link is clickable and “hoverable” again. the problem is on the CSS line:

.I #main { position:relative; vertical-align:middle; display:table-cell; background:none; }

in particular, removing the “position:relative;” resolves the problem… But I need it to center the box in the page!
Is there a workaround?

Thanks

2

I’m afraid I have not a clue what you are talking about. Can you be clearer?

simply clicking the TAB for a couple of times make the link appear on the top-left screen

Not for me!

3

Yes, I try :slight_smile:
Put your mouse on the “Login” Textfield
Hit TAB once and the button will be highlighted
Hit TAB twice and the “Vai al login” link will be highlighted
Hit TAB once again and a box will appear on the top left corner of the screen (on Firefox, IE8 and Chrome only)

4

Have you tried raising the x-index on the absolute element so that it is above the other content.


.skip {
    position:absolute;
    left:-2000px;
    display:block;
    font-weight:bold;
 [B]   z-index:99;
}[/B]