CSS - A Link And Image Putting Up Phantom 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 guys,

For a pure CSS site, is it depreciated to have a border="0" tag in <img elements? (My reasoning is that if one browser doesn't support CSS, it will show the user images with ugly borders... that's anyway the default behavior in IE and FF).


Thank you

Hi, you would have already seen one of my newbie topics here today, and here is another one. I need to put a image in the corner of an absolutly positioned div. I don't know how to do that. It would be in the upper left-hand corner.

Any suggestions?

Perhaps I should pick up a CSS book, is there one that you reccomend.

Thanks,
-Sam

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;

For some reason in FF, even though I have the most nested element set to 0px for the right padding, padding is showing up in FF.

** removed **

That white line should be flush against the text of the menu items, like you'll see it is in IE.

Looking at Firebug, there's no other styles being applied to this item that would cause it to do what it does. Interestingly enough, if I change the padding using Firebug to anything else, then change it back to 0, it moves the padding back to 0.

Here's the HTML:
Code:

<div id="navBar">
	<ul>
		<li><a href="http://www.radiantsuntherapies.com" id="navBarSelected">Home</a></li>
		<li><a href="about.php">About Us</a></li>
		<li><a href="services.php">Services</a></li>
		<li><a href="practioners.php">Practioners</a></li>
		<li><a href="appointments.php">Appointments</a></li>
		<li><a href="shop.php">Shop</a></li>
		<li><a href="bms.php">Body Mind Spirit</a></li>
		<li><a href="blog/" id="navBarLast">Blog</a></li>
	</ul>
</div>

And here's the CSS:

Code:

#navBar{
	background:url(../images/navBarBackground.png) repeat-x top left;
	float:left;
	height:43px;
	overflow:hidden;
	width:910px
}

#navBar ul{
	font-family:garamond;
	font-size:14px;
	text-transform:uppercase
}

#navBar ul li {
	display:block;
	float:left;
}

#navBar ul li a:first-letter {
	font-size:16px
}

#navBar ul li a{
	color:#e4ad43;
	text-decoration:none;
	display:block;
	border-right:1px solid white;
	padding:11px 0 18px 14px; /* overflow vertical to work w/ all browser no matter how text is rendered.  hidden by parent layers */ 
}

#navBarLast{
	background-image:none !important
}

#navBarLeft{
	background:url(../images/navBarLeft.png) no-repeat top left;
	float:left;
	height:43px;
	width:5px;
}

#navBarRight{
	background:url(../images/navBarRight.png) no-repeat top right;
	float:left;
	height:43px;
	width:5px
}

#navBarSelected{
	color:#ffffff !important
}

Thanks!

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

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;}

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 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!

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.

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 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 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