SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Menu troubles

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu troubles

    Posted this in the Browser issue forum, but the forum seems to be fairly inactive, ao I thought I'd ask here.

    I have a menu that won't display in ie. It works fine in Firebird, but doesn't come up at all in internet explorer.

    http://www.20hgamer.tk

    Thanks for any help...

    Oops, forgot to post css etc.

    ~DB

    Code:
    #menudiv a {
    	color:#ffffff;
    	font-size:1em;
    	text-decoration:none;
    	}
    #menudiv ul {
    	position:absolute;
    	left:0;top:4.6em;
    	list-style:none;
    	padding:0;
    	margin:0;
    	border:none;
    	}
    #menudiv li {
    	position: relative;
    	margin:0;
    	width:6.4em;
      	}
    #menudiv ul>li {
    	width:6.4em;
    	}
    #menudiv li a {
    	display:block;
    	padding:5px 5px 5px 0.5em;
    	border-left:10px solid #4c4c4c;
    	border-right:10px solid #757575;
    	background-color:#828282;
    	color:#fff;
    	text-decoration:none;
    	width:100%;
    	}
    
    #menudiv li a:hover {
    	border-left: 10px solid #590404;
    	border-right: 10px solid #7d0303;
    	background-color: #ae3b3b;
    	color: #fff;
    	}
    #menudiv li ul {
    	display:none;
    	position:absolute;
    	top:0;
    	left:8.7em;
    	}
    #menudiv li:hover ul {
    	display:block;
    	}

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    seems to work in IE5.5/Win2k for me...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    SitePoint Wizard Keriam's Avatar
    Join Date
    Jun 2003
    Location
    Colorado, USA
    Posts
    1,178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And it shows up for me in IE6/WinXP Pro

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I wasn't specific enough. What I meant was that when you hover your mouse over Reviews, a submenu should pop up. That doesn't happen for me, and I've cleared cache, etc to make sure. Even tried on another comp.

    ~DB

  5. #5
    SitePoint Wizard Keriam's Avatar
    Join Date
    Jun 2003
    Location
    Colorado, USA
    Posts
    1,178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Leading in with my standard disclaimer, I'm not a CSS expert, but.....

    On your page you have this bit of code for you navigation:

    Code:
    <div id="menudiv">
    			<ul id="nav">
    				<li><a href="#">Reviews</a>
    					<ul>
    					<li><a href="#">Windows</a></li>
    					<li><a href="#">Linux</a></li>
    					<li><a href="#">Macintosh</a></li>
    					<li><a href="#">Playstation</a></li>
    					<li><a href="#">XBox</a></li>
    					<li><a href="#">GameCube</a></li>
    					</ul>
    				</li>
    				<li><a href="#">News</a></li>
    				<li><a href="#">Forum</a></li>
    			</ul>
    		</div>
    I think the trouble may be because I do not see any definition for id="nav" in your stylesheet (which I chased down through the link at the bottom of your page). Just a novices guess.

    Edit: The submenu does not show in Opera7.11 either.

  6. #6
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE only does the :hover thingy on 'a' tags, you have it set on a 'li'.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  7. #7
    SitePoint Member Neophyte's Avatar
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After fiddling around for a little bit, and using both Opera and IE6 (i would use mozilla & netscape as well, but I'm at college at the moment) I sorta came up with a solution for you.
    Instead of having it 'all' CSS, I have incorporated some JavaScript as well, don't be scared the only thing I went with were onMouseOver and onMouseOut's on the links.

    Consider the following styles:
    Code:
    .navIn{
      visibility:hidden;
      display:none;
    }
    .navOut{
      position:absolute;
      left:3.8em;
      top:0px;
      width:80px;
      display:block;
      visibility:visible;
      list-style-type:none;
      background-color:transparent;
      z-index:999;
    }
    and the following HTML:
    Code:
        <li><a href="#" onMouseOut="document.all.reviewlist.className='navIn'" 
            onMouseOver="document.all.reviewlist.className='navOut'">Reviews</a>
          <ul id="reviewlist" class="navIn" onMouseOut="this.className='navIn'" 
          onMouseOver="this.className='navOut'">
          <li><a href="#">Windows</a></li>
    
          etc...
    You can see the result here

    Like I said, I haven't been able to test this in Mozilla and Netscape (and older versions of IE) yet, so they may or may not give you some hassle.

    Hope this helped.

    Cheerz,

    John
    =-=-=-=-=-=-=
    http://www.NeoHackers.com
    =-=-=-=-=-=-=

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    IE only does the :hover thingy on 'a' tags, you have it set on a 'li'.

    Rik
    Ok, found out where I went wrong, but even correcting that doesn't make it work. The site I was using as a guideline gave this JavaScript To force it in IE.
    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>
    But as soon as I add that little bit in, it totally breaks everything as far as I can tell. The main body div overlaps the header, even though the z-index of the header is set to 300-something.

    ~DB

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Neophyte
    After fiddling around for a little bit, and using both Opera and IE6 (i would use mozilla & netscape as well, but I'm at college at the moment) I sorta came up with a solution for you.
    Instead of having it 'all' CSS, I have incorporated some JavaScript as well, don't be scared the only thing I went with were onMouseOver and onMouseOut's on the links.
    Hmm, tried your Javascript instead of the one I found, and neither work. I'm totally at a loss at this point, I've been working on it for the better part of a week, and I simply cannot get the damn thing to display.

    ~DB

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bumpity.

    anyone?

  11. #11
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haven't tried it but alistapart.com has a article on that sort of things... http://www.alistapart.com/articles/dropdowns/ maybe it would help.


Bookmarks

Posting Permissions

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