When I mouse over a table row in a certain part of my table, I'd like the background to change to a linear gradient. The CSS is straightforward:
tbody.row-links tr:hover {
background: ...typical multi-browser linear gradient code...
color: #333C3E;
cursor: pointer;
}
Works great in FF, Chrome, and Safari but not in any version of IE. I know the CSS is resolving because the color and cursor change. I tried placing the filter on the plain <tr> tag itself and still nothing. Does IE just ignore filter on table rows?
The best thing I can come up with is to apply the gradient to the <td>s of the row when the row is hovered, but that causes a lovely flickering while mousing about the row.
For now I'll just give IE a solid color background on hover. Has anyone else tried this and figured it out?
You can use something like:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
for IE9
OR
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
for IE10
older IE only with images.
Related
I have a fairly simple hover effect on a span inside a button
HTML:
<span class="content">text</span>
CSS:
span.content:hover {
background-color: #2b9385;
background-image: linear-gradient(#2b9385, #007571);
color: red;
}
When I hover over the span, it works fine in Edge and Chrome. In Firefox and IE 11, nothing happens.
Here is the weird part. If I use the dev. tools and inspect the element with hover checked, the CSS changes to the correct values and the background of the span changes correctly on the screen, it just doesn't work when I actually hover over it with the mouse. If I add "color:blue" to the hover section, the text color changes as it should when I hover over it, only the background part doesn't work.
I've tried adding vendor prefixes to the linear gradient part, but it didn't help (and shouldn't be needed in either case). Using #hex color values also didn't help.
Any clues appreciated.
I've added a Pen so you can see that it works in Chrome but not in FF. If you inspect the .content span in Firebug and click on the hover checkbox, the styles will be applied correctly, even though hovering over the button does nothing.
Pen
Just try this. It will definitely help.
.progress-button:hover span#button_content.content {
background-color: #2b9385;
background-image: linear-gradient(#2b9385, #007571);
cursor: pointer;
color: red;
}
I think you are missing colon(:) so just try this
background-image:(red, orange);
I have some buttons that have a gradient on them but i need my website to be ie9 friendly and the buttons just appear white inside. How do I write an alternative colour into my code to fall back on if the gradient fails?
background: linear-gradient(#bed738, #61bc4b);
border: 1px solid #80af37;
Just include the solid color property before the gradient. Browsers that don't understand the gradient will ignore it and use the previous property:
background: red;
background: linear-gradient(#bed738, #61bc4b);
I tried to follow the advices in CSS: semi-transparent background, but not text. I'm happy of the results in Firefox, Safari, Opera and Chrome. With these browsers I obtain a result similar to the one below, where you can see the background in transparency under the header. However, I've problems with IE.
You should click here to see the jsfiddle.
In IE8 is OK, but in IE6/7 there is no colored band at all. Anyone knows how to fix it?
In div.header:
Remove:
background-color: #0a5787;
background: transparent;
Add:
background: none;
zoom: 1;
Change:
/* For IE 5.5-7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#900a5787, endColorstr=#900a5787);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#900a5787, endColorstr=#900a5787)";
This works on IE7 when I test it and in theory I'm sure it should work in IE6, but on my emulator it is not working.
JSFiddle: http://jsfiddle.net/3jEbC/
Sorry for the obtuse title; here's a jsfiddle example.
Basically, I've got a div inside of another one. The big one has a light blue background, and the little one has a darker blue background.
I want to give the smaller one a border on hover, so I start it with the same size border but the same color as the background (so that it doesn't move around when the border is added).
This border that is the same color as the background artifacts when there's a border radius. Take a look at Chrome:
But Safari is fine:
Is this a known bug? Can I submit a report?
And more importantly, is there a workaround?
How about making your border transparent:
border: 2px solid transparent;
To make this work in IE6, you can add:
*html #inner
{
border-color: pink;
filter: chroma(color=pink);
}
The IE workaround is from http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/
Sometimes you can solve these issues by using background-clip: padding-box;.
It doesn't work quite perfectly on your jsfiddle example (http://jsfiddle.net/KPAVU/5/), but may have better results with the real markup.
I'm using the <body> tag as a wrapper for three divs on a site where every single background color is white.
I've set the background color to #fff for the html and body in the css, and the site is rendering correctly in every browser (including IE 6 and 7) except IE8:
I've even tried setting the style for html directly inline like so: <html style="background-color: #fff"> but that doesn't seem to change anything.
Not even sure what might be causing the bug.
The problem is the following property in your CSS:
:focus{
outline:0;
background-color:#f2f3f6;
border-color:#996
}
Apparently, on loading IE8 decides that the html element has focus, whereas other browsers don't do this. Remove the background-color property here and it'll all stay white.
What happens when you insert this code into your HTML?
body div
{
background-color: white !important;
}
Normally, browsers interpret and apply the last line of CSS that they read to an element, so background-color: red; background-color: blue; would result in a blue background color.
!important tell the browser to ignore all other property re-decelerations, so background-color: red !important; background-color: blue; would make the background color red, even though you told it to be blue.
I think background:#FFFFFF; will fix it. It worked for me.
internet explorer support 6digit color code i.e. instead of #fff .. use #ffffff
I hope you may understand this