By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,848 Members | 3,223 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,848 IT Pros & Developers. It's quick & easy.

Highlight block A elements

P: n/a
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
Oct 10 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On Oct 10, 5:22*am, Andrew Poulos <ap_p...@hotmail.comwrote:
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....
Oct 10 '08 #2

P: n/a
On Oct 10, 8:23*am, Laser Lips <loudsphi...@gmail.comwrote:
On Oct 10, 5:22*am, Andrew Poulos <ap_p...@hotmail.comwrote:
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....
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.
Oct 10 '08 #3

P: n/a
David Mark wrote:
On Oct 10, 8:23 am, Laser Lips <loudsphi...@gmail.comwrote:
>On Oct 10, 5:22 am, Andrew Poulos <ap_p...@hotmail.comwrote:
>>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....

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
Oct 11 '08 #4

P: n/a
On Oct 11, 7:07*am, Andrew Poulos <ap_p...@hotmail.comwrote:
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?
Oct 11 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.