I have never seen anything like this before, so not even sure how to phrase the question. I'm using a standard CSS :hover effect to change the color of some links on my page. However, when using webkit, only the bottom 95% of the text changes color, the top stays it's original color. It is happening for most links on the page. Firefox looks fine, Chrome and Safari both have the problem.
It is a Rails site using Foundation 5, but that shouldn't matter, I don't think.
Any thoughts?
Normal text link
Hover text link
--edit it's just bog standard CSS
a{color:#559ada;text-decoration:none;line-height:inherit}
a:hover,a:focus{color:#3285d2}
Related
Hello I have found a strange issue on a website I am working on.
I can't figure out why this is happening, but some text with a color assigned via css looks darker then it should be. I am am using the gantry framework for wordpress, but I cannot find any kind of css filter applied that would be causing this and there is no layers on top of the text.
What is weird is if I add position:relative and z-index:1 to the text's container it becomes lighter(closer to the correct color). I made a video of me toggling the z-index on and off with the chrome inspector. Can see it here; http://screencast.com/t/RsuK0h4C7o. I have set a block above the text to the same color so you can see the different text colors changing.
Another weird thing I noticed is that the text stops doing this at larger font sizes.
I have a html layout with a navigation bar at the top and a main content area below it, with a left and a right area. The top bar has a background gradient with a hard stop in it. The main content's right area (sidebar) has a background color that should line up with the gradient stop of of the navigation area, at 75%.
See this for a simplified version of my layout. In Firefox and Safari this renders fine, but Chrome puts the gradient stop a little further than it should. I tried to use pixel values instead of percentages, but the behaviour stayed the same.
Any idea why this is happening, and suggested workarounds? Thanks!
Specially with modern browsers that deals with anti-aliasing in so different ways. What i have done was a js fix, (which wouldn't be good for your code :D) also you would have to add a custom padding for each element. But you'll need to hire a freelancer to do it for you, because it would take a while to complete (browser targeting, getting each element, adding padding for each element...)
if u can post the code it would be simple for more possibility.however i am looking for more solutions.
I have a website where I want a linear-gradient to scroll indefinitely to the left. I have it working perfectly right here on codepen: http://codepen.io/spikeyty/pen/oqBFi
It appears that the gradient is there, but it is not moving. I copied the code straight from codepen. Here is the website I'm adjusting: http://tystrong.me
It isn't working in Chrome, Firefox, or Internet Explorer. Any help is appreciated!
Your media query on line 99 (code pen) is wrapping the declaration of the bg-move animation property so it does not exist at the desktop view.
Also - bit of a protip, you don't need to specify from in your animation declaration when it is the default state of the element already.
BTW - sweet little effect!
I'm currently working on a site for a company and they wanted a menu on the top of the page. Everything works fine in most modern browsers, exept Safari. In safari the color of the text in the menu is grey unless you hover the menu items fast and after that they stay white or jump back to grey. The other browsers all show the right white color.
I made a screenshot of the Firefox(IE 9 and Chrome) version and the Safari version.
http://img707.imageshack.us/img707/8493/bothd.png
Here is the fiddle i'm currently testing in:
http://jsfiddle.net/StevenVenmans/RNNPj/
using two kind of color definitions in the css, remove the first one and try, i am talking about
1. color: rgba(255,255,255,1);
2. color:#FFFFFF;`
I am having trouble getting the <button> element to render correctly on the iPhone/iPad.
Here is the sample:
<button type="button" style="width:150px; word-wrap:break-word;">some very long text to make it wrap and go to another line</button>;
The idea is to have a fixed width button and the text wraps as needed. In newest IE, FF, and even desktop Safari (Mac and PC) things work as expected. The button width is fixed, the text wraps, and the button height automatically is increased to show the wrapped lines.
On the iPhone/iPad, the text wraps, but the button height does not increase. Thus, the user cannot see all the text.
Does anyone have an idea on how to make this work on the iPhone/iPad like on the desktop browser or is this a mobile Safari limitation?
Ok. This took a lot of trial and error, but I actually got it to work. The key is to add "height:100%;" in the style string. Take out the height and the button does not grow horizontally. Add height and the button does grow if the text is long enough to cause a word-wrap. Guess without a height specified mobile safari gets confused. Go figure. I hate writing browser code. Sickening to think how many programming hours are wasted on crap like this.
After doing some work I have found that adding this to the button style allows the button to render better on iOS mobile devices but you lose a little of the default round styling of the buttons:
-webkit-appearance: none;
You can give background color : #dedede.
Because IOS is not supporting "buttonface" color.
So just add this on your css.
background-color: #dedede;
Update:
It appears now in iOS/iPad that line breaks set (physically or through CSS) on buttons works everywhere just fine.
If I recall correctly from my own testing, the iPad doesn't handle breaks on the button element at all. No idea if there is any way around it.
e.g. this won't work
<button>First<br/>
Second<br/>
Third<br/>
Fourth<br/>
</button>