I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.
My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.
Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).
While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”
While creating my intriguingminds.com site, I ran into a problem with a selection border appearing around images. These images were used as buttons. When I clicked the button, the selection border appears.
To remove the selection border from around an image for Firefox, add this to your CSS file:
:focus { -moz-outline-style: none; }
Now, when you click on the image it will look like this:
March 31st, 2009 at 11:40 pm
Thanks a million! Worked like a charm.
June 10th, 2009 at 8:40 pm
Thank you!
July 10th, 2009 at 5:38 pm
Thank you very much. You didn’t say where to put it in the css file, as in, does it need to go in a div#, but I figured it out. You just place the code anywhere. Thanks a bunch!
July 24th, 2009 at 1:53 am
This is the full code. You just put it in the html.
a {
outline: none;
}
a img {
border:none;
}
October 20th, 2009 at 7:16 am
Hi All
Is there any inline style property for the same? (:focus { -moz-outline-style: none; }) e.g. XX.style.prop = none
If anybody knows pl let me know.
Thanks in adv
October 20th, 2009 at 8:16 am
Not sure why you would need a mozilla specific style. I think inline is the same across all modern browsers.
Here’s a list: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
Let me know what you are trying to do. I may be able to help.
October 28th, 2009 at 11:09 pm
I was looking for a solution to this. Works perfectly! Thanks!
December 1st, 2009 at 4:13 pm
Yay! This is awesome!
February 13th, 2010 at 6:25 am
Absolutely Fantastic been looking to get rid of this for ages and been a beginner in css was causing me a major headache, Thanks….
February 24th, 2010 at 12:09 am
thank for help. i like that your style.
March 16th, 2010 at 8:43 pm
is there anyway to do the same thing with .swf’s instead of images? because im trying to work out how to translate it but it is not working…
March 17th, 2010 at 10:13 am
I’m not sure. Are you using Flash buttons?
March 20th, 2010 at 10:07 pm
It works perfectly, Thank you so much
July 8th, 2010 at 12:23 pm
Eureka! Thank you very much
admin wrote:
“Not sure why you would need a mozilla specific style.
I think inline is the same across all modern browsers.”
@admin: That would be nice
Fact is, FF shows the border,
IE doesn’t.
But I must say I rather like the universal method of
bloor, allthough I’dd say that peace of code needs to
be put in a style section or separate css file…
Anyway…worke like a charm!
August 4th, 2010 at 8:30 am
worked! Looking for this for ages thanks!
August 5th, 2011 at 12:00 pm
Thanks!