currently i'm having 2 issues. first of all, in chrome and safari there is a gray border around an image link. the border isn't there in firefox. here's the code:
Link title <img class="leaving" />
and css:
.leaving {
background-image: url("images/leaving.png");
height:10px; width:10px;
display:inline-block;
background-repeat:no-repeat;
border:none;
}
how do i get rid of the border?
also, certain heading links are being underlined in chrome and safari even though i set text-decoration to none. i would like to know how to get rid of the underline and also how to change it's color.
<a href="link">
<h3>Title</h3>
</a>
a h2,h3{
color:#00264B;
text-decoration:none;
}
"a" is set to underline in other places, but shouldn't "a h3" override anything else? what's going on here?
thanks.
you have a possible bug in your code :)
Here's what you have so far:
a h2,h3{
color:#00264B;
text-decoration:none;
}
The code above say's all H2's which are contained with "a" tags, and all h3's (which are NOT contained within "a" tags)
Firstly if you want all H3's which are contained inside "a" tags, then you need to do this:
a h2, a h3{
color:#00264B;
text-decoration:none;
}
Notice that I've added another "a" to the CSS
Secondly, and perhaps more importantly, I think it's better form to enclose "a" tags inside "h" tags as opposed to the way you are doing it:
h2 a, h3 a{
color:#00264B;
text-decoration:none;
}
But that might not work with your existing code:
Hope this helps
It is famous cross browser issue across Firefox and Safari. How ever the workaround for this problem is replace the img tag with span tag and every thing works as expected. I have changed the code as below
<body>
Link title <span class="leaving"/>
</body>
</html>
or if you want to continue with the img tag itself you need to remove width attribute from css definition. Please find the modified css below
.leaving {
background-image: url("images/leaving.png");
height:10px;
display:inline-block;
background-repeat:no-repeat;
border:none;
}
Related
I have a Div tag in aspx page
<div id="mainDiv">
...........
</div>
Following style is working for it all right except background-color. Any changes made in following class also work. background-coloris also applied at design time in visual-studio but does not work at run-time. Any reasons?
#mainDiv
{
width:95%;
background-color:Silver;
font-weight:bold;
color:Maroon;
}
Update Instead of background-color:Silver;, I have tried background-color:Silver !important;but no difference. However changing color:Maroon; to color:Blue; affects
Edit I have no other css files for this page only one css file is linked to it
Edit I had two divs inside the mainDiv there style was float:left when I removed float:left I was able to see the changes in background-color of mainDiv. Still do not know the reason
Instead of Silver try using Hexadecimal Color Codes
background-color:#C0C0C0;
There may be some conflict wiith other CSS on that page as this works fine:
<div id="mainDiv">
content here
</div>
CSS
#mainDiv {
width:95%;
background-color:Silver;
font-weight:bold;
color:Maroon;
}
See here: JS Fiddle
I have this code:
<div id="NAHC-topText">
<h2>Link To Somewhere</h2>
</div>
I want to have CSS remove the underline and change the hover colour as the user rolls over the link. The link loads simple html.
I don't see to be able to implement this in the div tag successfully.
Any clues?
Thanks
So just set the appropriate values in CSS.
a {
text-decoration: none;
}
a:hover {
color: red;
}
Depending on your actual need, you may want to change the selector to #NAHC-topText a instead of just a.
In adittion to Sirko's answer , if you want to affect only
<a>
within Yours
<div id="NAHC-topText"> <h2>
Your stylesheet should look like this , in order to exclude any other anchors and headers.
#NAHC-topText h2 a {text-decoration:none;}
#NAHC-topText h2 a:hover {color:red;}
But of course there is nothing wrong with Sirko's answer , only it would affect all Your Anchors within the particular document.
Also if You want the underline only to display upon hover , you simply define
a {text-decoration:none;}
a:hover {text-decoration:underline;color:red;}
with the particular selector of Your choice
now that i red Your question again , this applies vice versa for the opposite situation
when You want it first underlined , and upon hover without underline , you simply swap the condition for each situation.
<style>
#NAHC-topText a{text-decoration:none;}
#NAHC-topText a:hover{color:red;}
</style>
#NAHC-topText a:hover{
color: red;
text-decoration:none;
}
I'm having an issue with IE8 where when an image is clicked inside of a link, the :active selector is not being triggered by IE.
Example:
HTML:
<img src="http://www.w3schools.com/images/pulpit.jpg">
CSS:
a {
display:inline-block;
padding:10px;
border:1px solid #F00;
}
a:hover {
border-color:#0F0;
}
a:active {
border-color:#00F;
}
Live demo: jsFiddle
When clicking the area around the image, the link acts normally, but when clicking the image itself, it fails to update.
Any ideas on why this is happening and if there are any workarounds? Since it is mostly working I don't mind appending some JavaScript if needed.
It may work better if you put the states on the img, but I can't get rid of the outline. http://jsfiddle.net/wSp7J/3/
Lets say this markup:
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
So this was my a attempt:
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
-EDIT-
We are looking for IE=+7/8 version capable solutions..
Salut
Try something like this:
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}
<div class="Twitter">Twitter</div>
Maybe this is not the best solution, but it works.
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
If you check the specification for the :first-letter pseudo-element, you'll notice the following:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The important word here is "block."
You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
For your given markup, one solution to your problem would be to style the anchor this way:
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
Another way is to use color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
JSFiddle
However, this won't work for lte IE8.
References:
IE7 IE8 IE9 color:transparent property
color: transparent is not working in Internet Explorer
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.
Here's something using color:
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
shoot the content off the page and show the letter using dynamic content:
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)
Demo
HTML:
<div>Ding Dong</div> and other stuff
CSS:
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
Here's what I do:
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
I got one strange problem which I never got before. Please see this code:
The css:
#btn{
margin-left:150px;
padding:10px;
display:block;
}
#btn a{
padding:5px 20px;
background:green;
color:#FFF;
text-decoration:none;
outline:none;
}
#btn a:hover{
background:#933;
}
#btn a:focus, #btn a:active{
background:#CF0;
color:#000;
}
Here the HTML
<div id="btn">
Click here
</div>
The focus and active css working well in firefox, but not in the chrome and safari.
Yeah seems like little problem with focus in webkit. Not really a bug. Easily fixable in html. Just use tabindex.
[hide]
[show]
ta da ...
This is also the case for Webkit based 'focus' events, it doesn't take. The fix is to put a tabindex="0" attribute on the A and then it receives the focus event. You might also want to have at least a "#" as the href just in case.
It's fixable, some additional code needed though...
<div id="btn">
Click here
</div>
jsfiddle
I know it's ridiculous... You can read more here
Hope this helps
The solution posted by user1040252 did the trick for me.
I have a div with images that sets an image in a span tag to visible on a click.
Firefox ignores the classname:focus in my CSS file.
<div class="thumbnail_frame">
<img src="pictures\\figures\\thumbs\\image_1.JPG"/>
<span>
<img src="pictures\\figures\\image_1.JPG"/>
</span>
</div>
My CSS (part of it):
.thumbnail_frame:focus span{visibility: visible;}
//...
.thumbnail_frame span
{
visibility: hidden;
position: fixed;
top: 20px;
left: 20px
}
But this only worked in Internet Exporer 9. Firefox 12 kept ignoring the focus also in other simple examples like found here:
explanation:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm
try it:
http://de.selfhtml.org/css/eigenschaften/anzeige/pseudo_links.htm
But adding tabindex="0", as in
<div tabindex="0" class="thumbnail_frame">
<img src="pictures\\figures\\thumbs\\image_1.JPG"/>
<span>
<img src="pictures\\figures\\image_1.JPG"/>
</span>
</div>
works like a charm. One click opens the hidden span, and the second one closes it very neatly.
Use tabindex="0" to make an element focusable if it is not already. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex for more information about tabindex.
Setting tabindex to -1 makes it unfocusable. Setting tabindex to a positive integer is not recommended unless you're trying to explicitly set the tab order, as it can create accessibility issues.
For more information about tabindex and accessibility, see https://webaim.org/techniques/keyboard/tabindex.
You should know that the pseudo class :focus doesn't go with A. The A tag has 4 pseudo classes : :link, :hover, :active, :visited