Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    On Focus border removal

    I am trying to remove a focus link border without success. Can anyone help me?
    Code:
    ul.tabs {
    	list-style: none;
    	margin-left: 5px;
    	padding: 0;
    	border: none;
    	font-size: 90%;
    }
    ul.tabs li {
    	position: relative;
    	float: left;
    	width: 5em;
    	margin: 0;
    	padding: 0 4px 0 0;
        text-align: center
    }
    ul.tabs a {
    	display: block;
    	width: 4.5em;
    	padding: .2em;
    	border: 1px solid #CCC;
    	border-bottom: none;
    	text-decoration: none;
        
    }
    ul.tabs a, ul.tabs a:link, ul.tabs a:visited {
    	background: #EEF;
    	color: #00F;
    }
    ul.tabs a.active, ul.tabs a:link.active, ul.tabs a:visited.active {
    	background: #FFF;
    	color: #00F;
    	font-weight: bold;
    }
    ul.tabs a.active {
    	position: relative;
    	top: 1px;
    }
    ul.tabs a:link.focus {border: none;}
    The last line I thought would do it, but it does not, I should say this code is connected to a javascript and I wonder if that is affecting the tabs.
    Last edited by quartzy; 05-21-2009 at 01:45 AM. Reason: cant get this code thing to work

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,639
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Quote Originally Posted by quartzy View Post
    I should say this code is connected to a javascript
    And in which way please?

    Quote Originally Posted by quartzy View Post
    Code:
    ul.tabs a:link.focus {border: none;}
    1. There is a :focus pseudo-class in CSS. I’m not sure if the JS is adding a regular class called “focus” due to IE or what?
    2. The dotted border a link gets when it is clicked on (focused) is actually not a “border” but an outline. Therefore, to remove the outline you would use outline: none;

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Tried the outline none, but it did not work.

    What I am working on is a tabbed panel, the outline keeps going blue, and does not look good. I have not got a clue really on the js but I will attach the script.
    [ICODE]ul.tabs a:link.focus {outline: none;}[ICODE]

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    will try again with the js
    Attached Files Attached Files

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,639
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Please post a link to your site. We aren’t psychic.

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Obviously I have not uploaded it to my site until it is good. To what are you referring to, with we are not physic?

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Here is a screen dump of the problem.
    Attached Thumbnails Attached Thumbnails On Focus border removal-screen.jpg  

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Fixed it.

    [CODE]
    ul.tabs a.active {
    position: relative;
    top: 1px;
    outline:none;
    }
    [CODE]

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,639
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Quote Originally Posted by quartzy View Post
    Obviously I have not uploaded it to my site until it is good. To what are you referring to, with we are not physic?
    What I mean is nobody can tell you what your problem is if you just say you have a problem with your link border and post a snippet of your CSS. This doesn’t tell us anything about how the actual markup (HTML) looks like and/or if other CSS rules are overriding styles in that snippet. And you know, it is important to know that since CSS is styling HTML and if the HTML is wrong then CSS can’t do anything to make it better. And we don’t even know if there are other CSS rules that may override these ones – because we aren’t psychic.

    Additionally, JavaScript is also influencing and even dynamically changing the HTML so unless you show us your complete code or at best show us a live example nobody can tell you what is wrong because as I said: we aren’t psychic. We can’t read your mind.

    If you want help (which is what we’re here for) then please help us by providing as much information as possible to make it most convenient for us that are trying to help you for free in their spare time to find the issue and fix it. I don’t wanna download any text files or whatever and put them together in my editor, and I don’t wanna guess what your problem could be, I wanna see a live example or at the very least your entire code.

  • #10
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Thanks for explaining, I did find you a little abrasive, we are all learners, I help people too on these forums, and there is a stage of learning where you also need help, so a polite manner is the best, I find. Thanks for your assistance, but as I posted I have now fixed it.

  • #11
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Last edited by Bill Posters; 05-21-2009 at 12:15 PM.

  • #12
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Here are my links, I would like to add a hover and put the focus on that, but the links are done in a confusing way.

    [CODE]
    ul.tabs a, ul.tabs a:link, ul.tabs a:visited {
    background: #FFE500;
    color: #666;
    }
    ul.tabs a.active, ul.tabs a:link.active, ul.tabs a:visited.active {
    background: #FFF;
    color:#666; font-weight: bold;
    }
    ul.tabs a.active {
    position: relative;
    top: 1px;
    outline:none;
    }
    [CODE]

    Could you suggest a way to add a hover to the links?

  • #13
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    Tried adding a hover, but I guess the javascript does not allow it, anyhow I now have a focus on hover and click and that should be good enough for accessiblity I also have links when js is disabled.


  •  

    Posting Permissions

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