|
CSS - Elimination Of Bluish/purple Border Around Button Image (link)
Hi,
I have pictorial buttons that really are <a href's></a> with img buttons in between. When viewed in IE i get a bluish/purple box around my buttons. I want to eliminate the link marking around the images. How do I do this? Thanks for all and any suggestions. Melroy Similar TutorialsI have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? I have a test page for an image and it does not display a border. It only changes the cursor to a hand on hoover. Once clicked and subsequently returned to the page, the image does not have the dotted outline of its' border either. This is as it should be. Here is the code: Code: <html>
<head>
<style>
img, fieldset {
border: 0;
}
</style>
<a href="http://validator.w3.org/check?uri=referer" border="0"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</head>
</body>
Next, I have my development pages where I have multiple link styles on each page defined by an external style sheet, prime.css. here is the relavant portion of the code: Code: a:link {
color: #2F4F4F;
text-decoration: underline;
}
a:visited {
color: #778899;
text-decoration: underline;
}
a:active {
text-decoration: underline
}
a:hover {
text-decoration: underline;
background-color: #2F4F4F;
color: #FFFFFF;
}
.intraLink:link {
color: #2F4F4F;
text-decoration: none;
background-color: #FFFFFF;
}
.intraLink:visited {
color: #778899;
text-decoration: none;
}
.intraLink:active {
text-decoration: none;
background-color: #FFFFFF;
}
.intraLink:hover {
text-decoration: none;
background-color: #FFFFFF;
color:#D2691E;
}
.back:link {
color: #2F4F4F;
text-decoration: none;
background-color: #FFFFFF;
}
.back:visited {
color: #778899;
text-decoration: none;
}
.back:active {
text-decoration: none;
background-color: #FFFFFF;
}
.back:hover {
text-decoration: none;
background-color: #FFFFFF;
color:#2E8B57;
}
.image:link {
color: #2F4F4F;
text-decoration: none;
background-color: #FFFFFF;
}
.image:visited {
color: #778899;
text-decoration: none;
}
.image:active {
text-decoration: none;
background-color: #FFFFFF;
}
.image:hover {
text-decoration: none;
background-color: #FFFFFF;
color: none;
}
.pageStyle {
background-color: none;
font-family: "Helvetica Neue", Arial, helvetica, sans-serif;
width: 800px;
font-size: 62.5%;
margin: 0 auto;
padding-top: 50px;
margin-bottom: 25px;
line-height: 1.5;
}
#main {
float: left;
width: 590px;
padding-bottom: 25px;
}
Explanation for the multiple styles: the default link style is to change the 'default' hyperlinks to match my color scheme. The .intraLink is for links within the current page. The .back style is for calling the previous page and finally the .image style is for all images with href references. Even though this scheme works there is a slight problem. Once an image that is used as a link is clicked and user returns to the page then the image has a dotted line as a border! I'd like it to not have that border, i.e., I'd like it to work just as the test page works, nice and clean. Also, I'm not sure about my linking styles. I'm new with CSS and it just seems like I've done more than I really need too; like it seems like it's a lot to do to simply not have the border appear when the test page is so lean! Is there a better way? Here's the offending page code and thanks for taking the time to read this, I know it's a trivial point but I'd like to understand why: Code: <html>
<head>
<title>index.html :: home page
</title>
<link rel="stylesheet" type="text/css" href="prime.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="pageStyle">
<b>:: Index.html ::</b><hr>
<div id="main">
<ul>
<li>
<a href="rs_cv.html">My CV</a>
</li>
</ul>
</div>
<a href="http://validator.w3.org/check?uri=referer" border="0" class="image"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</body>
</html>
I just don't know how to get rid of the border around my image links... When you go to the site, everything looks okay, but when you press the link ("blog"), a border appears around it. And if you click it and then return back, the border is there all the time. Why? I have written "border: none;" pretty much everywhere in my css I can think of! I'm running out of ideas... This is probably something really simple so please help me out, I'm not much of a programmer as you can see.. The same border-problem repeats also on that blog-page which is a wordpress layout and should have nothing to do with my css!? The site is he http://prettydisturbed.com/ And my css around the problem looks like this: Code:
#blog {
display: block;
float: left;
width: 96px;
height: 62px;
background: url('../img/blog_mo.jpg') no-repeat 0 0;
border: none;
}
a #blog img {
border: none;
text-decoration: none;
}
#blog:hover
{
background-position: 0 -62px;
border: none;
}
#blog:visited
{
border: none;
}
#blog span
{
display: none;
border: none;
}
p {
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
color: #000000;
margin: 0;
padding: 0;
border: none;
text-decoration: none;
}
a:link {
text-decoration: none;
color: #ffffff;
font-size: 13px;
border: none;
}
a:visited {
text-decoration: none;
color: #ffffff;
font-size: 13px;
border: none;
}
a:hover {
text-decoration: none;
color: #ff39da;
font-size: 13px;
border: none;
}
a:active {
text-decoration: none;
border: none;
}
hi, yea I got an a link wrapped around an image, but the image is coming up with tis weird pink border around it, anyon know how I can get rid of this border? thx i'm trying to style my submit button to have a gradient background with a solid blue border. looks awesome in FF, however when I try to apply the background image to the submit button in IE (6 and 7), there will be an extra border inside of the blue border. it seems to be whatever color i set my background-color to. Code: border: 1px solid #69A2CC; background: transparent url(gradient.jpg) no-repeat scroll 0 center; 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. basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it? 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. IE 6 and 7 are adding a black border around my input type="submit" It's honoring my CSS sheet but then deciding to add its own border. Weird. I googled this already and tried every solution out there including the two span styles method. Nothing worked. Here is my .html code... <input type="submit" class="btn_small" onmouseover="this.className='btn_small btn_small_hover'" onmouseout="this.className='btn_small'" name="submit" value="ADD"> Here is my .css INPUT.btn_small { padding-top: 0px; padding-bottom: 2px; padding-right: 2px; padding-left: 2px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; font-face: verdana,sans-serif; font-size: 9px; font-weight: bold; color: #333333; background: url('form_button_small.jpg') repeat-x; outline: none; border: 1px solid ; border-color: #CC9900; height: 20px; vertical-align: middle; } INPUT.btn_small_hover { padding-top: 0px; padding-bottom: 2px; padding-right: 2px; padding-left: 2px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; cursor: pointer; font-face: verdana,sans-serif; font-size: 9px; font-weight: bold; color: #333333; background: url('form_button_small_over.jpg') repeat-x; outline: none; border: 1px solid ; border-color: #CC9900; height: 20px; vertical-align: middle; } When viewed in IE my form's submit button shows up with a black border around it, and when clicked onto another blank space of the space, it goes to normal colors as applied in this css code. Code: font-family:verdana,arial,helvetica,sans-serif; font-size:12px; background-color: #FFFFFF; color : #000000; border: 1px solid #A5B4BC; What could fix this? Thank you. 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; Alright, I've got a really strange problem going on. I've recently redesigned my weblog to be more standards-compliant, and I've copied the modifed Fahrner Image Replacement technique that Zeldman is using on his site. You can see on his site that the H1 is shoved off-page with a negative text-indent, and the background is applied to the A tag inside the H1, which allows the header image to still be "clickable." I was able to successfully duplicate this behavior using the following code. Code:
XHTML:
<div class="header">
<h1><a href="/">Space Ninja Blog</a></h1>
<p class="tagline">site tagline here.</p>
</div>
STYLESHEET:
p.tagline {
display: none;
}
h1 {
text-indent: -9999px;
margin: 0;
padding: 0;
border: 0;
}
h1 a:link, h1 a:visited, h1 a:hover {
display: block;
width: 650px;
height: 150px;
background: #777 url(/blog/css/images/wa_st_header.jpg) top left no-repeat;
margin: 0;
padding: 0;
border: 0;
}
Now, that is the same code that Zeldman uses, and it works fine in all the modern browsers I've tested in except one: In Mozilla Firefox on XP, I get a strange purple line extending from the header image offscreen. This is clearly the link outline or underline, since if I click on the header image, the purple turns red, and it's extending towards where the H1 text has been shoved offscreen. My problem is that this doesn't happen on Zeldman's site, and for the life of me, I can't see what the difference is. Hell, we're even using the same doctype, and we're both importing our stylesheets. But I get this weird line, and he doesn't. Note also that the line doesn't show up in any other browser I've tested, even Firefox on my Mac. Any suggestions are welcome! 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 The first version was not so hot, because it was developed entirely on Internet Explorer. Version 2 was an improvement, but it still required the user to code in JavaScript. But 3.0 uses CSS to trigger the effect, namely some variation of
CSS Code: Original - CSS Code a:hover { outline: outset; }
a:hover {
You may read about it and download the necessary files at http://desertowl.43i.net/link-button. 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? 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 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 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! |
|||||||