According to http://www.w3schools.com/cssref/sel_not.asp the "not" selector is supported in IE9
However the following doesn't work in ie9:
HTML:
<input type="checkbox"><span>I agree to the terms and conditions</span>
CSS:
input:not(:checked) + span
{
font-weight:bold;
text-decoration:underline;
color:red;
}
When you check the checkbox, the style is still applied. In other browsers (FF, Chrome) it works as expected.
Is it some sort of bug with IE9?
Thanks.
I don't know what the bug is exactly, but I have got a workaround for you.
With some experimenting I discovered that if you put this line
input:checked + p {}
above your CSS, your CSS works fine in IE. So I propose you just put that in and forget about it, unless you want to invest a lot of time in finding out what the extent of the bug is exactly.
input:checked + p {}
input:not(:checked) + span {
font-weight: bold;
text-decoration: underline;
color: red;
}
<input type="checkbox"><span>I agree to the terms and conditions</span>
To test, you can comment out the first line, and then it stops working in IE.
Related
It seems IE doesn't care for text-decoration: none; defined for a:before pseudo element (or pseudo class).
Here is a JS Fiddle: http://jsfiddle.net/9N35f/
I'd expect the ">" to lose the underline. It does in FF, Chrome and Safari, but not in IE. Tested with IE10 and IE9.
The question:
Any workarounds that I could try to make the :before element lose the underline? Ideally in IE9+
Is there a bug report for this somewhere? Or is it actually by the standards?
I'm aware this is a rather elderly thread, but having just been up against this problem in IE 11, and unable to find much help, I decided to experiment. Aided by a significantly improved dev tools than in the earlier versions I managed to figure it out - for what I'm working on at any rate. Chances are it'll work for others as well, although you might need to tweak. YMMV.
The HTML:
<li>Whatever</li>
The CSS (edited after #frnhr pointed out that the initial version I posted didn't actually work):
a {
display: block;
position: relative;
padding-left: 15px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:before {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2px);
overflow: hidden;
content: ">";
}
The secret sauce is setting the height and the overflow: hidden; line; it means that the underline is still there but outside the viewport provided by pseudo element, and so never gets seen on screen. It also works across other browsers (tested on Chrome and Firefox as well). Depending on your existing styling you'll probably want to tweak the pixel value in the calc() value.
See http://jsbin.com/biwomewebo/1/edit?html,css,output
IE seems to be in error here, since display: block in your code should remove the underlining. According to clause 16.3 Decoration in the CSS 2.1 spec, “User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.”
There does not seem to a bug a report on this at the IE Feedback Home.
In this case, a suitable workaround might be to use an image as the generated content:
a:before {
content: url(arrow.png);
}
where arrow.png refers to a suitable small icon. The use of url(...) in content is described in CSS3 Generated and Replaced Content Module, which is a seriously outdated draft (the last version is from 2003), but this part has been widely implemented in browsers. Not in IE 7, however. So if you wish to cover IE 7 as well, consider the approach in #EugeneXA’s answer, possibly generating the extra markup dynamically with JavaScript.
If the background is white you may use the bottom border:
a {
text-decoration: none;
border-bottom:1px solid blue;
}
a:before {
content: "> ";
border-bottom:1px solid white;
}
Not sure what standards say, but IE behavior seems to be more logical. Think of :before as an element inside of <a> tag, not outside of it. Child's text-decoration property should have nothing to do with its parent's.
This workaround will work
http://jsfiddle.net/9N35f/4/
<span>a link</span>
a {
text-decoration: underline;
}
span:before {
content: ">";
}
Another solution is to set a small line-height (heightdoes work too) and set overflow: hidden so the underline disappears.
I know this is not the best solution, because the line-height value depends on the character you use. In this case 0.6 is a good value but maybe not for another character.
In my case it was a good solution because I had the problem with only one certain character with a fixed font-size.
a {
text-decoration: underline;
}
a:before {
content: ">";
display: inline-block;
text-decoration: underline; /* simulate IE behavior */
line-height: 0.6; /* line-height must be smaller than font-size */
overflow: hidden;
}
JSFiddle Demo
This works for me:
html:
<span>a link</span>
css:
a {
text-decoration: none;
}
a span {
text-decoration: underline;
}
a:before {
content: ">";
}
In this the before tag is still part of the anchor.
I am having a problem with how the <p> text-indent property is rendered when a page is printed with Internet Explorer's Active-X plugin. Here is the relevant CSS:
p {
font-family: Calibri;
font-size: 20pt;
line-height: 1.75em;
margin-bottom: 1.00em;
margin-top: 1.00em;
margin-left:1.0em;
margin-right:1.0em;
text-indent:1.5em;
}
Below you can see what is happening when the HTML page, using the above code, is printed:
The top of every new page has the text indentation applied! Is there an alternative method of having the first line of every <p>"paragraph tag" indented without using "text-indent" property? The solution must be browser independent.
What about using ::first-letter pseudo-element?
p:first-letter {
padding-left: 30px;
}
JsFiddle Demo
Browser Support
Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3.5+ 5.5+ All All
You could use pseudo elements to mimic the effect of text-indent
p:before
{
content: '\00A0 \00A0 \00A0 \00A0 \00A0 \00A0 \00A0';
dispay:inline-block;
}
FIDDLE
EDIT: (As per the questioner's comments below)
If the above CSS solution(s) don't work for you, then maybe instead of using css
you could just append a fixed number of non-breaking spaces after each paragraph element.
Like so <p> ...
FIDDLE
You could do this simply by copy/replace:
<p> -> <p> ...
Scenario
I have a CSS selector that is supposed to display sub-content when a label is clicked. The selector is along the lines of input:checked + element + element giving that final element a display of block (default is none). The problem is that it works in all the major browsers with the exception of webkit. Chrome, Safari, and a mobile browser for android (v2.2 sorry, I'm behind the times) all fail to display the element. When I inspect the element in Chrome, it shows that it is supposed to be display: block but it doesn't render it. I can unchec and check the property in developer tools and it displays, but not before.
I assume that this is a bug in webkit.
Question
Here is the multipart question: Is this a known bug in webkit? Am I doing anything wrong with my selectors? And how can I work around the issue for webkit browsers (any creative suggestions)?
Code
HTML
<input id="c1" type="checkbox">
<label for="c1">Ein</label>
<section>Content</section>
<input id="c2" type="checkbox">
<label for="c2">Zwei</label>
<section>Content</section>
<input id="c3" type="checkbox">
<label for="c3">Drei</label>
<section>Content</section>
CSS
input {
float:left;
clear:left;
visibility: hidden;
position:absolute;
}
label {
color:green;
display:block;
cursor:pointer;
}
section {
display:none;
}
label:after {
content:" +";
}
input:checked + label:after {
content:" -";
}
input:checked + label + section {
display:block;
}
Demo
Demo: http://jsbin.com/epibin/2
Source: http://jsbin.com/epibin/2/edit
Chain A Pseudo-Class
This demonstrates that this code fixes the bug (note that nth-child(n) matches any element, but the adding of it into the chain causes it to work):
input:checked + label:nth-child(n) + section {
display:block;
}
#ScottS provides a solid solution. Another possible one that worked for me and makes more sense from an outsiders "why the heck did they do that" point of view:
input:checked ~ section {
display:block;
}
which selects every 'section' that come after and are siblings of 'input:checked'.
There are two conditions I can think of where #ScottS's version is superior because the element in the position of 'label' gets selected as well in my solution:
(1) 'input's sibling #1 & #2 are the same elements (instead of 'label' & 'section')
(2) you are trying to be general by using the '*' selector.
sounds like a match to Bug 45168 – CSS multiple adjacent sibling selector sequence is ignored if prefixed with a pseudo-class selector
if you swap the <label> and <input> structure in the markup (and adjust the CSS accordingly) it works.
http://jsbin.com/epibin/10/edit
(but now the + - don't toggle)
EDIT:
putting the <label> and <section> in a div container works: http://jsbin.com/epibin/12/edit
As mdmullinax states, this is an outstanding bug in chrome.
This hack worked for me from the link in the accepted answer:
body { -webkit-animation: bugfix infinite 1s; }
#-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
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.
Say you have this html:
<a href="#">
This is underlined
<span>
This isn't.
</span>
</a>
And this css:
a:hover {
text-decoration: underline; /* I know, this is enabled by default. */
}
a:hover span {
text-decoration: none !important;
}
Why does the a > span element still has an underline. I'm pretty sure you should actually have undone the decoration by using 'none'. I know that you can achieve the result I want by using this:
<a href="#">
<span class="underlined">
This is underlined
</span>
<span>
This isn't.
</span>
</a>
plus this css:
a:hover {
text-decoration: none;
}
a:hover span.underlined {
text-decoration: underline;
}
But... it just doesn't make sense to me why you can't unset the text-decoration of a child-element.
So, why...?
Edit: Inline-blocks
According to #amosrivera, it does work when you use inline-block. I can confirm this to work in Safari and Chrome!
a:hover span{
text-decoration:none;
display:inline-block;
}
As mentioned, this works for Safari and Chrome, but not for Firefox. The following solution works for Firefox, but not for Safari and Chrome...
a:hover span{
text-decoration:none;
display:block;
}
Little table:
CSS-Rule | Webkit | Firefox | Opera | IE
--------------------------------------------------------------------------------
display: block; | x | | ? | ?
display: inline-block; | | x | ? | ?
It has to do with the fact that span is an inline element. Try this:
a span{
text-decoration:none;
display:inline-block;
}
Online demo: http://jsfiddle.net/yffXp/
UPDATE
In FF (4?) only display:block works (which at the same time in webkit doesn't), causes line break.
UPDATE 2 (hack?)
a span{
display:inline-block;
background:#fff;
line-height:1.1em;
}
Overlaying the white background over the border is not pretty but it seems to do it. It works in every browser other than IE 6,7
Online demo: http://jsfiddle.net/yffXp/6/
There might be some incredibly zany cross-browser way to do it, but I'd just go with this (a variation of the solution in your question), for the sake of sanity:
It just works: http://jsfiddle.net/KrepM/1/
HTML:
<a href="#">
<span>This is underlined</span>
This isn't.
</a>
CSS:
a:hover {
text-decoration: none
}
a:hover span {
text-decoration: underline
}
As a solution, I'd use #thirtydot's one, but as far as the problem is concerned, I think you are looking at it the wrong way.
Check the following fiddle: As you can see the non-decorated part is not decorated with the colour given; what you are seeing is the colour of it´s parent that extends to the end of the element (as spaces in an a are underlined as well). So the browser is really doing what you are telling it to do, you just don´t see it.
As a reference, compare the previous fiddle with this one. And guess what happens when you change the colour of the span to the background colour...
Caught that problem when I used a class for my link.
×
If I used .close in my css chrome and safari kept underlining the link. When I added a tag before class name everything started working fine.
a {
text-decoration: none;
}
a.close {
color: black;
}
I came across this problem today, but for pseudo elements, which amounts to the same situation and I was able to find a solution. Set overflow:hidden; on the child element. Then set your height of the child element slightly smaller than the height for the rest of the link. You'll have to play with the height a few times to get it just right, but eventually you should be able to make the underline disappear.