HTML - Using An Image As A Border

Hi, I'm new here, and even new to coding websites. Well, it's going pretty well this far I think, but I have one problem now. I have placed a picture/logo which I have turned into a link. It's working very well and looks great, in Google Chrome! But in IE there's a "border" which is blue, and with mouse over it's red. Like all the other links on my site. But I don't want this "border" to be there, just like in Chrome. I have tried almost everything to remove it, but I can't. And I can't even figure out why it's there.

Can somebody help me?

Thank you.

Best regards Thomas.

Hello
I'm new to this forum so I hope I'm posting this in the correct pace. I'm not even sure its possible but I would like to assign an image to a border. The main idea is that I can then use some gradiant images to create a gradient border. Does anyone know if this is possible in HTML?

If not how do I acheive this affect. I've seen it on other pages and really like the look of it.

Thanks

Paul

my website

http://www.Avalon-Press.com

you see the I Frame in the Middle,
i think it would look cool to have like a cool little border around it because its a little plain..
can anyone tell me how i can do this?

and maybe where to go to to find some borders?

i kinda want something similar to this websites.
http://www.thenewaddiction.com/

or if you have any other suggestions to my website, i would totally appricate it.

- Mike Perez
http://www.Avalon-Press.com

Hi All,

Not sure if this is the ideal place for this because im just looking for advice.....

But here it goes

Im currently in the process of re-designing my works websitebecause the pleb that done it before obviously had no idea what he was doing...

w3c - 96 Erros and 1 warning! on the landing page :-O........

im sticking to the current back ground as that goes with the branding of the company the page im working on is the "Apply Now" page, where the user will fill in all details regarding them self and then goes on to the insurance details...(See attached image) im currently using a gradient which is designed in CSS no Repeat of images lol!!

im just trying to think of what sort of back ground color or even maybe not a background color just a border?

which will look after all the texts/DropDown boxes etc...

I wanna bring the site in to 2011!! not leave it how it is!

the background im using is the Gradient attached image.

Any advice or maybe some images of designs or techniques to achieve a good looking form whilst keeping a professional site would be highly appreciated.

I refuse to use a gray BackGround!!!! :-)

p.s the company is an Insurance Company

<MAP NAME=mymap>
<AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195">
<AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195">
<AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195">
</MAP>
<IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200>

I want to show black border arround each area and also show hover effect

How can I do this.

I tried to add border to style attribute of area tag. but to no result

At this guys website he has his "My Personal 100% Money-Back Customer Satisfaction Guarantee" that I'm trying to recreate. It's halfway down the page.
www.thecopydoctor.com

this is the URL to the certificate image border:
http://www.thecopydoctor.com/images/certBorder.gif

I'm just getting into HTML and my best guess is he made a div tag and used that little image as the top,right,bottom & left border. He got it to repeat all around the inside of the div. When I try this in Dreamweaver I can only get the image to go along the left or the top of the div's border.

Can someone help me recreate this?

Hi guys

Just joined and hoping someone can offer some advice on an issue.

I want a black border around images which show up jsut fine in IE but some reason the border does not appear in FF. The below is an example of what i am doing.

<IMG STYLE="position:absolute; TOP:110px; LEFT:610px; WIDTH:180px; HEIGHT:190px" src="Optimized-027edited.jpg" style="border-style: solid; border-color: black;"/>

Does anyone have any advice on where what I can do to make the border show up in both browsers?

Any help appreciated.

Cheers

Okay. I'm trying to make it so when you mouseover a players "avatar" the border color changes from grey to red.

The following code works PERFECT in IE, but FF, the border doesn't show up at all.

CSS Coding:

Code:

   img.avatar {
    border-color : #CCCCCC;
    border : 1px
   }
   img.avatar:hover {
    border-color : #ff0000;
    border : 1px
    }   
   img.avatar:visited {
    border-color : #CCCCCC;
    border : 1px
   }
   img.avatar:hover {
    border-color : #ff0000;
    border : 1px
    }

HTML Coding:

Code:

<TD align=middle width=104>
<DIV align=center><A href="Link"><IMG class=avatar height=75 alt="" src="Image URL" width=75></A></DIV></TD>

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.

at one of the websides that im making, i have a small problem, when i press on an image that i have maked a link there is getting a line of dots all around it, and i cant find any code or script that can remove it..

can any one help me?

Hi all --

I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.

I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.

I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.

Help! How do I get rid of this white space but still keep the link on the image??

[I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having]

Thanks in advance!
//kl

PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner.

CSS:
Code:

<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
 
</head>

Nav Banner:
NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space...
Code:

<body class="oneColFixCtr">
 
<!-- MAIN NAVIGATION BANNER -->  
<!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br />

can anyone tell me how this is done? the border can be seen on the football manager site hattrick. thx

Hey Guys

I have a 1px X 5px image and I am trying to wrap a border around it. It looks fine in FF but in internet explorer there is a small gap. See images below:

FireFox:


IE6:


Here is the coding:

CSS:
HTML Code:

#tabUnderline {
	border : solid 1px #aaa9a9;
	background-image : url(images/buttons/tab_underline.gif);
	background-repeat : repeat-x;
	height : 3px;
}

HTML:
HTML Code:

<div id="tb"><div id="tabUnderline"></div></div>

Where in my CSS would I add a border and border color?


html,body {
height:100%;
margin:0;
}
body {
background-color:#000;
background-image:url(../images/background.jpg);
background-attachment:fixed;
background-size:100% 100%;
}
#container {
width:700px;
padding:40px;
border-right:1px solid #003;
border-left:1px solid #003;
margin:auto;
background-color:rgba(0,0,0,0.5);
color:#ccf;
box-shadow:#000 0 0 10px;
}