Cross-browser testing gives me a headache at the best of times, but this one has really stumped me.
I developed my website in Google Chrome (and on a Mac), and have recently updated the search function and re-styled the search input area.
I noticed that when I did cross-browser checks in Internet Explorer, the text in the search input in the top right-hand corner of the website was not positioned in the same way as it is on chrome.
In my version of Chrome, the text is 10px away from the left edge of the box, so it sits in there nicely. On Internet Explorer, however, it is right up against the egde of the box.
Here's the issue - When I opened my website in Chrome on a PC the text in the input was positioned in the same way as it appears in IE.
I assume this is because Chrome on my Mac is a different version than that that is on the PC. Can anybody help me solve this so that the text sits nicely across these browsers?
You can view my website here at http://tinyurl.com/8uaajmz
Thanks in advance everybody!
Your CSS rule for #search_bar_2 has an _ at the beginning of the name change it to:
text-indent:10px !important;
and you're fine. Not a cross browser issue it's a typo issue.
Related
first time poster so please go easy!
My Chrome browser is displaying some lower case text from my company's website as all upper case. It only seems to be doing it on chrome and on my computer - it displays properly (lower case) on Safari and on versions of Chrome used by my colleagues.
I'm hoping someone can help me - not sure if it is something website related or Chrome related.
Our website is built with Wordpress.
Thanks
I have a website which in the past few days has stopped rendering correctly on Chrome and Firefox. The site code has not been updated at all which could have caused the error. It still renders correctly on IE and Edge.
The search box is an absolute element which should appear over the grey bar and the magnifying glass should appear within the search box.
It is difficult to show code as until a few days ago, it was functioning correctly.
I don't know if some css standards changed recently but the addition of a 'top: 0px' to the css seemed to fix this.
The webpage which I am currently front end coding is https://www.softpaz.com/software/download-jetbrains-webstorm-windows-180745.htm
Issue is that the
1) sidebar sometimes gets transparent
2) div background are blank, then suddenly appear and then go blank again.
3) The buy links table has flickering borders
4) Most of the small icons are flickering
These things happen when scrolling in Microsoft Edge, and IE11. Have tested the same webpage in chrome and firefox, and its working without any issues.
I have tried:
http://ieflicker.com/
tried removing the background, removing box shadows, text shadows, disable rounded corners and put everything at 100% opacity, but it still happens.
When the page is small, that is, there are less number of elements on the page, like the about us page of softpaz(link on top top right) then everything display fine.
Am confused on what to do now!?
I figured it out! Posting it if someone is facing the same problem. My system has the Intel HD3000 and running on Windows 10, which means that there was limited hardware acceleration support(as there are no official drivers from Intel). The page runs fine on other systems.
Once again, I see that Firefox, Chrome, Opera, etc outshine IE/Edge on the same system!
I have a search element widget on the home page of my site. Inside the widget there are different tabs which represent search criteria. The issue is for those inner search tabs look different in Chrome and Safari.
I am attaching the screenshots for both the Chrome and Safari versions.
Chrome version (preferred version)
Safari version (would like to see it like it looks in Chrome)
I tried playing around with it but all my hacks did was break it and make it worse. Can this be changed in Safari at all. There isnt much to the html, css code so I dont really know why it screws up in Safari.
Here is the public link for the site:
http://kw-kw-sb-test-site.cs16.force.com/KWRI_Master_site
Any help and suggestion will be appreciated.
Thanks.
Does each one of the search criteria shift downward when selected? The image that replaces the text of the criteria might be set to vertical-align: bottom or some other type of affect on the image.
Here is my site:
http://smartpeopletalkfast.co.uk/pp/
The very bottom menu is laid out correctly in every browser ive tested, including IE8 and IE7. However with IE9 its starts further to the right than it should and the twitter icon is pushed down to the next line. How can I fix this?
I tried to install firebug lite to see whats going on but I cant extract the firebug-lite.tar.tgz file.
http://getfirebug.com/firebuglite
Thanks
Turns out one of the relatively positioned divs needed to be given a set width.