#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    7
    Rep Power
    0

    Question about rollover images selection box


    So, I'm pretty new to all this, and any help is really key.

    So, on my site, I have a lot of rollover images. I may be breaking usability rules! The site has a lot of hand drawn elements that are supposed to act as nav. So, we implemented hand drawn nav that changes color when you rollover it.

    The problem is that when you click on those rollovers, a big dotted box appears around the selected one... it looks especially tacky if you don't go over to the next page. All of these elements have this box.

    Is there a way to tell the browser not to show that selection box??
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    10
    Rep Power
    0
    I am not sure exactly what is causing the problem, it would be useful to know which browser(s) are exhibiting this behaviour to be sure the problem is targeted correctly.

    That said, one starting point is to create a rule for all images that removes their default border (more of a problem with IE displaying an outline around linked images) insert the following code into your stylesheet and see if this solves your issue.

    Code:
    img {
    border: 0;
    }
  4. #3
  5. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    When you "click" on it, it shows up? Try img:active { border:none }

    Try it with the plain img { border:none;} too. Though the :active pseudo class gets funky in IE so don't be surprised if it doesn't work.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL

IMN logo majestic logo threadwatch logo seochat tools logo