I have a few instances where I place image within a link. Normally if you set border="0" there line under a link does not apply to the image. However, I had to specify DOCTYPE to be and now in FF I see the line under all images.
I still would like to have my links underlined, but not the images within.
<img src="img.png" height="16" width="16" border="0"> link
I've tried to solve it with CSS by adding
a img {
text-decoration:none
}
Unfortunately it did not work. I also tried:
a img {
border:0
}
IE does not "underline" my images within a link... Any suggestions would be highly appreciated.
Example Link
I still would like to have my links underlined, but not the images within.
If you want to have a special case for links with images, give the a element a class and remove the text-decoration for that class:
HTML:
<img height="16" width="16" />
CSS:
a img
{
border: 0 none;
}
.image-link
{
text-decoration: none;
}
This is great if you only have an image within the link, however you have both text and images within the anchor.
The solution for that would be to add a span around the text within the anchor:
<img height="16" width="16" /> <span>link text here</span>
and add an additional style in the stylesheet:
.image-link span
{
text-decoration: underline;
}
A solution would be to use the image as a background image instead of in the html, possibly the background of the parent element of the a.
In case anyone cares, here's an alternative solution that I came up with to circumvent the issue:
.nl {
text-decoration:none;
}
<img src="img.png" height="16" width="16" border="0"><u>link</u>
a { text-decoration: none }
The underline is from the A-tag not the IMG
For those cases where editing the markup isn't an option (inaccessibility to templates and/or surrounding issues), you can use a little jQuery. You may need to adjust the syntax to override your CSS:
jQuery('a > img').parent().css({'text-decoration' : 'none'});
Solved
<img src="img.png" height="16" width="16" border="0"> link
If you are linking to an image, try the following:
a[href$=jpg], a[href$=png] {
text-decoration: none;
}
My two cents:
$('a').each(function(){
var images = $(this).find("img");
images.parent().addClass('no_border_img');
});
Loop all links and find images inside, then for each one add CSS style to the link.
Only for a image with link inside a previous link style. Remember to create the style for 'no_border_image'.
Related
Would like to check what are the approaches that I can use to remove the anonymous blue outline when an email consist of an image href link? I have tried
border: none;
outline: none;
text-shadow: none;
box-shadow: none;
but nothings works.
Remove the border from the image:
a img {
border-style: none;
}
Remove the border by this (if you gave any):
Border:none;
Also try :
<img src="abc.jpg" border="0" />
If there is text decoration then remove it by this:
text-decoration:none;
If there will no changes appear then please you put your code on JSFIDDLE
the problem is not the in a selector but in img selector so you have to remove the border (which is set by default).
since this is for email I would advise you to set border="0" in img, instead CSS above head, just to be more cross-client as possible
something like this:
<img src="img.jpg" alt="img" border="0" />
if you don't like this approach you can always do CSS inline
<img src="img.jpg" alt="img" style="border:0 none" />
See more info about emailing tags/selectors here
I am having issues trying to replace this image with CSS, I have no access to the html.
http://jsfiddle.net/ES4mH/
<img
width="64"
height="64"
border="0"
style="width: 64px; height: 64px;"
src="http://www.nitrografixx.com/2013/lock-icon.gif">
</img>
I tried this, and while it adds the image as a background to the current image, it doesn't replace it.
img[src='http://www.nitrografixx.com/2013/lock-icon.gif'] {
background: url(http://www.nitrografixx.com/2013/lock_bg.jpg) center !important;
}
try this
<style>
.className{
content:url("http://www.nitrografixx.com/2013/lock_bg.jpg");
}
</style>
<img class="className"/>
What you are doing is adding the image to the background of the image element but the image element still has the source attribute pointing to the original image and that's why it's not being removed. You should probably use javscript to remove the element and replace it with something else if that's possible.
Bear with my rudimentary question.
http://jsbin.com/css-play-notfound/6
There is this blue underline thats annoyingly creeping up between my image and Text in the heading.
Two things you can do:
Change this code:
<img src="logo.png" alt="REUNIFY" height="35" />
to this:
<img src="logo.png" alt="REUNIFY" height="35" border="0" />
Also add this to your CSS stylesheet:
a { text-decoration:none }
Note that the above CSS will get rid of the underline on ALL links. So if you want your normal
text links to have the underline and just want this particular link to NOT have the underline,
then create a class like so:
a.noline { text-decoration:none }
and then change your HTML code to this:
<h1><span><a href="http://www.wikipedia.org" class="noline">
<img src="logo.png" alt="REUNIFY" height="35" border="0" />
</a></span>
Welcome
</h1>
Just add the css rule...
text-decoration: none;
... to your <a> element, or to one specific element by using a class or ID.
You can apply it to all hyperlinks like so:
a
{
text-decoration: none;
}
You should always add HTML5 and older browser CSS resets.
http://cssreset.com/ has the most popular ones of 2012. This way, you'll always be starting on a clean slate.
a
{
text-decoration: none;
}
add this in your css
I'd like to wrap an html link tag around both and image and a caption, so something like
<img src="...">Caption Text</img>
The caption should go below the image, but I'm not sure of a good way to do that (adding a <br> works, but seems unclean). I'd like to be able to use a styled element, but I can't put a div inside of there.
Try this - DEMO
No need to change your HTML
<a href="link">
<img src="http://lorempixel.com/200/100" />
Caption Text
</a>
CSS
a {
display: inline-block;
text-align: center;
border: 2px solid orange;
}
img {
display: block;
}
You can wrap the caption inside a span
<img src="..."/><span style="display: block;">Caption Text</span>
http://jsfiddle.net/ZgKqF/
Try it this way : <img src="..." alt="Caption Text" />
Then use javascript to display the alt attribute and display with javascript. Look at this for reference Get the "alt" attribute from an image that resides inside an <a> tag
You can make the a behave like a div (in regard to how it can be styled) with
display: block
It appears some browsers (Chrome at least) put a partial underline under images that are nested inside of an anchor tag, like this:
<img src="/foo.jpg" />
So I'm looking for a way to add text-decoration: none; to any anchor tags that contain an img tag. My first thought was this:
a img {
text-decoration: none;
}
Of course that doesn't work, because the style gets applied to the img tag, and not the anchor. So is there a selector I can use to apply the text-decoration style to any anchor tag with a img child?
EDIT:
My HTML typically looks like this:
<a href="#">
<img src="/foo.jpg" />
</a>
The way I space and tab the elements is adding extra whitespace between the anchor tag, and image tag. It's that white space that's being underlined.
If you're against adding a class to this <a> tag (which is the simple solution), your next best CSS solution would be to remove text-decoration on the <a> tag, and wrap the text you want to have underlined in an inline element. See below:
For images:
<a href="#">
<img src="/foo.jpg" alt="etc" />
</a>
For text:
<a href="#">
<span>Text that you probably want underlined</span>
</a>
Combined:
<a href="#">
<img src="/foo.jpg" alt="etc" /> <span>Text that you probably want underlined</span>
</a>
CSS:
a { text-decoration: none; }
a:hover span { text-decoration: underline; }
Unfortunately there is no way currently of selecting the parent of an element using just CSS.
You would need to resort to javascript or jQuery.
Personally I would do something in jQuery like
$('a>img').parent().addClass('noTextDecoration');
then in css have the following:
a.noTextDecoration {test-decoration:none;}
I just use
img {
border:none;
}
So far as I can tell, there is no way to select an element's parent in CSS. You could try applying some class, i.e. imagelink to A elements that contain IMG elements, though.
If the href attribute of these anchors always points to images, and no anchors point to images besides the one with actually an img tag inside, then you can use:
a[href$=".gif"],
a[href$=".png"],
... ,
a[href$=".jpg"] {
text-decoration: none;
}