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/
Related
I'm trying to highlight the currently hovered table row with an outline. It works flawlessly in Firefox and Chrome... but Safari somehow clips the outline.
The 1st image shows Firefox... the 2nd is Safari.
The CSS is rather simple:
table tbody tr:hover {
background-color: #48f2;
outline: 3px solid #48f8;
}
What could cause this behavior? Is this a known bug?
PS: Hiding Safari (CMD+Tab) and showing it again without any mouse movement renders the <tr> properly... so I consider it a display bug. But maybe there is a workaround?
I've tried something obvious today... and it worked:
/* default state for Safari */
table tbody tr {
outline: 3px solid #0000;
}
/* highlight table row upon hover */
table tbody tr:hover {
background-color: #48f2;
outline: 3px solid #48f8;
}
Simply setting a transparent outline for the default state solved this Safari bug. I guess Safari determines the outer boundings during initial render of the page and uses it to further optimize the rendering later.
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.
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/
Changing the border-bottom attribute along with removing text-decoration creates the colored underline in some browsers (I can vouch for FF 5 and 6 for sure). But other browsers (at least Safari & Chrome) don't display any line.
For example of the problem, see utsarotaract.org (there is a link in the bottom paragraph of the index page).
Since I've seen this work other places, I'm assuming that some of my CSS is clashing but I'm stumped as to where exactly the problem is.
The issue is the size of your border. Change your 0.5px border to 1px instead and it will work. Live example: http://jsfiddle.net/tw16/WcrNA/
.content a {
border-bottom: 1px solid #A80532; /* instead of 0.5px */
color: #000022;
text-decoration: none;
}
You may want to use:
<a><span>I'm a link</span></a>
with the following CSS:
a {
color: blue;
}
span {
color: green;
}
The alternative being using a border-bottom. It's also a cross-browser solution. You'll just have to set its padding/margin/line-height to make it consistent from a browser to another.
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.