I have a link "<a ... ></a>" and within it an image ""
Something like:
"<a...><img src.../></a>"
My problem is in IE9 (do not know if it occurs in versions prior to IE9) that is putting an edge in the image.
In other images on my page, which has no links, this problem does not occur.
How can I take the edge off these images that have associated links
Try this CSS:
img{
border: 0
}
If you are talking about a dotted border, it's the outline IE9 applies to all links. To remove-
a:active, a:focus {
outline: none;
}
Related
Can you style a <abbr> tag using css? In firefox, it is displayed with dots underneath the words like in the picture below:
Is this a browser by browser thing? can you remove the dots or do you just use the title="title here" option?
thanks
Firefox 40 has a small change:
https://developer.mozilla.org/en-US/Firefox/Releases/40/Site_Compatibility#CSS
To remove default underline in Firefox, you now need to set CSS:
text-decoration: none;
Can you style a tag using css?
Yes, you can.
In firefox, it is displayed with dots underneath the words
Yes. Firefox default style is
abbr[title], acronym[title] {
border-bottom: 1px dotted;
}
Is this a browser by browser thing?
Yes, this behaviour is determined by the default stylesheet of each browser. Then, different browsers may display it different by default.
Can you remove the dots?
Yes, just override the default syle:
abbr[title], acronym[title] {
border-bottom: none;
}
It is possible to style the tag with CSS for modern browsers. However, a fallback for older browsers with JavaScript may be used. (But who wants to support IE 8?)
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(title);
}
This will add an absolutely positioned pseudo element top right of the tag using the attribute content within the title when the tag is hovered over.
Mr. Bunnyman.
Seems like your experiencing a cross browser issue.
Yes, you can style <abbr> tag. Example below.
abbr { border: 2px dashed red; }
If your experiencing an underline on a certain browser, try:
abbr { border-bottom: 0px !important; }
Can you style a <abbr> tag using css?
Yes, but you cannot style the title attribute—though you can fake it unreliably.
Is this a browser by browser thing?
Yes, default styles are set in the user agent stylesheet.
Can you remove the dots?
Absolutely. To remove them unset the text-decoration property in your stylesheet:
abbr[title] {
text-decoration: unset;
}
Inclusive design approaches are also possible.
You can style any HTML element with any CSS you want, the problem is, for some HTML elements it will have no effect.
In other words, you can add the CSS to whatever the heck you want, but the browser may not support your changes.
i.e. Styling the <head> element is possible, but it is pointless.
Issue: When you click our logo a black bar appears underneath it in both firefox and chrome. If you hold the click on the logo it'll stay.
Below is some of the code I have tried to remove the black bar on focus:
a:active, a:focus {
outline: none;
}
a {
outline: none;
}
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
a img {outline : none;}
img {border : 0;}
Can someone tell me what is causing the black bar?
The reason this is happening is because, on line 45 of screen.css, you have the rule saying "background-color: #000 !important;" which is affecting a.coa-link (Your rule is set to affect a:focus, a:active, amongst others. This is why it only occurs when you click/click-hold on the link [focussing on the element.])
If you add to line 35 of style.css:
#header a.coa-link { clear: both; /* YOUR EXISTING CODE */
background-color: transparent !important; /* NEW LINE OF CODE */ }
Then your issue will not occur anymore.
HTH
Try setting the background-color for .coa-link class, to rgb(43,66,114) which is the background-color set to your body element.
Ok so it is a very weird issue, but a workaround is to add a div around the image:
<a class="coa-link" href="/" title="Home">
<div>
<img src="/files/2012/07/AC-banner-white-test7.png" alt="">
</div>
</a>
It worked for me in the chrome inspector.
This is happening because you have focus styles implemented for <a> tags. The reason it's shown as a black bar is because the <a> that surrounds the logo image does not have display: block; in the CSS. If it did have display: block, the entire header would have a black background.
Another problem is that there is an !important tag in there. Booo.
You need to add the following style to fix the black bar in your logo link:
#header .coa-link a {
display: block;
}
#header .coa-link a:focus,
#header .coa-link a:active, {
background: transparent!important;
}
I would never ever suggest using the !important declaration in CSS, but as someone has already added it in, you need to override it. Ideally remove the !important tag that's shown in the attached image, and then you won't need it in the fix.
I have an anchor tag around all of these images on my site. When you click it, it scrolls to the id "template".
<a class="hi" href="#template"><img src="images/01.png" /></a>
I have tried every trick in the book.
a img{border:none; outline: none;}
border=0 in the image tag itself.
No matter what I do there's always a blue border around the image once you click it. Click any of the circle images (towards the bottom) for reference. Remember, to view in Firefox.
http://stevendennett.com/newsite/
Thanks!
The dotted border around the image is the Outline of the <a> tag. So that, when you remove the border and outline in img it will not be the solution.
The solution is
We don't need to put to much code. Try here:
a { /* Remove all the outline border all in our document. */
outline: none;
}
I was able to remove the border by setting the anchor color to transparent:
a.hi {
color: transparent;
}
Try this:
a.hi {
outline: none;
color: transparent;
text-decoration: none;
}
Try this:
a.hi {
outline: medium none;
}
The image works fine in Chrome and Opera (15+).
So the issue that is happening is the default effect of the browser, here is what happens in FF.
And the IE (10):
But its fine in Chrome, which means that there is no such effect in CSS.
So you must try and add this :
a > img {
border: 0;
}
It will remove the borders from all the images which are direct under the a hyperlinks.
Look at your code:
In your css file, on line 35 (if I am not wrong) you are having outline: medium none and border: medium none;
I removed that, and there was no border! Try it :)
I am trying to change the underline color during a hover event using spans and it works in IE9 and Firefox 13.01 but it doesn't work in Chrome (it should underline in gold).
#menu li:hover span.underline {
text-decoration:underline;
color: #FAA301; }
<ul id="menu">
<li style="z-index: 7;"><span class="underline">link1</span></li>
</ul>
Here is js.fiddle: http://jsfiddle.net/wuUpL/7/ .
I originally got the idea from this post https://stackoverflow.com/a/1175402/1490248 but that one doesn't work in chrome either.
Note: I don't want to use borders to fix this, I am already using borders as a border
Can anyone help me out here? Is there some sort of chrome hack/exception I could use to fix this?
I know you said you didn't want to use borders here, but you have found something that doesn't work the same between the two browsers.
You can get this to work on Chrome by adding an inner span and using a border on it.
http://jsfiddle.net/wuUpL/10/
Sorry if it is not what you had in mind, but Gecko and WebKit are not agreeing on something here!
Maybe worth noting that generally setting different parent and child text colour to get differently coloured underline works even in Chrome. But there is some weird bug in link decoration inheritance in Chrome:
u {
text-decoration: underline;
color: red;
}
u:hover {
text-decoration: overline;
color: green;
}
u * {
text-decoration: none;
color: black;
}
u:hover * {
text-decoration: none;
color: gold;
}
<p>
<u>
Parent with decoration.
<span>Child (is a <code>span</code>). This works: <code>text-decoraion</code> has differrent (parents) colour, always.</span>
</u>
</p>
<p>
<p>
<u>
Parent with decoration.
Child (is a <code>link</code>). This does not work <strong>in Chrome</strong>: <code>text-decoration</code> has always childs colour.
</u>
</p>
What is strange is that both innermost elements have exactly same computed style in Chrome (according to the Dev Tools), so it seems there is nothing to do to fix that now.
In the future it will be possible to use single element and text-decoration-color CSS property.
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;.