I'm trying to figure out how i can remove the border under the links at my website. It's both irritating and it messes up my design. So I'm asking here instead. I have been searching around Google, but I can only find "How to remove border around image links".
Can i use css to remove the borders? I have tried "border: solid 0px #000;"
But it did not work.
So if anyone could help me on this one I would really appreciate it.
If you're trying to remove the underline, add this to your css :
a {
text-decoration: none;
}
If you want to remove the underline of all the links, you can add:
a{
text-decoration:none;
}
Or if you want to remove the underline of a specified link, then you should create a css class like,
.style1{
text-decoration:none;
}
Then call this class name with the link like,
Link
It will only remove the underline of that link.
Related
I have used text-decoration:underline on an anchor tag. But the problem is it doesn't underline complete word, rather it underlines only selected letters.
Attached image.
The font I am using is 'Gotham'. I tried to increase line height property, But that did not solve my problem. Did someone come across similar issue?
The reason this isn't working is because the letters p, y, g, j, etc all have what are called descenders. They will interrupt the flow of the underline and there isn't really anything to do about it. If you really want to have it under all of the text, I would suggest scrapping the text-decoration and using this:
a {
display: inline-block;
border-bottom: 1px solid #000;
}
This give the effect of the underline while still going under all of the letters.
I'm not sure exactly what the issue is but if you are able to take a different approach, why not add this to the anchor tag instead?
a{
border-bottom: solid 1px #000;
}
I have a div wrapped in a <a> tag like this...
<a href='/'><span>Quiz</span>
and then my css stylesheet looks like this...
a:visited {
color: green;
}
But when the link is visited, it looks like this...
I have tried defining the border settings in the a css selector in various ways with no luck. Any ideas on how to fix this?
This is not an outline, probably there is already a border on, either your span or your a. Now, if the border doesn't have a specific color set, e.g.
border: 1px solid;
instead of
border: 1px solid black;
then it's color is defined by the color property. Which means that what is happening is normal.
Now, you have two options, either you find where is this border defined and remove it or add a color to it. Or you override it in some way like:
a:visited {
color: green;
border-color:transparent;
}
you may need !important on the border-color rule but that depends.
Use outline instead of border to fix this.
Thanks
i think it will be better if you look into the style section of the safari inspection. There are certain browser default styles which behave in a similar way. If you find any outline or border declaration, try to neutralize that declaration by declaring from your end border: 0; outline: none;
It will be of real help if you could share with us the code over fiddle or codepen.
Note: I was unable to recreate the scenario as you specified.
A not-super-advanced coder here.I'm seeking to "simply" adjust the styling of an active link in a sub-navigation on a site.
Example page:
http://printergatherer.com/shop
Referencing the minty green sub-nav that has "ALL ... PRINTS" in it.
Right now, I have styling that effects the active link in ALL navigations on the site. Ideally I have one set of styles for the main nav, and one for this sub nav.
I've managed to add a mint green underline to the active link, which is great, but for whatever reason I just CANNOT get the link color itself to change to the same mint green.
This code gets the bottom-border, but not the correct link color:
#categoryNav ul li.active-link {
color: #C6D4D0;
border-bottom: 1px solid #C6D4D0;
}
Sorry if I'm being a noob, I am about to tear my hair out about something that seems so simple!
You just need to move the color off of the li and on to the anchor tag like so:
.active-link a {
color: #c6d4d0;
border-bottom: 1px solid #c6d4d0;
}
you can see a jsfiddle of it working here:https://jsfiddle.net/24k1zep4/3/
your CSS is really specific, if you can't change that you may have to actually use a more specific selector.
#categoryNav .category-nav-links .active-link a {
color: #c6d4d0;
}
should work if you can't change the specificity and need to override what is already there.
please take a look here.
I have added the following code:
.entry_blog a {color:#000;}
.entry_blog a:hover {background-color: #000;color: #FFD700;}
The text links work fine. However when you go over the images, you can see a black line appearing in the bottom of each image inside the <div class="entry_blog singlepageentry" itemprop="articleBody"> div.
I cannot add any new class to the images links. If I could add an image to the images links, I could simply add a
.entry_blog .newclass a:hover {background:none}
However since there is no such a possibility, does anybody know how, in this case, I can remove the background from the images inside the entry_blog div?
Thank you in advance
Seeing as all your images appear to be standalone blocks, all you need to do here is set your img elements to display as block-level elements (using display: block). This forces them to fill the containing a element without leaving any gaps, fully hiding any background which may be underneath:
.entry_blog a { color:#000; }
.entry_blog a img { display:block; }
.entry_blog a:hover { background-color: #000; color: #FFD700; }
Your question is sort of confusing.
The best method is to add background:none or background:transparent to .entry_blog a
You say you can't add any new style to image links. What does this mean?
Surely you can alter the CSS.
I'm working on a website: http://www.allaboutwinecellars.com
And on one of the galleries (the Accesory page) there are blue lines between the pictures and I don't know why, the layout is exactly the same as the first page.
Can anyone figure out why those lines are there?
Here is the first page (the correct one): http://allaboutwinecellars.com/gallery.html
Here is the second page (the one with blue lines): http://allaboutwinecellars.com/gallery-2.html
Edit: I tried adding outline:none; to my anchor tag CSS rules and it did not fix the problem.
The issue is your anchor tags. You need to explicitly set the text-decoration property. The line that you're seeing is the blue underline representing a hyperlink. It looks like you already have properties defined that alter anchor's behavior. Simply add to it:
a {
text-decoration: none;
outline: none;
}
a { text-decoration: none; }
should fix it
Try this:
a, img{
border:0px;
outline:0px;
}
add this to your css:
#content p a
{
color:#000;
}
It's actually a blue underline.
Use text-decoration: none;.