IE Showing - How to Remove Image Blue Link Border Color, Firefox Look, Dreamweaver
Jul 26th, 2008 | By Adobe-Masters.com | Category: Dreamweaver, Tutorials | 23,605 views | Subscribe | PDFWhen it comes to web design Internet Explorer (IE) compatibility can always be an issue.
My new auto insurance page from the Make An Auto Insurance One Page Template in Dreamweaver Tutorial showed strange blue link borders in IE around my images , as shown below.
IE Showing - How to Remove Image Blue Link Border Color, Dreamweaver
I wasn’t very happy with the blue lines, so here’s the code I used to remove them.
a img {border: none; }
That little code above should be added your stylesheet if you’d like like to remove the blue link borders from your site. The stylesheet would be your css file. The page is probably better without it.
Same Firefox Look
But what I really wanted to do was to make it show the way it shows in Firefox. I wanted it to show the yellow links I put in. The images are linked so they should show that in IE too.
a img {border: #FFFFCC; }
Instead of not using a border, I inserted yellow color code. Now I have the look I want showing in the IE browser.
Just when I thought is was over…
Now the yellow border is good in IE, but it doesn’t show on firefox.
One last change including the mouseover…
a img {
border: 1px solid #FFFFCC;text-decoration: none;
}a:hover img{
border: 1px solid #663300;
}
Finally, the page is identical in both browsers.
Last step: Tweet This
You’ll need this page again, so go ahead and “tweet it” for easy access in the future.
Don’t forget to subscribe for free site updates.
Thank you for visiting Adobe-Masters.com. Don't forget to subscribe for free updates!
[...] If you’ll be adding links to any of your images, click here to edit the link [...]
[...] it, unless you want Add A Horizontal Menu with Button Images, adjust colors and image borders, or add some personal edits. By now, your New Wine Affiliate Template should be ready to [...]
Hi,
Thanks for the tut. Your trick to remove the blue boarder in IE really did the trick. I have been using Joomla! and editing in Dreamweaver for about 6 months and found your article very helpful.
Thanks again!
RossM
If you need to know HOW TO DO IT, I highly recommend Adobe-Masters.com.
Site General
SiteGenerals last blog post..Make a Content Box, Text Box with Tabs
You’re the Man!!!
Worked like a charm!!!
And it also saved my job!!!
Brotherman… you absolutely ROCK. Adding that one tiny line to the top of my style sheet just saved me hundreds of border=”0″’s. Thanks!
thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks thanks a lot. I was pissed of with this problem. Thanks again
easy and simple, thanx for the tip.
If you put these style lines in the header of the HTML(and not in the CSS file) it would effect only the current page and not the entire site. worked great!
Thanks. I also seemed to need to include a:visited img to get rid of an annoying purple border that came up in Firefox after clicking an image.
Great tutorial, I only draw but will pass your post address to my programmer. He will check your tips. Thanks for sharing.
Regards,
Matt Kolorowanki,
Illustrator
Thanks for this tutorial, do you have any tutorial in web design, I’ll wait your reply in the thread. Thanks
Thanks for sharing this tip. This will help many designers.
Hello, and thanks for posting this. Found your site just browsing around the web. Quite informative.
The art of writing cross-browser code is highly appreciated by employers. Thank for the tip, will add it in my collection.
Thanks for the tip, just recently has faced this problem and fix it with your help!
Wow!!easy and simple code great.Thanks for sharing this tips.
Worked good thanks. I’m awful at coding appreciate this tip!
I also have a situation where I want to delete the border around the images but am not able to do so in Internet Explorer. I managed to find the culprit in the style.css stylesheet and changed to zero — and now it works fine in Firefox.
Thank you for this good tip, works great
Hi! My problem is different - on my blog whenever i click any image link for example twitter icon ,..after click it generates border and not before clicking. So what should i do to get rid of that border (after click or just after drag and drop) am using blogger template. Please help thanks.