Highlight block A elements

[Andrew Poulos]

As a user tabs about a web page I want to highlight with a, say, 2 pixel
solid yellow border the anchor that currently has focus. When the anchor
loses focus the border is removed.

The anchors that may receive a highlight have their style.display set to
'block'.

So far this is working fine except that when the border displays it
pushes the anchor down and to the right by 2 pixels (to accommodate the
border). I thought about simply moving the anchor when it has focus to
"stop" it from appearing to move. Unfortunately some anchors are
positioned absolutely from the right, some with a relative value, and
some are inline. So I need to work out which are which before I can
reposition them.

Is there a simpler/better way to highlight anchors with a border that
doesn't cause them to move on screen?

I tried drawing a new DIV over the top of each anchor but that stops the
mouse click from getting to the anchor.

Andrew Poulos

 

[Laser Lips]

As a user tabs about a web page I want to highlight with a, say, 2 pixel
solid yellow border the anchor that currently has focus. When the anchor
loses focus the border is removed.

The anchors that may receive a highlight have their style.display set to
'block'.

So far this is working fine except that when the border displays it
pushes the anchor down and to the right by 2 pixels (to accommodate the
border). I thought about simply moving the anchor when it has focus to
"stop" it from appearing to move. Unfortunately some anchors are
positioned absolutely from the right, some with a relative value, and
some are inline. So I need to work out which are which before I can
reposition them.

Is there a simpler/better way to highlight anchors with a border that
doesn't cause them to move on screen?

I tried drawing a new DIV over the top of each anchor but that stops the
mouse click from getting to the anchor.

Andrew Poulos

Put a div behind each hooverable element and give it padding or the
desired border width. Then put your content in to the div. When the
ancore is hovvered on chane the colour of the background div to the
desired colour of the border....

 

[David Mark]

Put a div behind each hooverable element and give it padding or the
desired border width. Then put your content in to the div.  When the
ancore is hovvered on chane the colour of the background div to the
desired colour of the border....

Rubbish.

This is a CSS question. If you don't care about IE6 (or know the
DirectX hack for transparent borders), use transparent borders and
color them on hover and focus. If you have further questions, try a
CSS group.

 

[Andrew Poulos]

Rubbish.

This is a CSS question. If you don't care about IE6 (or know the
DirectX hack for transparent borders), use transparent borders and
color them on hover and focus. If you have further questions, try a
CSS group.

I do care about IE 6 and don't want to user the hack for transparent
borders.

Although I didn't say it in my original post the highlight is optional.
Depending on what settings a user makes. So the highlight will be
applied dynamically using javascript.

Andrew Poulos

 

[Thomas 'PointedEars' Lahn]

I do care about IE 6 and don't want to user the hack for transparent
borders.

You may have the option to set the border color to the color of the
background of the parent element in order to hide it. In any case
it is nothing to be solved by scripting.

[...]
Depending on what settings a user makes. So the highlight will be
applied dynamically using javascript.

Not a wise decision, given that plain CSS suffices.


PointedEars

 

[David Mark]

David Mark wrote: [snip]

This is a CSS question.  If you don't care about IE6 (or know the
DirectX hack for transparent borders), use transparent borders and
color them on hover and focus.  If you have further questions, try a
CSS group.

I do care about IE 6 and don't want to user the hack for transparent
borders.

Why not? It is a perfectly reasonable way to get transparent borders
in IE6 (provided you wrap the rules in conditional comments.)

Although I didn't say it in my original post the highlight is optional.
  Depending on what settings a user makes. So the highlight will be
applied dynamically using javascript.

So, add and remove the rule (or sheet) as needed. What's the problem?