Highlight block A elements

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Andrew Poulos
    #1

    Highlight block A elements

    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
    Tags: None
    • Laser Lips
      #2
      Re: Highlight block A elements

      On Oct 10, 5:22 am, Andrew Poulos <ap_p...@hotmai l.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....

        Comment

        • David Mark
          #3
          Re: Highlight block A elements

          On Oct 10, 8:23 am, Laser Lips <loudsphi...@gm ail.comwrote:
          On Oct 10, 5:22 am, Andrew Poulos <ap_p...@hotmai l.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.

            Comment

            • Andrew Poulos
              #4
              Re: Highlight block A elements

              David Mark wrote:
              On Oct 10, 8:23 am, Laser Lips <loudsphi...@gm ail.comwrote:
              >On Oct 10, 5:22 am, Andrew Poulos <ap_p...@hotmai l.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

                Comment

                • David Mark
                  #5
                  Re: Highlight block A elements

                  On Oct 11, 7:07 am, Andrew Poulos <ap_p...@hotmai l.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?

                    Comment

                    Previous template Next
                    Working...