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;.
Related
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.
I want to add pagination to one of my websites, but I have multiple problems with it, probably due to the fact that I don't have the best CSS skills in the world (they're mediocre at best).
You can see an SSCCE of my problem here: http://jsfiddle.net/rmurzea/qE7Ku/3/
1). To make the margin-bottom rule work, I had to add it to the pagination a class. If I add it directly to the pagination class, it doesn't work. Why ?
2). The content a:hover property has a text-decoration: underline rule. I can't seem to override it in pagination a:hover. How can I do it ?
3). I want that block of color and its text on the next line, but specifying a display: block rule doesn't seem to work.
Can anyone please help me with these problems ? Thank you in advance.
1) it works
.pagination {
margin-bottom: 20px;
}
2) Use !important in your css
.pagination a:hover {
text-decoration: none !important;
background-color: #5D4137;
color: #FFFFFF;
}
3) Replacing your p tag by div should work but it didn't, however I used a div with clear: both and it worked..
Here is your jsfiddle updated
Does anyone know how to remove this line from images which is showing up in IE
I have removed the images borders and text-decoration from the links using css
body img {
border:none;
}
a img {
text-decoration:none;
}
I can't figure out what else could be causing it.
It's not an underscore it is linking to the facebook page.
The decoration appears between the images and is therefore not selected by a img. Try this:
a { text-decoration:none; }
As stated by Mr. Alien you should consider to wrap this section somehow, so you can use a more specific selector, e.g.:
.share-buttons a { text-decoration:none; }
looks like a space between your images, the underline will be on the anchor
try adding
a, a:hover { text-decoration:none; }
I don't know how to get rid of random lines behind my pictures. My website is http://spencedesign.netau.net/singapore-gallery.html and you can see that there are little lines behind the images, and I can't see what is causing them.
Your problem comes from here:
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline; // this line is the problem
cursor: auto;
}
Try to do something like:
.gallerycontainer a {
text-decoration: none;
}
This should fix your problem.
Your links, because they have more than just one <img> tag, are being underlined. Just add
a.thumbnail {
text-decoration:none;
}
to your css.
Those are whitespaces, they are underlined because they are in an <a> tag, you can remove the whitespace or remove text-decoration from your <a>
I am tring to style a input submit button like an anchor.
But it is putting a second line underneath the anchor.
How do I style just one line?
.usernameAnchor
{
background-color:white;
color: #034af3;
text-decoration: underline;
border: 0px none;
display:inline;
height:25px;
}
Malcolm
EDIT: This problem is in IE8.
That seems to be working fine as I created and checked that here:
http://jsbin.com/adake3/2
Looks like there is something there with your html markup.
Update:
After seeing your code, you are trying to set the text-decoration to underline, but mind you this is a button not a link. One alternative is to give border-bottom to it to mimic underlining something like this:
.usernameAnchor:hover
{
border-bottom:1px solid #0000ff;
}