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
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.
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.
Working on my home page where I'm cycling through some images using JQuery's fadeIn and fadeOut methods.
The images have a border of 2px and a radius of 14px applied.
As you can see, the corners of the image are overlapping the border.
This behavior only happens in Safari and Chrome, not in Firefox and IE.
Anyone have any idea as to why?
You can see this behavior here:
http://www.findyourgeek.com/index-copy.php
Thanks.
Support for border-radius on images in Chrome/Safari (or rather Webkit) seems to be a bit buggy
Chrome -webkit-border-radius bug? - CSS-Tricks Forums
The above post is from earlier in the year (~Chrome ver 10) when the support for border-radius on images wasn't working. Support is available know but like you're seeing it still has some issues. You may want to report the bug you're seeing to the Webkit/Chrome/Safari projects. I know there was a fairly easy to find bug reporting page for Chromium, not sure about the other two.
Here are two ideas for workarounds:
you can apply sort of a CSS3 hack by removing the 2px border and setting a 2px stroke box-shadow (box-shadow:0 0 0 2px #606060;). This would have a few drawbacks as it's only a fix for Chrome/Safari example jsfiddle
or of course the other option is to edit the photos to give them rounded corners (http://www.roundpic.com/ is a good site for this)
try removing the border styling from the image itself and adding it to #content #topStoriesTest
#content #topStoriesTest {
border: 1px solid #CCCCCC;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
height: 318px;
overflow: hidden;
position: relative;
width: 549px;
}
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;
}