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 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    30
    Thanks
    5
    Thanked 0 Times in 0 Posts

    grey dotted box.

    Hello everyone. I have a question. Hopefully i can explain it properly.

    I have a vbulletin. and I just noticed that when I am in firefox, browsing, all the links I click on don't show the regular old rectangular box that comes out you'd normally get in Internet explorer. (which is a good thing btw). I find it neat. And I like it. here's an example of the box i'm talking about. (i hope i am allowed to post an image)



    for the longest time, i have grown accostumed to this. it's second nature. it doens't bother me. i just know i get them all the time in practically all sites all over the internet in internet explorer and only just now realized FF does a good job of hiding it.

    so much so, that, when firefox DOES display, it makes me wonder why. O_o all the html is the same.

    and that is my current issue. I think it's impossible. i don't believe it's the same thing as css effects like a:hover, a:active, and so on. I even tried overriding the vbulletin and it still displayed the same thing. (hopefuly i did it right when i tested it)

    the fact that ie shows them, and FF most of the time doesn't, tells me it's a browser issue. am i correct in this? or is it realy all css and can be hidden/changed/altered with the help of css?

    i've built websites where i specify all aspects of a link. and they still appear.

    So i'm wondeirng...


    1. can I get rid of it ?

    2. change its color ?



    isn't this some random occurence with no explenation? because i still believe it has nothing to do with html/css and that it cannot be edited in any way shape or form because it's a simple browser behaviour issue.

    or

    am i wrong? and if so, would anyone happen to know the css to control it?


    any tips, comments, ideas, opinions, thoughts, advice, or anything is greatly appreciated.

    thank you for your time.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I didnít quite understand what you were trying to say with your long post but I guess what you are looking for is the outline property. Thatís the thing that appears when a link is selected (focused) and which is a good help if you are navigating through the page with your tab key.
    Code:
    a {outline: none;}
    p {outline: 3px dashed magenta;}
    You can style it as you would style a regular border. The difference is it doesnít add to the size of an element.

    However, this is CSS 3 which hasnít been officially released yet and itís not supported by all browsers (Iím thinking of IE here).

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by VIPStephan View Post
    However, this is CSS 3 which hasnít been officially released yet and itís not supported by all browsers (Iím thinking of IE here).
    Just for your information, the outline property was already introduced in CSS2 (1998). We may soon celebrate its 10-year anniversary. Check it out here:

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Perhaps the confusion relates to the addition of a fifth outline property, outline-offset, and a new value for the outline-style property in the CSS3 Basic User Interface Module.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by koyama View Post
    Just for your information, the outline property was already introduced in CSS2 (1998). We may soon celebrate its 10-year anniversary. Check it out here:
    Oh really? Never noticed that. I always assumed it wasnít official yet. Well, nevermindÖ

    Edit: Ah noÖ I just realized: I confused outline with opacity! That one is CSS 3.
    Last edited by VIPStephan; 05-14-2007 at 02:48 PM.

  • #6
    New Coder
    Join Date
    Mar 2007
    Posts
    30
    Thanks
    5
    Thanked 0 Times in 0 Posts
    wow thanks a lot peeps. can't wait to try it out.

    thanks again.

  • #7
    New Coder
    Join Date
    Mar 2007
    Posts
    30
    Thanks
    5
    Thanked 0 Times in 0 Posts
    ok. i don't know if i did it right. but here's the code i modified.

    at first i applied it to the link. and then to the image. and neither seemed to work.

    Code:
    <if condition="$post['forwardlink']">
    <div style="position:relative;top:13px;left:30px;float:left;">
    <a href="$post[forwardlink]" style="outline: none;"><img src="images/style/brown/forward.gif" alt="$vbphrase[forward_message]" border="0" style="outline: none;" /></a>
    </div>
    </if>

    also. for some reason. the forward button in the pm is the ONLY button that does this at all.

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by Omega View Post
    ok. i don't know if i did it right. but here's the code i modified.

    at first i applied it to the link. and then to the image. and neither seemed to work.
    Hereís a working example. You can see the outline effect by using the Tab key in Firefox or the A key in Opera to cycle through (focus) the links. Unfortunately, Opera is weird and doesnít display the outline unless you first focus the link and then either click to blur (defocus) or move the mouse near the focused link. And, as VIPStephan mentioned, Internet Explorer does not support the outline property.

    There is a way to remove the focus outline in Internet Explorer; you would use JavaScript to blur (defocus) whenever the element is focused. Of course, that means that keyboard navigation becomes useless; itís bad for accessibility.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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