Reply
Getting rid of bright blue frames around image links in Firefox 3
Old 03-11-2009, 10:19 PM Getting rid of bright blue frames around image links in Firefox 3
World's Avatar
Extreme Talker

Posts: 165
Location: Santa Monica, CA
Trades: 0
I created a few buttons in Photoshop, put it into the .gif format, and placed it on my website-to-be.

They are ROUND, originally designed on a square, with the corners lopped off in Photoshop (put on transparency) and using the transparency in the .gif file, too.

Safari shows everything well.

Firefox 3 (color management enabled) shows bright blue rectangles around the original square of the file.

Looks horrible.

It's obviosly Firefox' way to describe a link.

How can I turn this off?

Thanks!
World is offline
Reply With Quote
View Public Profile
 
 
When You Register, These Ads Go Away!
Old 03-11-2009, 10:27 PM Re: Getting rid of bright blue frames around image links in Firefox 3
stevej's Avatar
Professional Multitasker

Posts: 991
Location: In a flying house
Trades: 0
Firefox automatically puts a 'link' look around all images. If you want to avoid this you can:
HTML Code:
<img src="whatever.ext" border="0" />
Or if you want to be correct:
Code:
img {
border: 0;
}
- Steve
__________________
if($stevej == "helpful") { $talkupation += $user_power; }
stevej is offline
Reply With Quote
View Public Profile
 
Old 03-11-2009, 11:48 PM Re: Getting rid of bright blue frames around image links in Firefox 3
World's Avatar
Extreme Talker

Posts: 165
Location: Santa Monica, CA
Trades: 0
Thanks!

I actually used #id in CSS as I have images with borders on my website (which I needed), so I created the rule for the buttons only (which are images, too).

Code:
#button_pricing  {

border:				0;
}
Worked like a charm.

Last edited by World; 03-11-2009 at 11:54 PM..
World is offline
Reply With Quote
View Public Profile
 
Old 03-12-2009, 04:44 AM Re: Getting rid of bright blue frames around image links in Firefox 3
chrishirst's Avatar
Super Moderator

Posts: 22,281
Location: Blackpool. UK
Trades: 0
Quote:
Originally Posted by World View Post
Thanks!

I actually used #id in CSS as I have images with borders on my website (which I needed), so I created the rule for the buttons only (which are images, too).

Code:
#button_pricing  {
    border:0;
}
Worked like a charm.
Creating a rule for a specific ID does of course mean that you have to create the same rule for every individual image that is linked, as IDs have to be unique in the document.

A class applied to the linked images to turn off borders is one way;
Code:
img.no_border {
   border:0;
}
creating a rule that only applies to images inside a type of element is another.
This is for images inside anchors (<a>)
Code:
a img {
   border:0;
}
Or creating a rule for images in a specific container is yet another;
Code:
#navigation img {
   border:0;
}
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Growing old is mandatory - Growing up is optional
Code Samples | People Counting System | Bits & Bobs
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 03-16-2009, 03:50 PM Re: Getting rid of bright blue frames around image links in Firefox 3
spectrum3900's Avatar
Novice Talker

Posts: 8
Name: Jerome Heuze
Trades: 0
Hello,

I usually use the following CSS code:

img {
border: none;
}

But i agree you can make a global rule or make it for eavery selector and classes. Look at your code and see which class, ids or html tag you are using before you use the image... then add the border none to all images.


Just post some code and i will show you! HTML and CSS please!
Thank you,
__________________
Jérôme Heuzé
[w]: http://www.jeromeheuze.com/
Co-Founder and Design Director of OpenBookTutorials.com
spectrum3900 is offline
Reply With Quote
View Public Profile
 
Old 03-17-2009, 01:07 AM Re: Getting rid of bright blue frames around image links in Firefox 3
ItzPaul's Avatar
Skilled Talker

Posts: 55
Name: Paul
Location: Bay Area, California
Trades: 0
Yeah, those methods all work. There's usually a few different ways you can get things done.
__________________
My Make Money Online Blog - Real Case Study Blog
ItzPaul is offline
Reply With Quote
View Public Profile Visit ItzPaul's homepage!
 
Old 10-05-2009, 10:40 PM Re: Getting rid of bright blue frames around image links in Firefox 3
rednimaT's Avatar
Skilled Talker

Posts: 65
Name: Taminder B.
Location: San Jose, CA
Trades: 0
add the following code to your CSS stylesheet:
Code:
img {
    border: none;
}
if you want it only for one/few image(s) and not every single image, make the image code:
Code:
<img src="img.jpg" alt="Image" class="theimg" />
and add the following in the CSS stylesheet:
Code:
.theimg {
    border: none;
}
__________________
NRG Lab - Web Design Services & Resources
(HTML/PHP/MySQL/JavaScript/AJAX/SEO)

Last edited by rednimaT; 10-05-2009 at 10:41 PM..
rednimaT is offline
Reply With Quote
View Public Profile Visit rednimaT's homepage!
 
Old 10-09-2009, 01:43 PM Re: Getting rid of bright blue frames around image links in Firefox 3
Novice Talker

Posts: 12
Name: josh storms
Trades: 0
Thanks! I have been searching for this answer. It works!
__________________
Josh Storms
Rattlecake Diaper Cakes
Diaper Cakes
Rattlecake is offline
Reply With Quote
View Public Profile
 
Old 11-01-2009, 02:07 PM Re: Getting rid of bright blue frames around image links in Firefox 3
World's Avatar
Extreme Talker

Posts: 165
Location: Santa Monica, CA
Trades: 0
I have a variation of this problem.

Now, the linked thumbnails on my webpage have 1px black borders.

Firefox now adds the blue border for active link.

I can't do the border: none thing any more, as I'd be removing the black borders, too, which I need for my design.

What could I do instead?

Pseudo-classes, and telling Firefox to not put a border around when active? How do I write this?

Thanks.
World is offline
Reply With Quote
View Public Profile
 
Old 11-01-2009, 03:16 PM Re: Getting rid of bright blue frames around image links in Firefox 3
chrishirst's Avatar
Super Moderator

Posts: 22,281
Location: Blackpool. UK
Trades: 0
Code:
a:active {
    outline:none;
}
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Growing old is mandatory - Growing up is optional
Code Samples | People Counting System | Bits & Bobs
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 11-01-2009, 05:30 PM Re: Getting rid of bright blue frames around image links in Firefox 3
World's Avatar
Extreme Talker

Posts: 165
Location: Santa Monica, CA
Trades: 0
Thank you very much, Chris!

Unfortunately, it doesn't work completely.

The outlines are no longer blue, but dotted and black, and they describe the area of including margin and padding.

Last edited by World; 11-01-2009 at 05:42 PM..
World is offline
Reply With Quote
View Public Profile
 
Old 11-01-2009, 05:47 PM Re: Getting rid of bright blue frames around image links in Firefox 3
World's Avatar
Extreme Talker

Posts: 165
Location: Santa Monica, CA
Trades: 0
I found the solution.

To get rid of the dotted outline, this works:

Code:
*:focus {
outline: none;
}
The reason why a:active isn't enough, as the dotted line appears in the focus state of a link.
World is offline
Reply With Quote
View Public Profile
 
Old 11-01-2009, 11:57 PM Re: Getting rid of bright blue frames around image links in Firefox 3
LadynRed's Avatar
Super Moderator

Posts: 8,823
Location: Tennessee
Trades: 0
You really shouldn't remove those dotted lines, they are meant for ACCESSIBILITY, so removing them is detrimental to people using assistive technologies.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Getting rid of bright blue frames around image links in Firefox 3
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 



Page generated in 0.15369 seconds with 13 queries