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; }
Related
I am really confused by what is happening here. I am wondering why the link is white when the cursor is within the button but NOT directly on the link? I want it to be red while cursor is within button boundaries.
I think that this happening is because at that point, the page is inheriting from the declared .links:a color value, but I am wondering how do I get it to override that? The .links:hover doesn't seem to transfer inheritance to .links a:hover (?)
Any help would be greatly appreciated!!
.links a{
color:white;
text-decoration:none;
}
.links:hover{
background-color:white;
color:red;
}
.links a:hover{
background-color:white;
color:red;
}
https://jsfiddle.net/3dujymLk/1/
Your rules are working exactly the way you wrote them. If you want the a text to be red while hovering over the entire div, you need a rule for that. Add something like this:
.links:hover a {
color: red;
}
If it isn't obvious, this controls the text-color of the link while hovering over the div.
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 try to make a horizontal menu bar with a table in HTML using CSS to design it. But the padding doesn't work the way I think it should: when I'm trying to change the background color of the whole li when the user "hovers it" with the mouse. But the padding seems to get wrong.
Here's my code in CSS (using Sassy CSS):
/* just to be sure the default of browser doesn't change look */
* {
margin:0;
padding:0;
}
/* some other design code ... */
#nav-menu {
padding:5px;
text-align:center;
/* change background: browser specific gradient */
background:$menu-bgcolor;
li {
list-style:none;
display:inline;
padding:2px 10px 2px 10px;
:hover {
background-color:$deco-dark;
color:$deco-verylight;
}
}
}
But the result looks something like the following:
As you can see the changed background color, which is $deco-dark in this case, doesn't affect the whole li area (the area with gradient), as i would expect. What can I do to change this behavior?
With SASS, the following:
li {
:hover { } }
will apply styles to any :hover elements inside the li. What you need is
li {
&:hover {} }
which will apply the style to the li element itself when it's hovered. Right now, the style is likely being applied only to the a inside the li.
Try changing your li's to display: inline-block; instead.
You could also place anchors in the li, then style the anchors accordingly. This is what I usually do. Also, like Brant said, are you using a list or a table? A list is probably better and is what you have implemented so just use that.
I wanted to make a link with CSS hover. I am using font-face to make another font with JennaSue.
CSS:
#font-face {
font-family:JennaSue1;
src: url(font/JennaSue.otf);
}
#font-face {
font-family:JennaSue3;
src: url(font/JennaSue.ttf);
}
#font-face {
font-family:JennaSue2;
src: url(font/JennaSue.eot);
}
#australia {
position:absolute;
font-size:40px;
left:0px;
top:32px;
color:#fff;
font-family: JennaSue1,JennaSue2,JennaSue3;
}
#australia a {
text-decoration:none;
color:#fff;}
#australia a:hover { color:#b30101; }
HTML:
<div id="australia">Australia</div>
The font work well on chrome but when i hover link it show like this picture:
Thanks for the answer here link for you can see http://jsfiddle.net/6UdYd/1/;
Just as Grezzo pointed out, there seems to be something strange going on with the font. If you look at this fiddle, the left link is just like your example. I added a border to visualize the boundaries of the a element. There the "j" and the "p" protrudes outside this border. By adding a bottom and left padding to it (as done on the right link), the hover works as expected.
This is somewhat of a quick fix I guess, but I don't really know how to do it properly.
It appears to be something to do with the left part of that j being to the left of where the actual character area starts. See this example (probably have to use chrome) http://jsfiddle.net/JGgHf/ where the left of the j has not been included in the div.
Try adding a font-weight. This seems to solve the problem.
#australia a:hover{
color:#b30101;
font-weight: 500;
}
Another possibility is to add a little bit of padding to the left so the text fits in the a-tag.
#australia a{
text-decoration:none;
color:#fff;
padding-left: 3px;
}
Try:
#australia a:link {
text-decoration:none;
color:#fff;
}
#australia a:hover { color:#b30101; }
I've found that Chrome sometimes ignores my a styles unless I use the :link pseudo code.
http://jsfiddle.net/rakesh_katti/n37hC/2/
There is no error with the code that you have posted. The error might be with other elements related to it. Or the fonts you are using it.
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;.