This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
How do I remove a purple box from an image that appears right after I make it into a link?

I have done this for many years, however, now that Bravenet has made the changes, my technique in the visual editor no longer works. Please help.

The code for this page and link is as follows. If you can let me know what I need to change so that the purple box cannot be seen, I would greatly appreciate it.







Browser: IE8 and Mozilla Firefox

OS: Windows Vista

Re: How do I remove a purple box from an image that appears right after I make it into a link?

You need to use Bravenet's "bb code" to hae the forum display code properly.

Anyway, the code below is what you were trying to post. The blue border is the default, when you wrap a "img" tag in a link. To get rid of it, you need to set the "border" attribute for the "img" tag to "0". That is not something new or something that Bravenet has any control over. However, Bravenet may have made changes to how the Visual editor applies attributes.

Code:
<html>
<head>
</head>
<body>
<a href="http://brainiac.mmt111.com/quiz_k_math_1.html">
<span style="text-decoration: underline; background-color: rgb(255, 255, 255); border: 0px solid;">
<img src="http://brainiac.mmt111.com/button_sample.jpg" />
</span></a>
</body>
</html>


The code above has a useless "span" wrapped around the "img" tag. This may be an artifact of the Visual editor but you can fix the problem in the Text editor. Just delete the "span", and it's terminator, and then apply the "border" attribute directly to the "img" tag".

Code:
<html>
<head>
</head>
<body>
<a href="http://brainiac.mmt111.com/quiz_k_math_1.html">
<img src="http://brainiac.mmt111.com/button_sample.jpg" border="0" /></a>
</body>
</html>


The following will also work, although it is still considered "quick and dirty".

Code:
<html>
<head>
</head>
<body>
<a href="http://brainiac.mmt111.com/quiz_k_math_1.html">
<img src="http://brainiac.mmt111.com/button_sample.jpg" style="border-style: none" /></a>
</body>
</html>


If you have a lot of linked images, you may want to add something that's a little more global. Since you are not using a external style sheet, you can add the following code, between the "head" tags of your web page. This will set the "border" attribute for all "img" tags on your page.

Code:
<style>
img { border-style: none; }
</style>


As time goes on, many of the attributes, applied directly to tags, are being depreciated. Future browsers may not support them. If you manage your formatting with styles, like the "img" style above, your coding will be simpler and be more compatible with other browsers.

I see you have already fixed your main web page, and your test page, but I thought others might be interested in the fix.

Browser: Firefox, Internet Explorer

OS: Solaris 10, Redhat, Centos, Fedora

Re: How do I remove a purple box from an image that appears right after I make it into a link?

Wow, You sure did offer some great information, especially to someone like me who has learned to do EVERYTHING regarding website design within Bravenet's visual editor. Thank you very much for all of your tips, especially the last code to make all of the boxes around the links disappear. THANK YOU!

-Jenn

Browser: IE8 and mozilla firefox

OS: Windows Vista

Re: How do I remove a purple box from an image that appears right after I make it into a link?

Can you also give me any idea of where to find more information on all of these codes and what they do?

Browser: IE8 and mozilla firefox

OS: Windows Vista

Re: How do I remove a purple box from an image that appears right after I make it into a link?

The place I use as a reference is W3Schools Online Web Tutorials. They do a nice job of presenting you with editible examples to show you how it's done. Click on the HTML tab in the menu to learn about basic HTML coding. Then on CSS to learn how to apply Cascading Style Sheets to your pages and manage your layouts.

Another good source of HTLM/CSS layout design is Dynamic Drive CSS Layouts. They provide CSS enabled layouts for almost any configuration you can think of. They include the CSS in with the HTML so you can easily see how the styles manages the HTML.

Right now you are using the on-line Visual editor. I don't consider that a very good editor. It tends to delete important lines of code, like all "DOCTYPE" tags. DOCTYPE tags are important when you are trying to get your pages to look the same in all browsers. For all my web pages, I use a text based editor named HTML-Kit. The Build 292 version is free and can be configured to upload your pages directly to your web site.

Or, you might want to try KompoZer. KompoZer is a free graphic based web page design tool, that's pretty easy to use. I use the stable version, V7.1, but there is a newer Beta release available, V8b3. KompoZer has built in upload capability (FTP), making it simple to update your site off line, and then just upload it to your web site.

Browser: Firefox, Internet Explorer

OS: Solaris 10, Redhat, Centos, Fedora