I cant get underline to work in safari, it seems to be picking up the default link style of underline none, instead of the css below.
Any ideas what could be causing this?
div.header .container .accountPannel .top a.alias { color:#fff; font-size:10px; float:left; text-decoration:underline !important; max-width:108px; overflow:hidden;}
Thanks in advance.
I am going to assume here that you have made a user stylesheet for Safari that turns the underlines for links off, because Safari doesn't have a program setting for those underlines.
So, what has probably happened is that you have
text-decoration: none !important;
in your user stylesheet.
And user stylesheets always override document stylesheets. So no matter if you put !important in the document or not, the user style will always be in effect.
Solution: edit your user stylesheet to read simply
text-decoration: none;
and then it can be overridden by document styles.
The decorations are not propagated to floated or absolutely positioned descendants, or to descendant inline tables or inline blocks.
Related
First thing is, I can only edit the CSS/LESS portion of the code.
I've encountered a problem, there's a span that has a background color added on :hover and a different background upon clicking it, where it gets a class .active via JS.
Problem is, on iPad and iPhone on first tap it activates the :hover styles, a secondary tap is required to turn on the added class .active. Anyone knows how to ignore the :hover style and go straight to adding a class?
Much appreciated!
Place all your :hover rules in a #media block:
#media (hover: hover) {
a:hover { color: blue; }
}
Do this
a:hover {
background-color: transparent !important; /* If it works without adding !important, then do that. It's best to avoid !important */
}
Focus
This seems to be a known issue. Please check "https://getbootstrap.com/docs/3.3/getting-started/#support-sticky-hover-mobile" for more details. Few of the possible solutions to solve the above problem is "http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml"
Let's say if we go to Bootstrap's pagination section and moved that sample into our sample page, with no JavaScript whatsoever.
I think the "hover" and get grey background effect, as well as the "click" and grey background effect, is done by something like this, which I add to my page as well:
.pagination li a:focus { background: #fa6 !important }
.pagination li a:hover { background: #fa6 !important }
However, I don't know why when I inspect that <a> element on Google Chrome or Firefox's debugger, I do not see the CSS rule come into view, and also, I do not see the "computed value" of CSS showing a different value -- all it shows is #ffffff for white.
I thought I did see the :hover or :focus being listed in the CSS rules before (and the computed value will change as well in the past). What is happening and can we see that as before?
Bootstrap specifically target a to design it. You have to override the bootstrap by this way-
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover
{
background: #fa6
}
I would like to set the text-decoration: none while tabbing on Internet Explorer 7. At the same time I have to show text-decoration while hovering over the element. Is this possible?
I can't actually reproduce your error. See this fiddle: http://jsfiddle.net/NnKxx/1/
In IE7 it all works nice - if I tab to the elements they aren't underlined, only when I hover over them. This is without using the CSS I mentioned above.
Thing is in IE7 the :focus selector doesn't work, so it should be enough to just do the following:
a {text-decoration:none;} /* this is important! */
a:hover {text-decoration:underline;}
That is a default behavior in IE browser. Apply the fix's like border:none, text-decoration:none and outline:none; does not work.
here is the page : http://pfibco.ca/01-accueil-fra.php
I try to block hover highlight the menu... work almost fine
just the selected class dont apply... why ?
#menu ul li a .selected{
and the worst... the menu is completely destroy in ie6, why ?
i used the block propriety.. no choice for the hover...
display: block;
how to fix that ?
Try this for the selected problem:
#menu ul li.selected a {
The HTML has the selected class on the <li> so the CSS should match that.
I can't help you with IE6 though, it destroys a lot of things and my nerves are one of those things.
Answer for your IE 6 issues:
Each menu li tag seems having a style rule for line-height : 15.76pt, which is not found in other browsers. I guess IE6 incorrectly inherit the style from ancestor tag, maybe you can check you CSS file.
The border doesn't seem to work in each link, you can try to apply the border to its parent li tag instead of the anchor itself.
If you got hurry, you can use a litle hack for IE6 ( I'm got red now =X ).
/* hack for IE6 */
* html #menu ul li {
border: 1px solid #BFAF98;
border-top: none;
}
I think it's works fine.
I have this css:
fieldset li {
padding-bottom: 0em;
}
However, it wasn't behaving properly, and using firebug, I see that style has a line drawn through it, indicating it is being overridden. Is there a way in firebug to tell what is overriding a style?
In the style tab, this is all I see:
fieldset li {
clear:left;
float:left;
padding-bottom:1em;
width:100%;
}
Default.CSS (line 42)
fieldset li {
padding-bottom:0;
}
Default.CSS (line 27)
Inherited fromol
fieldset ol {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
Default.CSS (line 23)
Inherited fromtable#ctl00_ContentPlaceHolder1_ScorecardEdit1_frmEdit
element.style {
border-collapse:collapse;
}
When I go to the computed tab, I see it has padding-bottom of 16px. How can I find out where this is coming from?
All the answers so far seem to imply I should see all the applied styles in the style tab (and I swear this is how it worked last time I used firebug), but this time I am not seeing all styles!
(I am running Firebug 1.5.2)
Solution
I'm an idiot. It was caused by this (which was staring me right in the face):
fieldset li {
clear:left;
float:left;
padding-bottom:1em;
width:100%;
}
It was the em that threw me off. That's what you get when you copy / paste CSS from the web without understanding it.
They are sorted, so the most upper definition overrides the lower one(s).
What ever styles are above the crossed out styles are usually overriding it. If that is not the case, start clicking the disable style icons and see where the issue is.
If a CSS rule is overridden although it is the top-most rule of that property, look further down for a rule that has the !important override set.
Just locate the instance of that attribute name that isn't crossed out, that is the one overriding.
If you select the misbehaving item in question, it should give you a list of all the styles applied to it. The bottom should have the most specific styles. If you start at the fieldset li style, you should be able to scroll down until you see one that has overridden it.