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.
Related
I used a simple css effect that frames an image and changes the frame color on hover over. Despite the effect working perfectly on ie9 and chrome, the effect is jittery on firefox, it just kinda sticks on the hover over and only works if you hover from below the image with your mouse? and the frame color change sticks on effect mode, very messy looking. Anyone have an idea on how to correct this for firefox. the css is pretty striaght forward
.highlightit img{
border: 4px solid #FFCCFF;
}
.highlightit:hover img{
border: 4px solid #f35c93;
}
.highlightit:hover{
color: red; /* Dummy definition to overcome IE bug */
}
Sorry I tried to enter the html code, but it's not being accepted.
Many thanks
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/
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.
Has anyone idea why cell border on this page http://www.skirent.pl/informacje/cennik.html is well rendered in FF, but not in IE and Chrome?
I used CKEditor to generate this table, and I cannot find what I did wrong.
You have to specify a border with CSS (currently it isn't).
#subright th{
border: 1px solid #000;
}
http://www.w3schools.com/css/css_border.asp
I think, you can't do this in CKEditor directly.
I have the following drop down menu and the background looks black in Chrome but white on Firefox/IE/Safari across Windows/Linux/Mac. I'm using the latest versions of all those browsers.
<style>
select {
background-color: transparent;
background-image: url(http://sstatic.net/so/img/logo.png);
}
</style>
<select>
<option>Serverfault</option>
<option>Stackoverflow</option>
<option>Superuser</option>
</select>
Does anyone know how I can style the above so that Chrome shows the background as white when the color is set to transparent like in the other browsers?
EDIT:
My goal is to display an image in the background of select. The image shows up properly in every browser except Chrome.
According to this and this, it is a bug in Chrome that is supposed to be fixed.
The bug appears in version 2.0. I just tested it in 3.0-beta, and it's fixed.
Why are you using background-color: transparent; for "select"? If you remove that chrome works.
What is the effect you are after? Maybe some demo?
This answer https://stackoverflow.com/a/5806434/964227 that I found in another question just like this worked perfectly for me.
Apparently Chrome doesn't accept an image as a select background. So, in order for the color to work, you have to remove the image and then set the color. I'll just copy and paste the other answer here.
select {
background-image: none; /* remove the value that chrome dose not use */
background-color: #333; /* set the value it does */
border-radius: 4px; /* make it look kinda like the background image */
border: 1px solid #888;
}