PDA

View Full Version : Including ExtJs 4 css styles on site - chrome



Wolfie
30 Oct 2011, 9:42 AM
Hi guys

I have weird problem in chrome.
I am including some libraries and js scripts in my main page layout (zend framework) like this :



<!--main css-->
<?php echo $this->headLink()->appendStylesheet($this->baseUrl().'/css/main.css') ?>
<!--extjs 4.0.2a css-->

<?php echo $this->headLink()->appendStylesheet($this->baseUrl().'/js/ext/ext-4.0.2a/resources/css/ext-all.css') ?>

<!--jQuery 1.5.2-->
<?php echo $this->headScript()->setFile($this->baseUrl().'/js/jquery/jquery-1.5.2.js') ?>
<!--extjs 4.0.2a js-->
<?php echo $this->headScript()->setFile($this->baseUrl().'/js/ext/ext-4.0.2a/ext-all-debug.js') ?>

<!--jQuery plugins -->
<?php echo $this->headScript()->setFile($this->baseUrl().'/js/jquery/plugins/jquery.rs.slideshow.js') ?>
<?php echo $this->headScript()->setFile($this->baseUrl().'/js/jquery/plugins/jquery.easing.1.3.js') ?>

<!--raphael 1.5.2 library-->
<?php echo $this->headScript()->setFile($this->baseUrl().'/js/raphael/raphael_1.5.2.js') ?>

<!--main carousel-->
<?php echo $this->headLink()->appendStylesheet($this->baseUrl().'/css/carousel.css') ?>

<?php echo $this->headScript()->setFile($this->baseUrl().'/jsScripts/ie8jQueryAnimateFix.js') ?>
<?php echo $this->headScript()->setFile($this->baseUrl().'/jsScripts/carousel.js') ?>
<?php echo $this->headScript()->setFile($this->baseUrl().'/jsScripts/clock.js') ?>
<?php echo $this->headScript()->setFile($this->baseUrl().'/jsScripts/wheel.js') ?>
<?php echo $this->headScript()->setFile($this->baseUrl().'/jsScripts/jq_menu.js') ?>
<?php echo $this->headScript()->setFile($this->baseUrl().'/jsScripts/onload.js') ?>


And the problem in chrome :

When I am starting the page, or changing the view, the font on the entire page is changing for one second and than going back to the previous family type.

Without ExtJs 4 css in main layout, this problem is not appearing. It looks like the chrome is to fast ;)
In firefox there is no such a problem.

And I need this styles to be included on the entire project, not only subpages, and this 'jumping fonts' looks very lame

Any ideas ?

Wolfie
30 Oct 2011, 3:20 PM
I have diged dipper and the problem is that the default chrome font is

font-family: 'Times New Roman';
font-size: 16px;
so when I am starting page, the default chrome font can be seen for miliseconds, than the font from extjs 4 library is beeing reed and it changed to it

It will be no problem, coz the only think to do is to put your own font family and size in body.

But the think is that I have also jquery carousel gallery on page and it changes size for miliseconds everytime I am changing view (in each view there is carousel gallery)

And property wchich is responsible for this is impossible for me to find

please help


Edit -----------------------------------

If enybody is interested this was also because of :

box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;

So I have just put it into the gallery main css and now everything looks good