SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    May 2009
    Location
    India
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE7 dotted border around links

    Hi,
    When you click on a link in IE7 a dotted line appears around the active/focus state.
    I want to remove this border... i have already fixed it for firefox. But the problem is still persisting in IE7. I want to use CSS to solve this issue.

    Thanks,

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you remove the outline then people viewing your page who don't have a mouse will not know which field has the focus in order to be able to interact with the page. Removing that accessibility aid is a really bad idea.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    May 2009
    Location
    India
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks Stephen,
    I am aware of this accessibility issue and I am trying to find a workaround for this.
    In this particular case, this border looks messy on the styles I am using.

    Regards,
    vilas

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Just set outline:0; on the element. I doubt you can workaround the accessibility issues of this if you choose to remove it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Member
    Join Date
    May 2009
    Location
    India
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion.
    But i tried using "outline", it doesnt work.
    The property is still not supported by IE7.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    It's supported..I think, but I don't know..

    #element:focus{outline:0;}

    If that doesn't work I will need to see a live page to debug it . Leave off the http://www. parts of hte URL so it looks like

    sitehere . com / page . php
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    May 2009
    Location
    India
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    well in that case, i'll try again and post the results.

    Just now i read in the sitepoint CSS reference that its not supported
    the link is here:
    reference.sitepoint.com/css/outline
    Even the psuedo class :focus is not supported by IE 7

  8. #8
    SitePoint Member
    Join Date
    May 2009
    Location
    India
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am posting the "css" and "html" code for better understanding

    Code:

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    .tab-control { font-weight: bold; font-size: 11px; font-family: Verdana; }
    li { display:inline; margin-right:2px;	border:#c3c5c3 1px solid; border-bottom:none; line-height:30px;}
    a { padding:6px 5px; text-decoration:none; 	color:#669948;}
    a:link, a:visited {color:#669948;}
    a:hover, a:active {	color:#669948;}
    </style>
    </head>
    <body>
    <div class="tab-control">
      <ul>
        <li><a href="javascript:;">Features</a></li>
        <li><a href="javascript:;"><em>Events</em></a></li>
        <li><a href="javascript:;">Toolbox</a></li>
      </ul>
    </div>
    </body>
    </html>
    Open this in IE7 and click on any of the tabs (link) , you will see the dotted border.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Sorry it's impossible to get rid of the effect due to IE not supporting a way to get rid of it , unless you use JS (perhaps that could do it).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Member
    Join Date
    May 2009
    Location
    India
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah.. even i was googling for some time and not finding any solution.
    But i came across this ...
    cssplay.co.uk/menu/nodots.html

    I am studying this code.
    Lets see if i can find anything.. Thanks for your help.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •