I am desperately trying to find a way to get this working. I have a menu that use images for links. But in IE and FF there is an annoying border around the image that I don't know how to get rid of.
Would you be able to quickly tell me the CSS attribute to avoid this effect.
Thanks in advance for your time.
Antonio
ul li img { border: 0 }
I believe you are talking about the implicit outline or border that are added to img elements within a tags.
The fix is simple:
a img
{
border: 0 none;
outline: 0 none;
}
The outline may no longer be necessary, I'm not sure if any browsers use outline for the effect any more.
Edit to add:
For some reason in FF/IE, the specificity of img or a is too low to override the default behavior.
Related
I'm working on a website and am struggling with one thing. Basically, when you hover over the main logo, the background of the logo goes white and it looks awful. I've tried this in three different browsers. Apart from the mouse pointer changing to a link indicator, I don't want any other visual changes on hover. This is a bootstrap based mediawiki theme if that helps.
The site is: www.nebdat.com
I've figured out that that section is called p-logo and have tried the following:
#p-logo:hover { background-color: transparent !important; }
It doesn't seem to do anything though. However, when I try:
#p-logo:hover { opacity: 0; }
the logo and background all go transparent, so I know it's the right name of the object. However, I want the logo name to remain.
I hope that makes sense. I'm pretty new to this.
Hope you have some advice.
Thanks,
JT
#media screen
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
That's causing it.
This should do it:
#p-logo > a {
background: transparent;
}
It's not the image that's got a background on hover, it's the anchor tag.
You don't have to override it, you can simply remove it. Find and remove this code from load.php:
img:hover{background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGElEQVQYV2N4DwX/oYBhgARgDJjEAAkAAEC99wFuu0VFAAAAAElFTkSuQmCC) repeat;background:white url(http://www.nebdat.com/wiki/skins/common/images/Checker-16x16.png?2013-05-25T13:38:20Z) repeat!ie}
I've got the following problem - I'm using image maps on the site. In Internet Explorer 9 (IE8 is fine), when I click on link (area tag), there appears a blue border around it. How to get rid of it?
I've tried:
map, map area {
border:none !important;
}
img, a img, a:link img, a:visited img {
border:none !important;
}
But it didn't help. Did anyone have this problem? Please look at the site - http://www.naturalnie.test.dih.pl/. Image map is under logo, where links say: "Home, Kosmetyki, Lekarstwa, Żywność i suplementy, O Naturalnie.net".
EDIT:
I found the solution. Following code works:
a, img {outline:none;}
map > area,
map > area:active,
map > area:focus {outline: none; border:0; }
Why not just
a,img { border: none; }
this worked for me
:focus{
border: none;
outline-style: none;
-moz-outline-style:none;
}
I'm not really sure, but try to set in html the <img border="0" />
Since you say the border appears after clicking on the link, that sounds to me like a "focus" bordering.
Try a:focus {border:0 none;}
This solution will cause conflicts with images that double as both links and content that also have borders. However, if your image links have no existing borders, it should work to rid you of the outline in IE with compromising anything else:
a img {border: none; }
Just add it to your master css styles sheet...it fixed my problem perfectly.
I cannot figure out why IE shows following website with each frame encapsulated with the colors of links:
http://wilson-thun.substans.com/introduction.aspx
This doesn't happen in Chrome and Safari. Can anyone please help me in explaining this occurrence?
Best regards
I think that is css issue...
IE does not support "box-shadow"..
In this case - if you do not specify anything for images - IE will show borders where as chrome/firefox/safari will not show borders. To show the image without border everywhere you need to put BORDER="0" in the img tag.
Cheers
I've run into this issue before. Try adding border: 0; to link's css.
Try This:
a {
outline: none;
border: none;
}
a:active {
outline: none;
border: none;
}
Apply this to your CSS Document.
when I hover the mouse over it, the cursor doesn't change into hand until you actually over over the text. (For example, if you pay attention to SO navigation, your cursor changes into hand as soon as you touch the gray area. I am talking about Questions, Tags, Users, Badges, Unanswered navigation)
when I click on it, it borders the link-text.. like it's dotted border or something by default. How do I get rid of that?
There are two ways of getting the hand cursor on the entire area; either you make the link take up the entire area (perhaps by being the entire area), or you add the style cursor:pointer; to the area. (Making the link cover the whole area is usually the better option, as that also make the entire area clickable.)
To get rid of the dotted border on links when they‘re clicked:
a:active {
outline: none;
}
For SO navigation, it is done in following way:
<li class="nav">
Questions
</li>
.nav a {
padding: 6px 12px;
}
The gray area you see is actually the link itself (achieve by setting the padding). To get rid of the border, you should specify by a:link:
.nav a:active { outline: none; }
For (1), use the <a> around your whole <div>, not just the text, and that will make the cursor change to the hand cursor when entering the div. Another way is to change the <a> to have a style similar to
a { display: block; width: 300px; height: 100px; background: orange }
the background is just for trying it here. It can be removed.
For (2), use
a { outline: none }
Try using the following in your CSS.
a:focus {outline: none;}
However, I believe older versions of IE will not honor this code.
I have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");