http://codepen.io/Drexl/pen/CBjdL
The above works just fine in both FF and Chrome. However when used on a live MedaWiki it fails on Chrome, works fine on FF.
This is the result when viewed in chrome:
http://i.imgur.com/0bALNzc.png (ignore the small edit I made).
Notice that it appears to be keeping the formatting, but the border is not present. I've used these border settings on other elements just fine which compounds my confusion.
Thanks for any advice/guidance you can provide! ^_^
You must add the -webkit- and -moz- prefixes for border radius and box shadow, reading this source might help you understand CSS3 better..
Related
A button in Chrome vs Firefox:
the baseline in Firefox seems slightly higher for the text. Is there way to lower the text? Just adjusting the margins based on browser?
Chrome CSS:
Firefox CSS:
The fonts were different. Though they are the same in CSS, they weren't being loaded properly so one of the browsers was using a fallback while the other wasn't. To help debug this document.fonts.check is very useful.
Thanks Temani Afif for the pointer in the right direction.
Use normalize.css. Most differents between browser will gone https://necolas.github.io/normalize.css/
Browsers have different base settings. Probably FF default line-height smallest then chrome. Anyway, Nobody find this different in normal using ;)
I'm having some problems getting this to look good in IE, FireFox, Opera, Chrome and Safari.
Opera and Firefox are the same, but IE, Chrome and Safari has a bit different look.
Especially the input rounded corners in Chrome.
This is my code http://jsfiddle.net/VKuD6/2/
Can anyone point me into the right direction of getting "identical" cross browser look and feel?
Search boxes in webkit have some default styles you'll want to get rid of using this:
-webkit-appearance: textfield;
Should sort it, at least partly. You do loose the clear text cross button though. - Apparently not
Also, you should check this out, good information about the search input http://css-tricks.com/webkit-html5-search-inputs/
Hope that helps :)
the navigation bar in ** works fine in safari, however firefox is being a bit of a pain. I can see a small margin/padding difference between the two browsers, however can't quite work out why. any ideas?
EDIT: Don't worry figured it out.
font used was not rendered the same in both browsers!
You could use a mozilla hack (generally not advisable) and add Margin and Padding properties. It is recommended that you install Firebug in Mozilla. You can change your CSS on the fly and in your file accordingly.
Turns out it was a simple font rendering issue, due to -webkit-font-smoothing, note to self; check that out next time!
I'm a beginner that just built a menu bar that changes the color of the webpage. It works perfectly in Chrome, Firefox, Opera, and IE. However, in Safari the 1st, 2nd, and 4th options are one pixel off when you hover over them. I was wondering how to fix this without messing up how the bar works in Chrome (because they both use Webkit right?).
This is the code for the webpage:
http://codepad.org/YrKz8Auy
And this is the code for the CSS:
http://codepad.org/pGnL5E5M
Any help or insight would be greatly appreciated!
You have a really complicated structure. Here's what your code could look like when simplified: http://jsfiddle.net/hCmrY/2/
Let me know if there are any Safari issues with it.
Take a look at this in both chrome and firefox: http://jsbin.com/imuxe3
As you see, it renders fine in firefox, but chrome literally ignores the -webkit-border-radius CSS rule when adding a -webkit-box-shadow with inset mode.
Can some one explain/get a solution for this?
Thanks
It seems to be a bug in chrome. However you can use a workaround by defining a simple border: rule.
For more Details see this:
http://code.google.com/p/chromium/issues/detail?id=29427
I wondered about this recently, myself.
Although, looking at my button in Chrome dev now, it's fixed.
So you must simply wait for the fix to the issue mentioned by #mightyuhu to be pushed to the stable version of Chrome.