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.
Related
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.
I am newbie to web development, in specific browser related css compatibility issues.
I have the following css in my home page, which works fine in Firefox, and I can see the css properties when I inspect the element using firebug. But the same css rules are missing when I use chrome. when I inspect, I can't even see the rules in chrome. I wonder why this happens. I understand that some css rules are browser dependent. But now am really confused by thinking how could I resolve this.
Please refer to this link to see my css rules.
Any suggestions regarding why and how this happens. Any useful link also will be appreciated.
Thanks in advance.
Try using a media query, selecting only webkit specific stuff such as:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Your CSS */
}
This query checks the device pixel ratio in webkit. Safari & Chrome are the only big browsers using webkit, so this will not affect FireFox or IE.
I've been building my site using the Reverie theme for Wordpress with Foundation 3.2 installed over the included version of Foundation and it's been working great on Safari / Chrome on my Macbook (and iphone), but when I try it on a Windows machine padding becomes an issue from the body tag.
Specifically, the php body_class('hide-extras'); is what's causing the issue. It creates an element style on the body tag of padding-top:45px; and it creates a break between the top-bar nav and my full width header. trying to hard code a !padding-top:0px; yields no result.
If I get rid of it, it creates a problems on every page, and I can't find any documentation on Reverie's / Foundation's body classes.
see: zephyrusdigital.com
That is caused by the foundation.topbar.js
On line 45 :
*Fixed padding-top on body*
if (this.settings.$topbar.parent().hasClass('fixed')) {
$('body').css('padding-top', this.outerHeight(this.settings.$topbar));
You can remove it if you want or work around it.
I'm having an issue with a dropdown menu in IE8. Everything looks OK on Firefox and Chrome but not in IE8, more precisely the text from the dropdown menu doesn't show up. What am I missing?
This is the website: http://stuffforyourdog.com/maxabiz/collegeadvisors/index.html
The problem is due to the use of Cufon plugin. I copied your html/css in jsfiddle and it works on all IE/Chrome/FF. http://jsfiddle.net/t6sqV/ I suggest dropping cufon, and use a service like Typekit instead: https://typekit.com/ . You can also use http://www.fontsquirrel.com/ to download fonts ready to be used using only CSS.
ps: be careful. hover on non link elements does not work for IE6.
I have a website that will be loaded in a web frame of an iPad app, so I have created a separate CSS file for the iPad, which is automatically loaded by a user agent call. Nothing too difficult here.
The problem is that 2 divs are not responding to the display:none CSS. The sidebar and the footer are still showing, despite being specifically called in the CSS just the same as all of the other elements, which are hidden correctly in Safari on the iPad.
www.themonitorgroup.com/disclaimer.html is a good page to illustrate this issue.
www.themonitorgroup.com/css/ipad.css is the specific CSS file for the ipad.
I assume there is something stupid simple I am missing. Please let me know if you can find anything. Thanks so much in advance.
Validators are your friend. You're missing a closing brace here:
#mainnav {
display: none;
And you have #sidebar rather than .sidebar in the style sheet.