ExtJS in rtl have problems in chrome - css

I've made a site with openlayers and Ext 4.2 and when changed it to rtl the map is broken only in chrome.
The wierd thing is that when I put the EXACT same code in fiddle , the map loads fine.
here is a link to my site (problem in chrome only)
http://77.235.53.170/LehavimExt/
And here is example to the JSFiddle which DOES work in chrome (maybe because of fiddle CSS?)
http://jsfiddle.net/uvY3r/
This is the problem I'm having:

Solution is to add the following style to the openlayers container
"width":"100%","position":"relative"

Related

Calendar will not render on iPad 2nd Generation

FullCalendar works great on Chrome on my PC but it does not render on an iPad 2nd generation. Is there maybe some polyfil code needed?
Linking to a polyfill script fixed this issue for me! Found the solution here
Edit: This was the actual line that fixed it...
<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"></script>

Icon not displaying properly on website

For some reason, two icons that show in IE and Chrome do not appear in Firefox and instead gives me some weird icon. I am using a font to display these.
I used firebug to track down exact CSS code for this but it simply shows
.icon-signin:before{
content: "";
}
whereas in IE, it shows
and in Chrome it shows:
I honestly don't understand what's happening here.
In the actual CSS file it has the following line:
.icon-signin:before{content:"\e047";}
All I could gather from google search is that
:before
is outdated and that I should use
::before
Would this fix the solution?
But if that is the case, why is Chrome displaying the icon when it also reads the css code with :before, not ::before ?

CSS not working in IE8, while working fine in IE9

basically a majority of the CSS styles defined for my website are not displayed when opening the page in IE8. This is not only happening for my custom styles (which I load separately through a custom css file), but also for the built-in features of Rockettheme IONOSPHERE template, for example the box1/2/3/4/5/6 module styles. Also, the rounded style is not rendered, and all modules are shown with sharp corners instead.
I am also using a custom css file (called ralph_golfanatics.css), which I load inside the index.php as follows:
$gantry->addStyles(array('template.css','joomla.css', 'ralph_golfanatics.css'));
All custom styles of this file are displayed fine in IE9, but the most important styles are not shown in IE8. Simply adding these css-styles manually in the file template_ie8.css (that file comes with the Ionosphere template package) did not change anything.
Looking forward to receive any help in this matter. The webpage is http://www.golfanatics.de
Thank you all in advance for your hints.
Ralph
Unfortunately, the link you've included isn't working so it's difficult to pin down exactly what the problem is.
If you're referring to rounded borders displaying with sharp corners this is because border-radius is a CSS3 property which is not supported in IE8.
See this link for border-radius browser support.
There are many CSS3 properties which don't work in older browsers; this is expected behavior and most web developers work around this by using either 'progressive enhancement' or 'graceful degradation'. See this link for more information.
Most websites using CSS3 techniques will never look the same in every browser.

Text not showing up in CSS dropdown menu - IE8

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.

why is this nav broken on firefox?

Can you guys point out what I am doing wrong on with the navigation on this site? It works fine on webkit, but not firefox!
http://datatables.dyndns-web.com/
vs intended
The NAV-tag isn't a block-element by default in current versions of Presto, Trident and Gecko. Only WebKit has a default stylesheet for HTML5-elements included already. You should use a basic-/reset-CSS to format all HTML5-elements.
See: http://html5doctor.com/html-5-reset-stylesheet/
BTW, if someones asking for an image, you should upload an image of the desired result, not one of the broken view…

Resources