IE Showing - How to Remove Image Blue Link Border Color, Firefox Look, Dreamweaver
Jul 26th, 2008 | By Adobe-Masters.com | Category: Dreamweaver, Tutorials | 16,700 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.
[...] 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.