CSS - Trying To Eliminate Image Link Border

I have an image I am using for my submit button, it has this "Link Box" around it that I want to go away. I just want the image shown and not the border or whatever is happening here.

I assume it is because it is a link. I use an external style sheet for the rest of the page, so if there is a suggestion for me to reference a style from the style sheet, this would be a huge help.

I have read about everything I could and still cannot find my answer.

Is there a way to get rid of the box around my image using CSS?

Here is what I have:

<input name="imageField" type="image" onClick="return valLoginForm(frmLogin)" src="images/b_login.gif" width="60" height="18" >

Thank you for your help.

Hi,

Im having problems with a link.

when I click on the link a grey dotted border appears around the element, and remains there until i click somewhere else on the page (the link is actually a JS onclick event)

Any ideas?

Xaphan

edit:
tried the :active and :focus pseudo-classes, but to no avail.

I've got this odd border appearing around my link when I click on it and after it's been clicked on until I click elsewhere on the page (or if I click on it again to fold accordion). I'm not sure whether this falls under CSS or JavaScript as it's an accordion list through jQuery.

I've tried adding border: none; and that did nothing. Any help greatly appreciated!

I can't set the border around my links in a drop down list, not the top level or 2nd level.

I do it on #nav (id for whole 2 level lists group) on all these to make sure but no black border.

#nav a {..}
#nav ul {...}

#nav ul li { ...}

#nav li { /* all list items */
float: left;
background: lightblue;
width: 100px; /* width needed or else Opera goes nuts */
border-width=1 1 thin thin;
border-color=black;

Can any of you tell me why with the a:link/visited set with border:none
(as in the example at the bottom of the e-mail), I get a box around an
image inside a link:

<a href="communication.php"><img src="resources/president.jpg"></a>

Working on a MAC, I noticed that the border only appears in
Firefox but not in Safari, Opera and OmniWeb. Can anyone
tell me why this border appears around the image, why only in FF, and of course, how one can make it dissappear using the stylesheet?

STYLESHEET:

a {text-decoration: none;}
a:link { color: #000000; border: none;}
a:visited { color: #000000; border: none;}
a:hover { color: #bbbb00; border: none;}
a:active { color: #000000; border: none;}

.image{border-width:0px; border: none;}

I use the following CSS for my links, and use a border-bottom to give them a dashed underline...

Code:

a { 
color: #AC4870; 
border-bottom: 1px dashed #DDDDDD; 
text-decoration: none; 
} 
a:hover { 
color: #DDDDDD; 
border-bottom: 1px dashed #AC4870; 
text-decoration: none; 
} 

This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links?

Thanks

I want to use an image as a border using xhtml and css.
The border goes around the bottom and the right of an area on my page that has a fixed with an a variable height.

As Image borders won't be implemented in css until css3, I attempted to do it using layers of spans with background images along the sides. It resulted in a page that renders incorrectly and differently in the three browsers i tested it in (firefox,ie,opera).

Visual Examples: (attached)
theoretically.png -> What it should look like at this point
ie.png -> how ie renders it
ffx.png -> how firefox renders it
opera.png -> how opera renders it.

Here is the code so far:
xhtml:
Code:

<div class="PageBody">
        <span class="PageBody_RightBgLayer">
            <span class="PageBody_BottomBgLayer">
                <span class="PageBody_RightBottomCornLayer">
                    <span class="PageBody_FinalLayer">
                    hello
                    <br />test
                    <br />test2
                    </span>
                </span>
            </span>
        </span>
    </div>

css:
Code:

.PageBody
{
	position:absolute;
	left:0px;
	top:110px;
	background-color: #ffffff;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
.PageBody_Corner
{
	position:absolute;
	right:0px;
	bottom:0px;
}
.PageBody_Right
{
	position:absolute;
	right:0px;
	top:0px;
}
.PageBody_RightBgLayer
{
	background-image: url("../Images/PageBody/right.gif");
	background-position: right;
	background-repeat: repeat-y;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
.PageBody_BottomBgLayer
{
	background-image: url("../Images/PageBody/bottom.gif");
	background-position: bottom;
	background-repeat: repeat-x;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
.PageBody_RightBottomCornLayer
{
	background-image: url("../Images/PageBody/corner.gif");
	background-position:right bottom;
	background-repeat:no-repeat;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
.PageBody_FinalLayer
{
	margin: 0px 13px 12px 0px;
	width:600px;
	min-height:300px;
}

Is there any way to fix this or am I going about it wrong?

Thank you,
Benjamin Prosnitz

Hi,

I am trying to get a border around an image but nor a normal border; a grey border of 10px then a white border of 20px and then the actual image.

I am not sure if the following is the best way to achieve this result. However even if so I am having some problems with FireFox.

Basically my first attempt is as follows: I wrapped the image inside a <div> element. Therefore my XHTML syntax is something as follows: Code:

<div class="image">
		<img src="hello.jpg" />
	</div>

I then applied the following CSS: Code:

<style>

	div.image{
		border: 4px solid #ccc;
		background-color: #fff;
		width:1px;
}
	
	div.image img{
		margin: 8px;
	}

</style>

Now like this I get a good result in IE6 but not in FireFox. I cannot really understand why. I know there is a containment hack but is it really needed in this case? if so why? Also is there maybe an easier way to achieve this?

Regards,
Sim085

ps: I did a fast test. On IE7 it works with the transitive doctype but not with the strict doctype. This I guess means I am breaking some rule I would like to continue with the strict doctype however.

I have a two toned border that I want around my page and I need the corners to flow nicely (not rounded or anything, but continuous) and I'm attempting to do this with images... I actually only need the border for the bottom right of my page and I've tried doing this a number of ways...but unless I'm missing something, css doesn't allow for border-image properties....?????

I am having a rather annoying problem with Internet Explorer 6 not putting the proper padding between the CSS border and the image. You can see the problem he http://www.sdstyle.org/article.php?id=101

Basically, there ought to be a six pixel white border and then a one pixel gray border around the images and the breakout in the middle of the page.

The offending code is: Code:

.article_image {padding: 6px; border:1px; border-style:solid; border-color:#ccc; margin-bottom:8px;}

...and for the image:

<img src='images/articles/101_image_1.jpg' class='article_image'>

This works fine in Gecko (Mozilla and Firebird) and on Mac IE. I've read there is a bug in IE's handling of CSS (shocking...), am I running into that problem? I tried doing a search here and on Google, and for some reason all of the other solutions I've tried didn't work.

Thanks in advance!

Hey,
I have a small Problem with my Border Div. It doesn't get the height from the content-content div.

Html:
div Code:
Original - div Code <div id="content"> <div class="content-border content-border-left"></div> <div id="content-content"> <div id="maincontent"> ###MAIN_CONTENT### </div> <div id="statecontent"> ###STATIC_CONTENT### </div> </div> <div class="content-border content-border-right"></div> </div>

  

 <div ID="content">


      <div class="content-border content-border-left"></div> 


      <div ID="content-content"> 


           <div ID="maincontent">


                ###MAIN_CONTENT###


           </div>


           <div ID="statecontent">


                ###STATIC_CONTENT###


           </div> 


      </div>


      <div class="content-border content-border-right"></div> 


 </div> 

The both border div should get the height from the content-content. But every time he just uses the min-height. If I write height: 100% on the border div, he will use every time a height higher then the content-content.

What should I do?

CSS:
css Code:
Original - css Code #content { margin: 0px auto; width: 800px; text-align: left; font-family:Verdana; font-size: 11.5px; } .content-border { float:left; width: 2px; height: inherit; min-height: 300px; background-repeat: repeat-y; } .content-border-left { background-image: url("../images/border_left.png"); } .content-border-right { background-image: url("../images/border_right.png"); } #content-content { float:left; width: 796px; height: inherit; background-color: #D8DEE2; } #maincontent { float: left; height: inherit; width: 531px; } #statecontent { float: left; height: inherit; width: 264px; }

  

  


 #content {


     margin: 0px auto;  


     width: 800px;


     text-align: left;


     font-family:Verdana;  


     font-size: 11.5px;   


 }


  


 .content-border { 


     float:left; 


     width: 2px;


     height: inherit;


     min-height: 300px;


     background-repeat: repeat-y;


 }


  


 .content-border-left { 


     background-image: url("../images/border_left.png");


 }


  


 .content-border-right {


     background-image: url("../images/border_right.png");  


 }


  


 #content-content {


     float:left;        


     width: 796px;


     height: inherit; 


     background-color: #D8DEE2;


 }


  


 #maincontent {


     float: left;


     height: inherit;  


     width: 531px;


 }


  


 #statecontent {


     float: left;


     height: inherit;  


     width: 264px; 


 } 

I use a border-image which has a width of 2px.

Thank you in advance for your help.

Loki1991

I'm trying to use images for my border, but for some reason it isn't working. Here is my code:

Code:

/* This is the border line & background colour round the entire page */ 
.bodyline { 
  border-top-image: url(images/top.gif); 
  border-top-right-image: url(images/topRight.gif); 
  border-right-image: url(images/right.gif); 
  border-bottom-right-image: url(images/bottomRight.gif); 
  border-bottom-image: url(images/bottom.gif); 
  border-bottom-left-image: url(images/bottomLeft.gif); 
  border-left-image: url(images/left.gif); 
  border-top-left-image: url(images/topLeft.gif); 
} 

The path to the images is right, so that's definitely not the problem. Can someone help me out?

Hi all,

How do you put in a image border in the css. I use the following code and it does not seem to work:border-bottom-image:url(../images/borderLeft.bmp);

If you can't do this then how do you put 2 borders in the css

Stephen

I want white background and a image on 2 sides of this i thought of just added border but can't seem to find out how to get 2 image on the border.

Any help would be great.

I have tried every suggestion that I can find on the web, and still IE insists on putting spacing between cells in my tables when I don't want it.

Just go to my home page: www dot jamescobban dot net (Why can't I just post my website address?) In the bottom frame I use a table to hilight my contact addresses. On FFox the borders are solid because FFox honors the Code:

border-spacing: 0px

in my styles. But IE ignores it. It also ignores the Code:

padding: 0px

in the style defined for the individual cells. I have tried Code:

border-collapse: collapse

, but that merges the borders so that the cells are only separated by 2px of border when I want to total of 4px. OK I could make this particular table look the same on both by using border-collapse and defining the borders as 4px wide, but that would not address other tables I have where the borders are more complex and I really do need to keep the cell borders and the table border distinct. I just want to get rid of the d....d spacing!

html Code:
Original - html Code <hr> <table class='contacts' > <tr> <td class='contacts'>Phone:</td> <td class='contacts'>E-mail to:</td> </tr> <tr> <td class='contacts'>Phone: +1-613-592-9438 <br>FAX: +1-613-592-9438</td> <td class='contacts'>&nbsp;<a href="mailto:jamescobban@sympatico.ca">JamesCobban@sympatico.ca</a></td> </tr> </table>

  
<hr>
<table class='contacts' >
<tr>

<td class='contacts'>Phone:</td>

<td class='contacts'>E-mail to:</td>
</tr>

<tr>

<td class='contacts'>Phone: +1-613-592-9438
<br>FAX: +1-613-592-9438</td>

<td class='contacts'>&nbsp;<a href="mailto:jamescobban@sympatico.ca">JamesCobban@sympatico.ca</a></td>
</tr>
</table>

css Code:
Original - css Code <style type='text/css'> table.contacts { border: solid 2px #008000; width: 100%; padding: 0px; border-spacing: 0px; background: #99FF99; } td.contacts { border: solid 2px #008000; font-family: sans-serif; padding: 0px; } </style>

  

    <style type='text/css'>


     table.contacts    { border: solid 2px #008000; 


             width: 100%;


             padding: 0px;


             border-spacing: 0px;


             background: #99FF99;


             }


     td.contacts       { border: solid 2px #008000;


             font-family: sans-serif;


             padding: 0px;


             }


     </style>