Question

I am having strange problem, whenever my site is loaded for the first time in the browser, its jquery and slider doesnt work at all…….. then when i refersh the page it loads it properly….
I am using Firefox latest 3.6.8 version
CSS is loaded before jquery and slider scripts

here is the link for website link text

I fixed the button positioning with 2 solutions

1. One was to use % in positioning like left:90%
2. Other i found by checking the original easy slider 1.5 css file which was to use a container to display all the content within and container will have same width as the images in the slider…..
   hope it helps others

Answer 1

I had no difficulty viewing your site in Firefox version ‘3.6.8’ without a refresh? The slider appears to function correctly, however, with fresh eyes I did notice some things in the page source that you might wish to check, especially point 1.:

1. [EDIT] The JavaScript block within the ‘Head’ tag is missing closing semicolons (‘;’) at the end of the first four ‘var’ lines:

   <script type="text/javascript">
       var browser = navigator.appName
       var ver = navigator.appVersion
       var thestart = parseFloat(ver.indexOf("MSIE"))+1
       var brow_ver = parseFloat(ver.substring(thestart+4,thestart+7))
       if ((browser=="Microsoft Internet Explorer") && (brow_ver < 7))
       {
           alert("Please Update your OLD BROWSER ,Please install Google chrome or Firefox to view the site propertly");
           window.location="http://www.mozilla.com/en-US/products/download.html";
       }
   </script>
   

   [EDIT] Also, it’s advisable to include JavaScript in ‘CDATA’ or ‘Character Data’ sections:

   <script type="text/javascript">
   //<![CDATA[
       // Your Javascript goes here...
   //]]>
   </script>
   

   More info: here and here.

   [EDIT] Finally, notice the variable ‘brow_ver‘ is declared in the script, but on the following line a variable ‘browser‘ is referenced?

2. The ‘&’ character entity reference should be used instead of ‘&’ in the ‘title’ tag

3. One of the ‘Meta Tags’ is missing a closing ‘/’.

4. [EDIT] The conditional comment ‘<![if !(IE 6)]>‘ should be ‘<!--[if !(IE 6)]>‘ and ‘<![endif]>‘ should be ‘<![endif]>-->‘

5. [EDIT] The UTF-8 encoding includes and encompasses all of US-ASCII characters, so in the meta tag consider using the following ‘Content Encoding’:

   content="text/html; charset=UTF-8" instead of content="text/html; charset=us-ascii"

6. Also FYI: the ‘-‘ and ‘+’ navigation buttons for the slider are not positioning correctly. Please see image reference below. This might not be apparent on your screen… try a higher resolution with the browser set to full screen to replicate it.

   [EDIT] Just for others reading this… I notice you have fixed the ‘-‘ / ‘+’ navigation positioning by using ‘%’ instead of ‘px’ in the CSS. So for example:

   #nextBtn{
       display:block;
       width:36px;
       height:36px;
       position:absolute;
       left:90%;  /* <<< Will position correctly */
       top:365px;
       z-index:1000;
   }
   

   instead of…

   #nextBtn{
       display:block;
       width:36px;
       height:36px;
       position:absolute;
       left:1025px;  /* <<< Won't position correctly */
       top:365px;
       z-index:1000;
   }
   

The same goes for the ‘Previous’ nav button.

Site Screenshot of incorrect navigation buttons positioning http://img59.imageshack.us/img59/8443/gulzarchildcarecom.jpg

The best of luck with the site… it looks good! 🙂