I have an anchor tag around all of these images on my site. When you click it, it scrolls to the id "template".
<a class="hi" href="#template"><img src="images/01.png" /></a>
I have tried every trick in the book.
a img{border:none; outline: none;}
border=0 in the image tag itself.
No matter what I do there's always a blue border around the image once you click it. Click any of the circle images (towards the bottom) for reference. Remember, to view in Firefox.
http://stevendennett.com/newsite/
Thanks!
The dotted border around the image is the Outline of the <a> tag. So that, when you remove the border and outline in img it will not be the solution.
The solution is
We don't need to put to much code. Try here:
a { /* Remove all the outline border all in our document. */
outline: none;
}
I was able to remove the border by setting the anchor color to transparent:
a.hi {
color: transparent;
}
Try this:
a.hi {
outline: none;
color: transparent;
text-decoration: none;
}
Try this:
a.hi {
outline: medium none;
}
The image works fine in Chrome and Opera (15+).
So the issue that is happening is the default effect of the browser, here is what happens in FF.
And the IE (10):
But its fine in Chrome, which means that there is no such effect in CSS.
So you must try and add this :
a > img {
border: 0;
}
It will remove the borders from all the images which are direct under the a hyperlinks.
Look at your code:
In your css file, on line 35 (if I am not wrong) you are having outline: medium none and border: medium none;
I removed that, and there was no border! Try it :)
Related
my button has this weird border appearing when clicking on it.
how to remove it?
below is the html and image example
Buy Now
Only While Supplies Last
Just set your button outline to none:
input[type="button"]{
outline:none;
}
input[type="button"]::-moz-focus-inner {
border: 0;
}
It's just an outline. You can rid it out by using:
button: {
outline: none;
}
You can simply fix this with css outline property, you need to remove the default outline
button {
outline:none;
}
The outline property in CSS draws a line around the outside of an element. It's similar to border except that:
Read outline properties
CSS tricks outline Property
button: {
outline: none;
}
I have hyperlink with image and text. I've made stronger standard focus. I don't want outline, when I just click hyperlink, so I use a:active { outline : none }. When I click some text at hyperlink everything is fine, unfortunately when I clik image I have outline. It seems that a:active { outline : none } doesn't work when I click image at hyperlink. This problem I have only at IE. Firefox, Chrome and Opera are OK. Is there any way to fix this? I'll be appreciated for any help.
This is my example code:
<style type="text/css">
a:focus {
outline : 3px solid black;
}
a:active {
outline : none;
}
</style>
<img src="image.jpg" alt=" " width="160" height="160" /> Some text
You can reset this by simply resetting the outline on any img element within the a element. IE also applies a border around images within a elements by default, which you may not want either:
a img {
border: none;
outline: none;
}
I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images.
Does anyone know how to remove this gray border from the button, so it's just the image itself? Thank you.
Add
padding: 0;
border: none;
background: none;
to your buttons.
Demo:
https://jsfiddle.net/Vestride/dkr9b/
This seems to work for me perfectly.
button:focus { outline: none; }
I was having the same problem and even though I was styling my button in CSS it would never pick up the border:none but what worked was adding a style directly on the input button like so:
<div style="text-align:center;">
<input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>
input[type="button"] {
border: none;
outline:none;
}
You can easily give this style to it:
MyButton {
border: none;
outline: none;
background: none;
}
The border: none; will also do the job for you separately without giving outline (Because: An outline is a line drawn outside the element's border. so when there is no border, outline property doesn't have any meaning on its own).
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. so when you set its value to none, then it prevents your button having any color, image and etc....
For removing the default 'blue-border' from button on button focus:
In Html:
<button class="new-button">New Button...</button>
And in Css
button.new-button:focus {
outline: none;
}
Hope it helps :)
Try using: border:0; or border:none;
You can also try background:none;border:0px to buttons.
also the css selectors are div#yes button{..} and div#no button{..} . hopes it helps
Add this as css,
button[type=submit]{border:none;}
Just use:
button{border:none; outline:none;}
The usual trick is to make the image itself part of a link instead of a button. Then, you bind the "click" event with a custom handler.
Frameworks like Jquery-UI or Bootstrap does this out of the box. Using one of them may ease a lot the whole application conception by the way.
You can target the button in the CSS styling like so:
div button {
border: none;
}
$(".myButtonClass").css(["border:none; background-color:white; padding:0"]);
I have a link "<a ... ></a>" and within it an image ""
Something like:
"<a...><img src.../></a>"
My problem is in IE9 (do not know if it occurs in versions prior to IE9) that is putting an edge in the image.
In other images on my page, which has no links, this problem does not occur.
How can I take the edge off these images that have associated links
Try this CSS:
img{
border: 0
}
If you are talking about a dotted border, it's the outline IE9 applies to all links. To remove-
a:active, a:focus {
outline: none;
}
I've been trying to use a:hover pseduo class so that when you hover over the image, you get a border to appear so that it looks clickable.
However, when I do this the border appears below the image in the space below but I'm unsure why.
#overlay a:hover {
border: solid 2px #666;
}
As you can see the border is not around the image, it's below it.
Hope someone can help me with this problem.
Put the border on the image, not the anchor.
#overlay a:hover img {
If your image has position: relative or one of the crazy non-block alignments, then the enclosing link doesn't expand to surround it.
We need to see some HTML to be sure, but try to take alignment parameters off the image, and you should it working. If you made the <a> position: relative I think the link block would surround it.
Use Firebug to experiment with DOM object layouts.
Try this:
#overlay a:hover {
border: 2px solid #666;
}