Having a small issue getting my site to behave in safari.
Some specifics.
I am using safari for windows v5.1.7 but the issue is also present on ipad.
The issue i am having is the positioning of 1 element, which is only happening in safari, it is a small drop down so users can select currency, this is placed in my WP theme via the header.php.
The code i am using is
<div class="currencytop" style="right: 85px; top: 6px; width: 9%;"><?php echo do_shortcode('[woocs]'); ?></div>
I have had to style the code to get it to a position i was happy with and it looks OK in all browsers except safari.
You can see the offending element on my homepage here (top right on chrome but shifts under the social icons in safari) http://escapeandco.com/
Any help on correcting it would be greatly appreciated
Thanks
you can detect browser and run different css for safari ,check out that link how to detect browserenter link description here.
Related
I am using Wordpress.
When I switch to RTL language (Arabic) I have a big empty area between the nav-bar and the body on mobile.
This works properly on other browsers, and even the google responsiveness test, but not on chrome (mobile and pc).
You can check attached pictures to see the probelem, however this is the website if you wanna try it BYS : Broken Website
It might be due to a template or a widget that doesn't support RTL causing this. I played with your site's CSS in Chrome dev tools.
Try adding the following CSS:
body {direction: ltr !important;}
body > div.wrapper {direction: rtl !important;}
See if it fixes your problem.
Last night my Firefox just got updated to version 63 without notice, the image in my website that used to be displayed correctly just got broken.
The image that I put on the web, I used css content class
/*Chrome*/
.pswFilled{
content:url("psw_filled.png");
}
/*Firefox*/
.pswFilled::after{
content:url("psw_filled.png");
}
Before updated, this worked correctly. If chrome is detected, the non-pseudo is applied. Also Firefox uses the pseudo one. However after updated, if both are put like this, Firefox will pick the non-pseudo to use first and vanish the image.
If I remove the non-pseudo line, Firefox picks the pseudo one and the image will display correctly but disappear in chrome.
Anyone experienced this? Please help
Thanks to all those trying to help. I found the problem and already solved.
The problem happened because I put the class into the img element
I thought it should work same way to the div tag. Actually it used to be working before the firefox update to 63.
Before, I wrote this way.
<img id='pwdBox' class='pswFilled'/>
It worked in both Chrome and Firefox (before 63)
but in 63, I have to change it to this
<div id='pwdBox' class='pswFilled'></div>
Thanks to extempl whose enlightened me with jsfiddle
I'm having browser compatibility issue in my UI. In Firefox I'm facing some UI breakage issues, In chrome i don't have any issues.So my team said to try some CSS properties with don't dependent on browser that could be a solution for this.So anyone may know about this?
<li align="center" ng-show="showLoadingIcon">
<img src="app-vrm/img/loader.gif"/>
</li>
This is what the code for that loading mask. If change align from center to right,left or justify .That is working fine in chrome but in Firefox the loading mask is loading always in left side. It should be displayed in the center of the screen
A good starting point is to make sure you're starting from the same point by creating a reset.css file. This file makes sure that for each browser e.g. the margin-top for a P-tag is always 5px. There are plenty of resources on the web
Furthermore, you should have a look at W3Schools table for browser compatibility here.
Last but not least, be aware that some CSS3 tags are not implemented at all yet because they are 'too modern'. Or your browser is too old.
And a good CSS-validator might help. In Google Chrome (or Iron Browser, or Chromium) you can enable the developer tools and look at the console for errors, or install an extension (Web Developer for Firefox together with Firebug). Or if your site is online validate it with W3 CSS validator
Good luck!
I have created a cross-browser centre alignment of image. Main useful thing is img having margin and display property. Please see working solution at this link:
URL: http://codepen.io/krunalv/pen/gborwo
.loadingImage-wrapper li img{
height: 50px;
width: 50px;
display: block;
margin: 0 auto;
}
I fixed this issue........ i changed the code instead of
align="center"
i added
style="text-align:center;"
So this property is working in Firefox as well.
I really want to thank the people who help me to find out the solution.I got many new things from you whenever you are giving some answers.
Here is the link for our wordpress site http://www.dotmappersdesign.com/caramaintaince/.
We have a compatibility issue with internet explorer and mozilla firefox. We tried few methods to solve, like
1) Creating a separate css file ie.css.
2) Writing version code in header.php ( )
But the issue is not fixed.
All your answers are appreciated.
Please changes the css line in logo class width 150px issue solved in mozilla firefox and IE.
On the insurance-repairs page that is happening because of the span8 class, remove it from the <div class="span8 right" id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-page.php"> div and it should display fine.
The issue on the authorized-repairs page is happening because of right: 250px; on the <ul> that, remove it and it should fix it.
I am having cross browser issue in joomla website i.e http://great.server279.com/greatofficiants.
Website is working all fine in firefox and in rest browsers its not appearing the same.
Problem is when we go into EXCLUSIVE VIDEOS block whole images of videos are appearing on chrome,safari,ie but it is appearing all well in firefox.
div id="vtab-1" class="vcase" style="display: block;
div id="vtab-2" class="vcase" style="display: none;
The problem is with stepCarousel.js file. the Js file is conflict in the cross browser. can you explain me that which JS are you using. So that I can help you more