www.webdeveloper.com
Results 1 to 15 of 15

Thread: another menu problem

  1. #1
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Angry another menu problem

    I can not get any of the text to show up on my menu bar in IE 8. Finally got it somewhat figured out in IE9.

    http://www.greenfitco.com/

  2. #2
    Join Date
    Mar 2012
    Posts
    14
    It looks like you are having a javascript error that is preventing the rest of the code from executing.

    Webpage error details

    User Agent: MSIE 8.0
    Message: 'this.resultsPanel' is null or not an object
    Line: 90
    Char: 23
    Code: 0
    URI: http://www.greenfitco.com/globalnav.js

    are you trying to get the value from something that hasnt loaded yet?
    Try using defer='defer' as a property of the script tag and see if that helps.

  3. #3
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    Where do i use the defer, in place of the defined? I'm confused on this problem, it's just occurred to me that it hasn't been working in IE 8.

  4. #4
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    In my css if i delete the background it disappears in IE all together but remains in chrome, ff, etc. etc.


    #globalheader #globalnav li a { float:left; width:203px; height:36px; overflow:hidden; text-indent:-9999px; background:url(/images/globalnav.png) no-repeat; cursor: pointer; }
    Last edited by Supplement; 03-28-2012 at 04:39 PM.

  5. #5
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    UP!


    IE 8 is such ****, I ****ing hate it.

    =/

  6. #6
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    I think it has something to do with my SVG file.





    Need assistance.

  7. #7
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    There shouldn't be anymore javascript errors in IE now, it's been debugged but i still can't get the menu items to appear which leads me to believe even more that it's something to do with the svg file.


    sorry to bump so many times.. just figuring more out as i progress.

  8. #8
    Join Date
    Mar 2012
    Posts
    14
    IE8 doesn't support .svg...

  9. #9
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Red face

    That's what i keep reading but I also have created a .png, gif. and jpg as well as my svg file.

    So the text is actually showing up now in IE8 but just not centered properly.

    jc_rotor, thanks for continually checking in with me in this thread. I've updated since last time and I've got it somewhat working now in IE8.

    The css positioning is now the ongoing problem.

    Have a gander at it now and see the updates. I'm wondering if there is some conditional code i can write for IE8 only.

  10. #10
    Join Date
    Mar 2012
    Posts
    14
    Did you get the rollover problem fixed? Again should be as simple as moving the div for your icon within the UL and removing the anchor tag from the icon itself and adding it to the div. so your div tag icon should contain the LI and the IMG and the div itself will have an onMouseOver event that changes the CSS to create the effect you want. Should be as simple as that. Let me know.

  11. #11
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    I actually never got a chance to look at the icon but now I'm looking at it now.

    Here's what i got... i moved the div inside the ul and i deleted the anchor.. but now i'm confused.

    HTML Code:
    	<ul id="globalnav" role="navigation">
    		
    		<div class="icon" style="position: absolute; top: -20px; left: 46px; z-index: 888888;"><img src="/images/GFECo.&#37;20Logoo.png" name="rollover" alt="logo" style="min-height: 97px; min-width: 97px; max-height: 97px; max-width: 97px;"></div>
    
    		<li id="gn-apple"><a href="index"><span></span></a></li>
    		
    		<li id="gn-store"><a href="Treadmill_Saver"><span></span></a></li>
    
    		<li id="gn-mac"><a href="gymTOOLKIT"><span></span></a></li>
    
    		<li id="gn-ipod"><a href="gymflix"><span></span></a></li>
    
    		<li id="gn-iphone"><a href="about_us"><span></span></a></li>
    
    		<li id="gn-ipad"><a href="Support"><span></span></a></li>
    
    	</ul>

  12. #12
    Join Date
    Jun 2011
    Location
    California
    Posts
    383
    I've tried:

    HTML Code:
    		<div id="gn-apple" style="position: absolute; top: -20px; left: 46px; z-index: 888888;"><li id="gn-apple"><img src="/images/GFECo.%20Logoo.png" name="rollover" alt="logo" style="min-height: 97px; min-width: 97px; max-height: 97px; max-width: 97px;"></li></div>
    
    
    and
    
    
    <div id="gn-apple" style="position: absolute; top: -20px; left: 46px; z-index: 888888;"><li><img src="/images/GFECo.%20Logoo.png" name="rollover" alt="logo" style="min-height: 97px; min-width: 97px; max-height: 97px; max-width: 97px;"></li></div>
    
    

  13. #13
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

  14. #14
    Join Date
    Mar 2012
    Posts
    14
    Quote Originally Posted by Supplement View Post
    I actually never got a chance to look at the icon but now I'm looking at it now.

    Here's what i got... i moved the div inside the ul and i deleted the anchor.. but now i'm confused.

    HTML Code:
    	<ul id="globalnav" role="navigation">
    		
    		<div class="icon" style="position: absolute; top: -20px; left: 46px; z-index: 888888;"><img src="/images/GFECo.&#37;20Logoo.png" name="rollover" alt="logo" style="min-height: 97px; min-width: 97px; max-height: 97px; max-width: 97px;"></div>
    
    		<li id="gn-apple"><a href="index"><span></span></a></li>
    		
    		<li id="gn-store"><a href="Treadmill_Saver"><span></span></a></li>
    
    		<li id="gn-mac"><a href="gymTOOLKIT"><span></span></a></li>
    
    		<li id="gn-ipod"><a href="gymflix"><span></span></a></li>
    
    		<li id="gn-iphone"><a href="about_us"><span></span></a></li>
    
    		<li id="gn-ipad"><a href="Support"><span></span></a></li>
    
    	</ul>
    Ok you should be able to add a div here that includes the div you already created and the li. Then instead of using an anchor tag, have two functions associated with the div, one is an onClick function that takes you to the desired web page, index in your case, and the other is the onMouseOver function that you will need to write which changes the CSS or image if you used an image to shade the button.

    Example:
    HTML Code:
    <div class="jsDriver" onClick="iconNavigate();" onMouseOver="cssChange();"
      <div class="icon" style="position: absolute; top: -20px; left: 46px; z-index: 888888;"><img src="/images/GFECo.%20Logoo.png" name="rollover" alt="logo" style="min-height: 97px; min-width: 97px; max-height: 97px; max-width: 97px;"></div>
    
    		<li id="gn-apple"><span></span></li>
    </div>
    Of course you will have to write your two functions in js. I called them iconNavigate and cssChange but you can call them whatever you want. Google "window navigation in js" and "CSS change in js" for help writing the functions.

    Put the functions in your js file that will be loaded in the header of each page.

    The onClick and onMouseOver of course call the functions.

    Make more sense now?

  15. #15
    Join Date
    Jun 2011
    Location
    California
    Posts
    383

    Thumbs up

    Yes, totally. I'll have a go at it this afternoon.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles