HTML - Hyperlink Images = Purple Border? :s
I'm making an HTML design on notepad, and I got some images for links, but when I view it on a webpage, the images have a purple border. How to I remove this?
Similar TutorialsHi, I am getting a boder in firefox for a hyperlink image. this is the code <a href="default.aspx"><img src="Images/Home.gif" width="100" height="20" alt="Home" border="0"></a> It's working fine in IE6 but i am getting a blue border in firefox. Can someone tell me how to solve this problem? Thanks Raja Hi, I am using Dreamweaver CS3 to create a site, by default i have learnt that when you use an image as a link to another page, dreamweaver creates a coloured border around your linked image. I have since been able to get rid of this border by adding border="0" into my img tag however this now has caused my rollover not to work before clicking on the image to take you to the linked page. this is my code; any ideas how i can fix this? <td colspan="4"> <a href="About Us.html"><img src="images/About_Off.jpg" border="0" alt="About Us" name="Aboutus" width="120" height="64" id="Aboutus" onMouseOver="MM_swapImage('Image2','','images/About_On.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td> <td colspan="6"> Any help would be greatly appreciated. For some reason, in IE8 (or all IE's, for all I know) there is a mysterious little purple line at the bottom left corner of all of my navigation button images, excluding the first one. In FF it works just fine..Chrome, Safari and Opera I don't have, so for all I know it could just be FF that's displaying it correctly. Here's my code: HTML HTML Code: <a href="index.html" style="margin:0"> <img src="images/nav_home.png" alt="HOME" onmouseover="this.src='images/nav_home_hover.png';" onmouseout="this.src='images/nav_home.png';" /> </a> <a href="the-author.html"> <img src="images/nav_author.png" alt="THE AUTHOR" onmouseover="this.src='images/nav_author_hover.png';" onmouseout="this.src='images/nav_author.png';" /> </a> <a href="contact.html"> <img src="images/nav_contact.png" alt="CONTACT US" onmouseover="this.src='images/nav_contact_hover.png';" onmouseout="this.src='images/nav_contact.png';" /> </a> CSS Code: img { border: 0px; margin-left: 1.75em; } I also attached a screenshot. Thanks, C-Style Hi, Iv'e been trying to do something for a while. I need to send an image linking to my myspace page using windows hotmail. Iv'e tried searching for html code but can't figure it out. Anyone can help me with this? Cheers I mean to say that when you make an image and want certain sections of it to link to one page and another section of it to link to another whats the code for this? I've been looking everywhere and can't find it anywhere Is outputting --- Creating linked images < a href= "default.htm"> --- as a line of text next to the image, instead of embedding a link in it. Any ideas what's going on? This is the code: <?xml version = "1.0" encoding = "utf-8"?> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Using image as hyperlink </title> </head> <body> <p> Creating linked images < a href= "default.htm"> <img src = "DSC00123.JPG" width = "92" height = "100" alt = Testing out stuff> </img> </a> </p> </body> </head> </html> Hiya! My question today is- how do you disable the border that pops up when clicking on an image, either in HTML or DW, doesn't matter. Thanks! Example: I have this theme that I'm using for a project and I can't find where I made the mistake in the HTML ... the Header/title is supposed to be the color of the text, but for some reason it's purple ... This is the website: http://simplybeautifulinmtl.tumblr.com/ And this is the HTML (I deleted a bunch of it that had no relevance and this is what's left ... I know it's asking a lot but can someone help me?): HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>{Title}</title> <META NAME="Title" CONTENT="{Title}"> <META NAME="Description" CONTENT="{MetaDescription}"> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> <meta name="color:Title" content="#fffdf7"/> <meta name="color:Background" content="#fff"/> <meta name="color:Text" content="#fffdf7"/> <meta name="color:Link" content="#000000"/> <meta name="color:LinkHover" content="#fffdf7"/> <meta name="color:LinkBackground" content="#FFECF3"/> <meta name="color:LinkHoverBackground" content="#F1F0F0"/> <meta name="color:DescriptionBackground" content="#F1F0F0"/> <meta name="if:Large Photos" content="1"/> <meta name="if:Show Archive Link" content="1"/> <meta name="if:Show RSS Link" content="1"/> <meta name="if:Show Random Link" content="0"/> <meta name="if:Show Likes Link" content="0"/> <meta name="if:Show Mobile Link" content="0"/> <meta name="if:Show Description" content="0"/> <meta name="if:Fixed Header" content="1"/> <meta name="if:InfiniteScroll" content="0"/> {block:IfInfiniteScroll} <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/mFbkoqlkr/tumblrautopager.js"></script> {/block:IfInfiniteScroll} </script> <style type="text/css"> hr { display:none; } img { border:0px; } body { background: {color:Background}; color:{color:Text}; font-family:' georgia, sans-serif; font-size: 0.75em; /* 12px */ margin:0px; padding:0px; letter-spacing: 0.1em; } } } a:focus { outline: none; } /* ---------------------------------------------------- Funky **** ------------------ */ ::selection, a::selection, img::selection { background: {color:Text};; color: {color:Text};; } ::-moz-selection { background: {color:Text};; color: {color:Text};; } /* ---------------------------------------------------- Header ------------------ */ header { display: block; margin: 40px auto 20px auto; width: 820px; text-align: center; } header.fixed { position: fixed; width: 100% !important; } header h1 { font-family: Georgia, sans-serif; display: block; font-size: 4em; -webkit-margin-befo 0em; -webkit-margin-after: 0em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; margin-bottom: 5px; font-weight: normal; color: {color:Text}; } header h1 a { font-weight: normal; text-decoration:none !important; } nav a { color: {color:Text}; padding: 3px 5px 1px 5px; margin: 0 2px; background: {color:LinkBackground}; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-decoration:none !important; } nav a:hover { color: {color:Text}; background: {color:LinkHoverBackground}; } div.wrapper { display: block; margin: 0px auto 100px auto; {block:IfFixedHeader} padding: 115px 0 0 0; {/block:IfFixedHeader} width: 500px; text-align: center; color: {color:Text}; } div.description { float:left; margin-top:0px; padding: 5px 10px; } /* ---------------------------------------------------- Text ------------------ */ .text { width: 500px; margin: 25px auto 125px auto; line-height: 1.6em; } .text .caption { font-size: 1.66em; /* 20px */ text-decoration:none !important; } /* ---------------------------------------------------- Stuff ------------------ */ div.tumblrAutoPager_page_info { display:none; } #back-top { position: fixed; right: 15px; bottom: 10px; font-size: 0.83em; } #back-top a { color: {color:Text}; padding: 3px 5px 1px 5px; margin: 0 2px; background: {color:LinkBackground}; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-decoration:none !important; } #back-top a:hover { color: {color:Text}; background: {color:LinkHoverBackground}; } {CustomCSS} </style> </head> <body> <header {block:IfFixedHeader}class="fixed"{/block:IfFixedHeader}> <h1><a href="/">{Title}</a></h1> <nav> </nav> </header> <div class="wrapper"> {block:IfShowDescription} {block:Description} <div class="description"> {Description} </div> {/block:Description} {/block:IfShowDescription} </div> <!---------------------------------------------------------------------------- POSTS -----> <Div class="autopagerize_page_element" id="posts"> {block:Posts} {block:Text} <div class="text"> {block:Title}<a {block:IndexPage}href="{Permalink}"{/block:IndexPage} class="caption">{Title}</a>{/block:Title} {Body} {block:Date} <div class="permalink"><a href="{Permalink}" class="permalink">❖</a></div> {/block:Date} </div> {/block:Text} I have a problem with Firefox. Although I am using set no border on a href and img tags I still get a border. Other browsers don't have this. This is my code, I've set the link border and image border to orange and pink dotted lines to show the black solid line. When I set these to no border the black line remains. Quote: <html> <head> <style> A:link, A:visited, A:active, A:hover { outline: none; background:none; border:5px dotted orange; padding: 0;text-decoration:none} img { border:5px dotted pink; display:block; margin:0; padding;0; } </style> </head> <body> <a href="/" > <img src="./img/bretzy-wht.gif" > text </a> </body> </html> You can see it live he http://tetsuo.gol.ad.jp/bretzy/new.html Thanks in anticipation. Brett how do I make it so that a regular html image link (<a href="bla.html"><img src="bla.png"></a>) does have the blue frame around when it hasn't been clicked and the purple when it has? Thanks I have had this problem on almost all the websites I've made and I'm too picky to let it go... When I make the navigation images/buttons for a website, I set the border to zero as usual and link each image to its respective page. But, when I click on the image to take me where it's supposed to, this pesky dotted border appears around the edge of the image after it has been clicked and it remains there until I click on something else on that page. (This also happens to text links when clicked, but I'm not too worried about the text links.) For the websites I've made that go to an entirely new page after an image link is clicked, the dotted line appears around the linked image after it's clicked and before the next page has loaded, but then after the new page loads the dotted line is gone. But, for websites I have built that utilize frames, because the new page that loads is in an iframe, and because the page the navigation buttons are located on never changes, the dotted border stays around the image after its been clicked and, like I mentioned earlier, doesn't go away until I click on something else on that same page. An example of this can be seen when you click the images in the navigation column along the left side of a website I built located at the following URL: http://www.djprogress1.com/ This border problem could be specific to my website browser (I use Firefox), but I am not sure. And the border could be added entirely by the browser and there may be no way to get rid of it through coding, but again, I am not sure of this. So, does anyone know if anything can be done to fix this or am I stuck with these dotted borders? Thanks, Jase http://profile.myspace.com/index.cfm...ndID=450190416 im trying to make all that white space to that same purple 990088 i think it is what code would i put into the layout code to do that? I have a webpage filled with url links and of course the text turns purple when clicked on. How do I change this so the text stays blue even after being clicked on? Do I have to add html code for each link, or is there a way to do it for the entire page? Hi there, I'm trying to create a hyperlink that opens a word document. The filename is "C# Essentials.doc". I have the right path, and can open files that don't include special characters in their filenames, but I don't have the hang of putting special characters such as "#" into a hyperlink. Could anyone advise me the code to use for the filename? Thanks! F Hi everyone, I want to know how to make a hyperlink open in different page/tab. So im left with the original page and the hyperlink has opened in another tab. Thanks for all of your help. Hi Again, I'm trying to get the titles in my sidebar to link to the main frame (I have created 2 columns). For some reason the code is not making a hyperlink (this is borrowed code). Any ideas? <div class="leftMenuTab" onmouseover="menuMouseOver(this);" onmouseout="menuMouseOut(this);" onclick="window.location.href="c:CASARA Website/whatwedo.html" TARGET="main page"">What We Do</div> On the upside, all of my grief is on the first page. The rest of what I'm doing is much easier for me so hopefully I'll be out of your hair soon! hi how to add other styles to hyperlinks? Hello, I need to create a hyperlink however the website itself (The link) is very long and the html doesn't capture all of it. For eaxmple I want to use this text " Address " so it will take me to a very long link from mapquest of from yahoo maps. If you have an idea how to do it, it would be great. Guyav99. Hello, My question seems simple but I'm having a hard time figuring it out. Basically I have shadowbox (like lightbox) installed on my site and it works great with hyperlinks but not so well with form submit buttons. After trying to figure out how get shadowbox to work with forms, with no luck, I'm trying a different option. Hyperlinks. Since shadowbox works so well with links, Is there a way that I can have some hidden form values, along with form drop downs and the like, transfered over to a link that will then launch into shadowbox? I read about javascript being able to do this but can't find any good solutions. Any help? Hi can anyone help me with hyperlinking this group of images to the same url and so that they dont have a border. This is my site www.freewebs.com/out-and-out The images are the ones under 'team roster' on the index page. i have tried a few things but the images keep going missing. Code: <tr> <td> <div class="content"> <center> <img src="./images/thumb.jpg" alt="" /> <img src="./images/thumb.jpg" alt="" /> <img src="./images/thumb.jpg" alt="" /> <img src="./images/thumb.jpg" alt="" /> <br /> <img src="./images/thumb.jpg" alt="" /> <img src="./images/thumb.jpg" alt="" /> <img src="./images/thumb_hover.jpg" alt="" /> <img src="./images/thumb.jpg" alt="" /> </center> </div> </td> </tr> |