#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    675
    Rep Power
    38

    Javascript sub nav bug


    Hi, I have a javascript sub nav, which works fine on all my computers, but on the clients end, they have to refresh the page for the nav to appear properly.

    here's what the client sees: click here
    here is the site: click here

    The sub nav isn't loading properly on their computers.
    Can anyone tell me how to trouble shoot or fix this?
    thanks
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    The first thing to do is to move all of the <script> elements to after all of the <link> and <style> elements.

    Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure it's set it to use "CSS level 3".)

    Conditional comments can not be used inside a stylesheet.
    Code:
    .twoColFixLtHdr #mainContent { 
    	margin: 0px auto 0 210px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    	padding: 0 0 0 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    	background: #FFFFFF;
    	height:387px;
    } 
    
    <!--[if IE 6]>
    .twoColFixLtHdr #mainContent { 
    	margin:-387px auto 0 210px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    	padding: 0 0 0 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    	background: #FFFFFF;
    	height:387px;
    } <![endif]-->
    You could use a CSS filter instead. The "* html" filter targets IE6 and older. Also you don't need to repeat all of the declarations in the rule, only the one(s) that you need a different value for:
    Code:
    * html .twoColFixLtHdr #mainContent { 
    	margin:-387px auto 0 210px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    }
    Did you intend to post the screenshot as such a small image? Why a GIF? The GIF format is only good for very small images, e.g. 10x10, or simple animations.

    The use of tables for layout makes me very sad. Ever heard of "display:table-cell" (which doesn't work in IE7 but does in newer browsers)?
    Last edited by Kravvitz; November 26th, 2012 at 04:06 PM. Reason: added more info
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo