So, i'm having a bit of trouble with some css hover and tables. I got most things to work but while chrome changes the color just to the content and ignoring the padding, firefox does not. It just changes everything, padding or not. I just can't figure out how to make it look the same in both browsers even when using a css reset.
I tried this in firefox 35 and chrome 40.
Edit: Should've said that i was looking for firefox to display it like chrome does.
Here's fiddle with the code.
span {
height: 50px
line-height: 50px;
background-color: orange;
}
table {
border-spacing: 0;
}
tr > td {
padding-top: 6px;
}
tr:hover {
background-color: red;
background-clip: content-box;
}
In Chrome, it appears that the background-clip is being applied to the child elements, whereas in Firefox, it is being applied to the tr instead of the child elements.
To make Firefox behave like Chrome, simply change
tr:hover {
background-color: red;
background-clip: content-box;
}
To
tr:hover>td {
background-color: red;
background-clip: content-box;
}
And the background of each td will be clipped separately.
http://jsfiddle.net/degLm3vv/6/
The > operator specifies that the following CSS selector only applies to direct descendents of the previous selector. In this case direct td descendents of a tr that is being hovered over.
if you want chrome to look like firefox you have to use the webkit- prefix
background-clip: webkit-content-box;
http://jsfiddle.net/degLm3vv/5/
Related
I'm re-asking this question because its answers didn't work in my case.
In my stylesheet for printed media I want to append the url after every link using the :after pseudo-class.
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
}
In Firefox (and probably Chrome but not IE8), text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the url. The color however is correctly set to black for the url. Is there a way to make the text-decoration work?
The original question appended fixed size images instead of variable width text. Its answers use padding and background images to avoid having to use the text-decoration property. I'm still looking for a solution when the content is variable width text.
If you use display: inline-block on the :after pseudo, the text-decoration declaration will work.
Tested in Chrome 25, Firefox 19
IE8's implementation of the :before and :after pseudo-elements is incorrect. Firefox, Chrome and Safari all implement it according to the CSS 2.1 specification.
5.12.3 The :before and :after pseudo-elements
The ':before' and ':after'
pseudo-elements can be used to insert
generated content before or after an
element's content. They are explained
in the section on generated text.
...
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
The specification indicates that the content should be inserted before or after the element's content, not the element (i.e. <element>content:before content content:after</element>). Thus in Firefox and Chrome the text-decoration you're encountering is not on the inserted content but rather on the parent anchor element that contains the inserted content.
I think your options are going to be using the background-image/padding technique suggested in your previous question or possibly wrapping your anchor elements in span elements and applying the pseudo-elements to the span elements instead.
I had the same problem and my solution was to set height and overflow:hidden
http://jsfiddle.net/r45L7/
a {
text-decoration: underline;
}
a:after {
content: "»";
display: inline-block;
text-decoration: none;
height:16px;
overflow: hidden;
padding-left: 10px;
}
It works on IE, FF, Chrome.
As an alternative, you can use a bottom border rather than a text-decoration.
This assumes that you know the color of the background
a {
text-decoration: none;
border-bottom: 1px solid blue;
}
a:after {
content: "foo";
border-bottom: 1px solid white; /* same color as the background */
}
1)
:after{
position: absolute;
}
is not perfect, because element content will not wrap
2)
:after{
display: inline-block;
}
is not perfect, because sometimes we wish after content should always wrap with last word of element content.
For now, I could not find find a perfect solution fits all 3 conditions(1. content could auto-wrap if it's too long 2.after content should wrap with element content, which means after content should not occupy single by it self. 3.text-decoration should only apply on element condition not apply to after content.)
I thoughts for now is using other way to mimic text-decoration.
What I do is I add a span inside the a element, like this :
<span>link text</span>
Then in your CSS file :
a::after{
content:" <" attr(href) "> ";
color: #000000;
}
a {
text-decoration:none;
}
a span {
text-decoration: underline;
}
The only thing that worked for me was declaring a separate repeated selector with the same text-decoration property that it was inheriting from its parent, then in the main selector, setting text-decoration to none.
IE apparently does not know what to do when you set text-decoration: none on a pseudo element without that element having the text-decoration property declared (which by default, it has nothing declared by default). This makes little sense because it is obviously being inherited from the parent, but alas, now we have modern browsers.
span.my-text {
color: black;
font-size: 12px;
text-decoration: underline;
}
span.my-text:after {
text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below
}
span.my-text:after {
color: red;
text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element.
}
I realise this isn't answering the question you're asking, but is there a reason you can't use the following (background-based approach):
a.file_pdf {
background-image: url(images/pdf.png);
background-position: center right;
background-repeat: no-repeat;
padding-right: 15px; /* or whatever size your .png image is plus a small margin */
}
As far as I know, the Firefox implementation of :after observes the property of the selector's class, not the psuedo-class. It might be worth experimenting with different doctypes, though? The transitional, rather than strict, sometimes allows for different results (albeit not always better results...).
Edit:
It appears that using
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
background-color: #fff; /* or whatever colour you prefer */
}
overrides, or at least hides, the text-decoration. This doesn't really provide any kind of answer, but at least offers a workaround of sorts.
You can autoselect links to pdf-files by:
a[href$=".pdf"]:after { content: ... }
IE less than 8 can be enabled to work properly by implementing this link in the head of the html-file:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->
It works also very good in al IE versions when you use the after-before-content-thing for dosplaying quotation marks.
Position the content absolutely as follow:
a {
position: relative;
margin: 0 .5em;
font-weight: bold;
color: #c00;
}
a:before,
a:after {
position: absolute;
color: #000;
}
a:before {
content: '<';
left: -.5em;
}
a:after {
content: '>';
right: -.5em;
}
This works for me in Firefox 3.6, not tested in any other browsers though, best of luck!
Hi I was also having trouble with this as well and happened to stumble across a workaround.
To get around it, I wrapped the URL in div and used something like this.
.next_page:before {
content: '(';
}
.next_page:after {
content: ')';
}
I'm trying to use CSS currentColor as a border-color to generate CSS triangles using :after content. This works great in all browsers I've tried, except one: Safari seems to be caching the currentColor from the first triangle it generates, and then using that everywhere.
Here's what I'm seeing -- expected behavior from Chrome (and Firefox, and IE9+):
Incorrect behavior from Safari 8.0.4 on Yosemite 10.10.2 (same on iOS 8.2) -- notice all three triangles are red, not the currentColor of their elements:
Here's a fiddle with the full code demonstrating the problem.
The relevant CSS:
span {
display: inline-block;
border-bottom: 2px solid currentColor;
}
span::after {
/* Generate a triangle (based on Foundation's css-triangle mixin) */
content:"";
display: inline-block;
width: 0;
height: 0;
border: inset 0.4em;
/* Safari seems to cache this currentColor... */
border-color: currentColor transparent transparent transparent;
border-top-style: solid;
}
.red { color: #c00; }
.blue { color: #009; }
The HTML is simple:
<div>
<span class="red">Red</span>
<span>Default</span>
<span class="blue">Blue</span>
</div>
Is this a bug in Safari? A matter of interpretation on the CSS spec?
More importantly, any suggestions for working around this? I'd hate to have to explicitly declare the color in separate :after rules for each element. (Using currentColor really simplifies maintenance as our other CSS changes.)
So, this turns out to be an actual Safari bug (which might be fixed soon).
I was able to work around it using this suggestion that border-color defaults to currentColor. Replace this:
border-color: currentColor transparent transparent transparent;
with expanded properties that avoid mentioning currentColor:
/* border-top-color: currentColor; is the default behavior */
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
and the problem goes away in Safari (and it still works in the other browsers).
Even I faced a similar issue, so i have to go with a small js trick.
With this trick we can use the currentColor attribute to be set correctly in the desired elements. but it can be achieved only for normal elements. so i moved the pseudo elements into normal elements.
You have to force safari to redraw elements to achieve this. To achieve redrawing elements simply hide and show it.
var nodeStack =[element];
while (node = nodeStack.pop()) {
if (node.nodeType == 1) {
node.style.display="none";
node.style.display="";
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
Check this simple codepen (Your code with little modification)
and also read this for brief info
Pseudo elements cannot be achieved through this trick. You have to move that into a span or some other element.
I have a situation where a parent element has a border-radius with a solid color border. This works as expected in all browsers except for Safari (5.1.7). In Safari, the child element's background color is bleeding into the border, and background-clip doesn't seem to be helping. Iv'e seen other people have similar issues that were resolved, is this an issue specifically with tables? Any ideas as to why the clipping doesn't apply properly?
http://jsfiddle.net/q3NF9/2/
Try adding the following CSS:
thead th:first-child {
border-top-left-radius: 15px;
}
thead th:last-child {
border-top-right-radius: 15px;
}
See example:
http://jsfiddle.net/q3NF9/8/
I found the css border on the table cell is lost when applying css gradient filter at the same time. It seems that the gradient effect overrides the border.
Is it a browser bug or am I missing something here?
The style is defined like this:
.c7 {
color: #000000;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#c0c0c0',EndColorStr='#f0f0f0');
border: #000000 1px solid;
width: 100px;
height: 30px;
}
[Update] You could apply an opacity filter and reduce it from 100 to 1, and you can see how border emerges gradually. It confirms my guess that the gradient effect shows over the border.
Applying this also works:
position: relative;
z-index: -1;
I've found a fix but you may not like it...
If you render in IE in quirks mode the border renders fine, it is only obscured if you're using compatibility mode. Compare these two pages in IE8:
With a DOCTYPE declaration
(source: boogdesign.com)
Without a DOCTYPE declaration
(source: boogdesign.com)
What also works is clicking the compatibility view button, but my attempts to get the same results with the compatibility mode meta tags were unsuccessful. I tried using box-sizing, but also with no success. I conclude the only way to get it to work as you want is to force IE into quirks mode, but that may create so many other issues for layout that you may be better off just adding a wrapper element to attach your gradient background to.
Use a DIV to contain the content in each cell. Apply the gradient to the DIV and put the border on the cell. The gradient will be restricted to the DIV and will not overwrite the border.
http://jsfiddle.net/WWCaj/1/
After trying lots of fixes I've come to the conclusion that its simply not worth trying to use filter CSS. A quote from #mdo who's behind the Twitter bootstrap css:
Filters are dangerous business in IE, especially 7 & 8. I'd rather not include those because it'd be huge performance losses for folks who overuse them.
Problems I hit applying css to td elements:
The position: relative only works for IE9, not IE8
The z-index: -1 doesn't work on td elements
If you do have a filter then you have to turn it off for hovering
My table looked better having the borders than having the gradient on the table cells
use position: relative !important;
Its work fine...
on the td:
/* enough for IE9 */
background-origin: padding-box;
background-clip: padding-box;
/* for IE8 */
position: relative;
worked for me.
also you may want to experiment with border-collapse as this bug behave differently between
border-collapse: separate
and
border-collapse: collapse
I tried all of these solutions with no success. So, I placed the gradient in the tr and then decided to use the ::before pseudo element and style a border on it. However, I didn't even get as far as adding a border to the pseudo element. The following was enough.
table thead {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
}
table th {
background: none;
border-right: 1px solid #a5a694;
background-clip: padding-box;
position: relative!important;
z-index: 100;
}
table th:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
}
But if that doesn't work you could also add a border to the pseudo class as I had originally planned:
table th:before {
border-right: 1px solid #000000;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
z-index: 1000;
}
Pseudo classes are great, I use them all the time and they have very wide browser support, even in IE8.
I'm re-asking this question because its answers didn't work in my case.
In my stylesheet for printed media I want to append the url after every link using the :after pseudo-class.
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
}
In Firefox (and probably Chrome but not IE8), text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the url. The color however is correctly set to black for the url. Is there a way to make the text-decoration work?
The original question appended fixed size images instead of variable width text. Its answers use padding and background images to avoid having to use the text-decoration property. I'm still looking for a solution when the content is variable width text.
If you use display: inline-block on the :after pseudo, the text-decoration declaration will work.
Tested in Chrome 25, Firefox 19
IE8's implementation of the :before and :after pseudo-elements is incorrect. Firefox, Chrome and Safari all implement it according to the CSS 2.1 specification.
5.12.3 The :before and :after pseudo-elements
The ':before' and ':after'
pseudo-elements can be used to insert
generated content before or after an
element's content. They are explained
in the section on generated text.
...
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
The specification indicates that the content should be inserted before or after the element's content, not the element (i.e. <element>content:before content content:after</element>). Thus in Firefox and Chrome the text-decoration you're encountering is not on the inserted content but rather on the parent anchor element that contains the inserted content.
I think your options are going to be using the background-image/padding technique suggested in your previous question or possibly wrapping your anchor elements in span elements and applying the pseudo-elements to the span elements instead.
I had the same problem and my solution was to set height and overflow:hidden
http://jsfiddle.net/r45L7/
a {
text-decoration: underline;
}
a:after {
content: "»";
display: inline-block;
text-decoration: none;
height:16px;
overflow: hidden;
padding-left: 10px;
}
It works on IE, FF, Chrome.
As an alternative, you can use a bottom border rather than a text-decoration.
This assumes that you know the color of the background
a {
text-decoration: none;
border-bottom: 1px solid blue;
}
a:after {
content: "foo";
border-bottom: 1px solid white; /* same color as the background */
}
1)
:after{
position: absolute;
}
is not perfect, because element content will not wrap
2)
:after{
display: inline-block;
}
is not perfect, because sometimes we wish after content should always wrap with last word of element content.
For now, I could not find find a perfect solution fits all 3 conditions(1. content could auto-wrap if it's too long 2.after content should wrap with element content, which means after content should not occupy single by it self. 3.text-decoration should only apply on element condition not apply to after content.)
I thoughts for now is using other way to mimic text-decoration.
What I do is I add a span inside the a element, like this :
<span>link text</span>
Then in your CSS file :
a::after{
content:" <" attr(href) "> ";
color: #000000;
}
a {
text-decoration:none;
}
a span {
text-decoration: underline;
}
The only thing that worked for me was declaring a separate repeated selector with the same text-decoration property that it was inheriting from its parent, then in the main selector, setting text-decoration to none.
IE apparently does not know what to do when you set text-decoration: none on a pseudo element without that element having the text-decoration property declared (which by default, it has nothing declared by default). This makes little sense because it is obviously being inherited from the parent, but alas, now we have modern browsers.
span.my-text {
color: black;
font-size: 12px;
text-decoration: underline;
}
span.my-text:after {
text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below
}
span.my-text:after {
color: red;
text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element.
}
I realise this isn't answering the question you're asking, but is there a reason you can't use the following (background-based approach):
a.file_pdf {
background-image: url(images/pdf.png);
background-position: center right;
background-repeat: no-repeat;
padding-right: 15px; /* or whatever size your .png image is plus a small margin */
}
As far as I know, the Firefox implementation of :after observes the property of the selector's class, not the psuedo-class. It might be worth experimenting with different doctypes, though? The transitional, rather than strict, sometimes allows for different results (albeit not always better results...).
Edit:
It appears that using
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
background-color: #fff; /* or whatever colour you prefer */
}
overrides, or at least hides, the text-decoration. This doesn't really provide any kind of answer, but at least offers a workaround of sorts.
You can autoselect links to pdf-files by:
a[href$=".pdf"]:after { content: ... }
IE less than 8 can be enabled to work properly by implementing this link in the head of the html-file:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->
It works also very good in al IE versions when you use the after-before-content-thing for dosplaying quotation marks.
Position the content absolutely as follow:
a {
position: relative;
margin: 0 .5em;
font-weight: bold;
color: #c00;
}
a:before,
a:after {
position: absolute;
color: #000;
}
a:before {
content: '<';
left: -.5em;
}
a:after {
content: '>';
right: -.5em;
}
This works for me in Firefox 3.6, not tested in any other browsers though, best of luck!
Hi I was also having trouble with this as well and happened to stumble across a workaround.
To get around it, I wrapped the URL in div and used something like this.
.next_page:before {
content: '(';
}
.next_page:after {
content: ')';
}