I am using following CSS:
#userinfo_box a:link,a:visited
{
text-decoration:none;
}
#userinfo_box a:hover
{
text-decoration:underline;
}
The HTML is
<div id="userinfo_box">Hello World</div>
In IE6, Hello World is not being underlined. How to do it in IE6?
The only reason why IE6 might not be working in this instance is because the href is blank. Sometimes IE6 doesn't recognize a link properly if that property is blank. Try setting it as href="#" and it should work.
At the very least put a # in the href. Nothing in the href means it's not a link...so that might be your problem right there. If that doesn't fix the problem, let me know, and I'll install Multiple IE on my VM to test IE6.
<div id="userinfo_box">Hello World</div>
note that the selectors in your first ruleset should probably be corrected to:
#userinfo_box a:link, #userinfo_box a:visited {}
Related
I have this character code <span class="psi">Ψ</span> for a psi greek character.
This is the css code for
.psi{
color:red !important;
}
the class psi.When i try the code out in my firefox web browser,the character is not red. Why is this?.
That can happen only if you have another rule (more specific) with !important that also applies to that element.
For example
#wrapper span{
color:blue !important;
}
.psi {
color:red !important;
font-size:3rem;
}
<div id="wrapper">
<span class="psi">Ψ</span>
</div>
So check for overlapping rules.
(and try to not use !important. You should be able to do what you want by using more specific css rules)
You cannot change the color of some html entities in Firefox (at least up to 60.0b8). Some examples are ❓ and 📖:
.psi{
color:blue !important;
}
<span class="psi">❓</span>
It works in Chrome.
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 am developing my first website using html5boilerplate and I'm experiencing a strange thing. When doing an anchor and clicking it, it moves to the right. This it only happens on Firefox and not on Chrome, for example.
You can see an example of this with my exact CSS: http://jsfiddle.net/PuEzv/
How I can solve it?
Thank you in advance!
Its a bit late to answer, but still:
Remove or modify following code to avoid the "jumping" for all links:
#submenu a, a:active, a:visited {color:#f1f1f0; margin-left:1px; margin-right: 1px;}
To keep it enabled for #submenu, I think you muste write your css selectors like this:
#submenu a,#submenu a:active,#submenu a:visited {color:#f1f1f0; margin-left:1px; margin-right: 1px;}
I hope that helped!
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
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;
}