I have a style like:
a {border-bottom: 1px solid gray; text-decoration: none}
Now if I put an <img> inside a <a>, the <img> gets the border too. Is there a way to prevent this?
a img {border:0} doesn't work because a has the border, not img. Fiddle: http://jsfiddle.net/wp480vdv/1/
Adding classes to either have a border or not is difficult for large sites.
You can use JQuery to do this
Solution 1: http://jsfiddle.net/wp480vdv/8/
$('a').has('img').css('border-bottom', 'none');
Solution 2 http://jsfiddle.net/wp480vdv/9/
$("a:not(:has(>img))").css('border-bottom', '1px solid gray');
A selection based on the content is not supported in CSS; and i doubt it will always be.
The nearer thing you can do, without Javascript is the attribute selector:
a {border-bottom: 1px solid gray; text-decoration: none}
a[href="/foo"] {border:0px}
http://jsfiddle.net/wp480vdv/10/
Might it be something in the attribute of the <a> that contains image different from the <a> containing only text?
If you only want to give underline for text not for image, then you don't need to give border-bottom for <a> tag.
You can modify your html like that.
html
<div>
<a>
<span>hello</span>
<img src="a.jpg">
</a>
</div>
Here by default in <a> tag, there is underline.
So if use a{text-decoration:none;} so why you want to give border-bottom.
Anyway if want to give border-bottom for text then you can do like that.
css
a {
/*border-bottom: 1px solid gray;*/
text-decoration: none
}
span {
border-bottom: 1px solid gray;
}
img {
border: none;
}
Related
My HTML code is:
settings
The element does not lies directly under the body tag.
Now i have a situation where i need To underline anchor tag text using CSS, to do it i am using the following css code:
a{ border-bottom: solid 1px #eee;}
However this only underlines the text enclosed in anchor tag. What if want the underline to go across the page?
This is what you might want to do:
a {
border-bottom: solid 1px red;
display: block;
}
settings
How do you underline html text so that the line beneath the text is dotted rather than the standard underline? Preferably, I would like to do this without using a separate CSS file. I'm a novice at html.
It's impossible without CSS. In fact, the <u> tag is simply adding text-decoration:underline to the text with the browser's built-in CSS.
Here's what you can do:
<html>
<head>
<!-- Other head stuff here, like title or meta -->
<style type="text/css">
u {
border-bottom: 1px dotted #000;
text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>
Use the following CSS codes...
text-decoration:underline;
text-decoration-style: dotted;
Without CSS, you basically are stuck with using an image tag. Basically make an image of the text and add the underline. That basically means your page is useless to a screen reader.
With CSS, it is simple.
HTML:
<u class="dotted">I like cheese</u>
CSS:
u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}
Running Example
Example page
<!DOCTYPE HTML>
<html>
<head>
<style>
u.dotted{
border-bottom: 1px dashed #999;
text-decoration: none;
}
</style>
</head>
<body>
<u class="dotted">I like cheese</u>
</body>
</html>
HTML5 element can give dotted underline so the beneath text will have dotted line rather than regular underline. And the title attribute creates a tool tip for the user when they hover their cursor over the element:
NOTE: The dotted border/underline is shown by default in Firefox and Opera, but IE8, Safari, and Chrome need a line of CSS:
<abbr title="Hyper Text Markup Language">HTML</abbr>
If the content has more than 1 line, adding a bottom border won't help. In that case you'll have to use,
text-decoration: underline;
text-decoration-style: dotted;
If you want more breathing space in between the text and the line, simply use,
text-underline-position: under;
Maybe I’m a bit late, but just use text-decoration: underline dotted,
it’s a single CSS property that you can use everywhere.
Inline HTML
<u style="text-decoration:underline dotted">I have a dotted underline</u>
For a dashed underline, use text-decoration: underline dashed.
<u style="text-decoration:underline dashed">I have a dashed underline</u>
As said by Darshana Gunawardana, you can use text-underline-position: under, to have more space between the text and the line:
<u style="text-decoration:underline dotted;text-underline-position:under">I have a dotted underline</u>
In a separate CSS file
u {
text-decoration: underline dotted;
}
You can make use of text-decoration properties:
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-line: underline;
text-decoration-thickness: 1px;
Reformatted the answer by #epascarello:
u.dotted {
border-bottom: 1px dashed #999;
text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>
You can use border bottom with dotted option.
border-bottom: 1px dotted #807f80;
You can try this method:
<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>
Please note that without text-underline-position: under; you still will have a dotted underline but this property will give it more breathing space.
This is assuming you want to embed everything inside an HTML file using inline styling and not to use a separate CSS file or tag.
It's not impossible without CSS. For example as a list item:
<li style="border-bottom: 1px dashed"><!--content --></li>
I'm aware that the :empty pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.
I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.
I've tried a *:not(*){ border-bottom-width: 0; } in an attempt to fix this, but it didn't work. Is there a way to select a tags with only text-nodes for children?
If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: a img { text-decoration:none }?
Edit: If its the links on img tags you don't want underlined, apply a class to those links with text-decoration:none
NEW ANSWER:
If you want a border under the image, but not the text do this:
a img { border-bottom: 1px solid #000; }
a:emtpy { border: none; }
If you want the opposite (border under the text but not the image) do this:
a:empty { border-bottom: 1px solid #000; }
a img { border: none; }
OLD ANSWER:
If it's just a problem with images that are wrapped in a tags, try:
a img { border-bottom: none; }
Instead of a crazy selector, why not hide the border with a negative margin:
a img {
margin-bottom: -6px;
}
Demo
When the ONLY CHILD of <a> is not an img ...
a:only-child:not(img)
{
border-bottom-width: 1;
}
This cannot be accomplished because of the way border property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.
What I propose is going back to the text-decoration property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:
<style>
.fancy-underline { color:blue; text-decoration:underline; }
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
<img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>
http://jsfiddle.net/ovfiddle/TwmmF/3/
I ended up just using jQuery. I don't believe it's possible with just CSS right now.
jQuery('document').ready(function(){
jQuery("a").each(function(){
if(this.children.length !== 0)
this.style.borderBottomWidth='0';
});
});
Say I have a
<a class="myclass" href="foo.htm">Click Here</a>
and in css something like this:
.myclass
{
border: 2px solid #000;
padding: 1em;
}
so the <a> looks like a button but it only operates when clicked on the text, not in the whole box. How can I make so that the box also "catches" onClick?
Block will not work well unless you float the element and give it a fixed width. I think "inline-block" would work better.
.myclass{
display: inline-block;
border: 2px solid #000;
padding: 1em;
}
You can see it in action here: http://jsfiddle.net/2tmzL/
Browser support for inline-block is pretty good: http://caniuse.com/inline-block
Wrap the anchor tag around another container element
<a class=".." href=".."><div>Click here</div><a>
< a > is an inline , you have to transform it to a block, try this
.myclass:
{
display:block;
border: 2px solid #000;
padding: 1em;
}
You need to set the css property display: block or inline-block (depending the case...) for your a element.
I seem to be able to click the entire link. Make sure you remove : after .myclass. Also if it's still not working you may like to try adding display:block;
Alternatively in html5 you can wrap the a tag around a block element. This will work in older html though it's not correct.
.myclass
{
border: 2px solid #000;
padding: 1em;
display:block;
}
The issue is that a's are inline elements, and padding doesn't work the way we expect with inline elements. Change the a's to a block level element, and everything should work as you expect (note the removal of the ":" in the CSS declaration, that shouldn't be there):
.myclass {
display: block;
border: 2px solid #000;
padding: 1em;
}
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;
}