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 :)
Related
I've got a fancy css neon effect on a navigation. This works perfectly on any major browser except on IE < version 10.
The problem is that there is no text shown on IE 8+9.
I have no Idea where to start with a fix so I would be very grateful for every tip.
It doesn't need to be working with IE8, IE9+ would be fine.
The effect can be found on the page http://www.arch-on.ch/team/philosophie/
Many thanks in advance for any helpful input
CSS property text-shadow is not supported by either browser (IE8, IE9) and box-shadow is only supported by IE9
You best solution is just not to have the glow effect in those early browsers and give users of those browsers a warning that the site looks better in a modern updated browser.
To achieve what you want in those browsers you would have to create transparent png images and swap them out on :hover. But this because real messy (especially when you have to keep adding new text or change text) and is not efficient.
Do not create more work for yourself with something that just applies to aesthetics.
Try Quirksmode for before: and after: content: http://quirksmode.org/css/user-interface/content.html
There is also a plugin called CSS3Pie that "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features". Maybe implementing this is okay for you. http://css3pie.com/
Otherwise you have to avoid using CSS3 if you want to go down to IE8. Check this chart for browser compatibility of CSS3 statements:
http://www.normansblog.de/demos/browser-support-checklist-css3/
Cheers
Frank
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..
The div containing the slider on this site http://mhpkg.de is offset by 1px to the left in opera. Other browsers don't seem to have this issue and I can't figure out what is causing this. I had something like this on another site/ occasion too so this doesn't appear to be too rare. I couldn't find a solution to this though so I figured maybe someone did.
Please take a look and help me/ people with similar problem out.
Apparenlty this has something to do with the zoom on my opera browser, I checked it on different systems/ versions (browsershots) and it is fine there. If i zoom in and out on Opera it displays it fine/ offset by 1 px depending on the zoom degree.
I've seen theories around the interwebs for solutions to the cleartype issues with Chrome, Opera, and IE7-8. IE9 and Firefox ignore a user's preferences for cleartype, so I was wondering if there was a way to force a website's fonts to display as anti-aliased for each user visiting? I've tried hidden text-shadow, -webkit-font-smoothing, a little extra text-stroke, and more, all to no avail. Help?
No, you can't force browsers to render text with anti-aliasing, especially if they've chosen to respect the user's preference to not anti-alias text.
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.