Thread: Drop down menu

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    5
    Rep Power
    0

    Drop down menu


    Hey guys,

    New to the forum. Mainly came on here to get help with my nav bar. It works perfectly in FF and IE 8.07+, but the problem it with IE8.06, where it doesn't show at all. Not too worried about pre-8.06, only a small amount of my page hits comes from below that version.

    I've spent ages looking for a problem, but can't find where I've went wrong. There's may be some superfluous stuff in there that I've added to try and fix the problem.. Please help? =)

    ------------------------

    Code:
    #PageList1 ul {
    height: 1.5em;
    overflow:hidden;
    margin: 10px -10px 5px;
    width: 100%;
    padding: 10px;
    background-image:url('http://4.bp.blogspot.com/-WKkxGKrRVcw/TbFWFn_2VxI/AAAAAAAAAis/NKf1k3sO9A8/s1600/nav_bg2.jpg');
    background-repeat:repeat-x;
    }
    
    #PageList1 li {
    height: 1.5em;
    list-style-type:none;
    float:left;
    }
    
    #PageList1 li a {
    display:block;
    height: 1.5em;
    width:auto;
    clear:left;
    font-weight:bold;
    font-size:9pt;
    line-height: 0.5em;
    margin: -9px 0px -23px;
    color: #ffffff;
    background-image:url('http://3.bp.blogspot.com/_vhqPwC7csIg/TSUQG6Q3tfI/AAAAAAAAAYU/5ceiGi8na3s/s1600/gradient40px.jpg');
    background-repeat:repeat-x;
    text-align:center;
    text-decoration:none;
    
    padding: 10px 10px 15px;
    
    	border: 1px solid #ccc;
    	border-right: 0px solid #ccc;
    	border-bottom: 0px solid #ccc;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
        -moz-box-shadow: 3px 3px 4px #000;
        -webkit-box-shadow: 3px 3px 4px #000;
        box-shadow: 3px 3px 4px #000;
    }
    #PageList1 li a:hover, #PageList1 li a.sfhover {
    background:transparent;
    font-weight:bold;
    color: white;
    }
    
    #PageList1 li ul {
    	left: -999em;
            position: absolute;
    	width: 13em; /* Width to help Opera out */
    height: auto;	
    background-color: #ccc; 
    colour:#fff; 
    clear: left;
    }
    
    #PageList1 li:hover ul, #PageList1 li.sfhover ul {
    	left: auto;
    	margin: 8px -80px 0px;
    width: 13em;
    height: auto;
    background: #ccc;
    
    }
    
    #PageList1 li:hover li a, #PageList1 li.sfhover li a {
    background:#ccc;
    	border: 0px solid #ccc;
    	border-right: 0px solid #ccc;
    	border-bottom: 0px solid #fffccc;
    	-webkit-border-radius: 0px;
    	-moz-border-radius: 0px;
    	border-radius: 0px;
    padding: 0px;
    margin: 5px 0px 0px;
        -moz-box-shadow: 0px 0px 0px #000;
        -webkit-box-shadow: 0px 0px 0px #000;
        box-shadow: 0px 0px 0px #000;
    	color: #000; 
    }
    #PageList1 li li a:hover, #PageList1 li li a.sfhover {
    	background-color: #ccc; 
    color: #fff;}
    
    <script type='text/javascript'>
    sfHover = function() {
    	var sfEls = document.getElementById("PageList1").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    170
    Seems to work for me in IE 8.06?!

    Is JavaScript enabled?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    5
    Rep Power
    0
    Originally Posted by AndrewSW
    Seems to work for me in IE 8.06?!

    Is JavaScript enabled?
    Really?? I've probably made a rookie mistake of relying on my mate who HAS 8.06, which I can't get working on my comp.

    Thanks Andrew. Can I DM you my demo site to double check it's all good?
  6. #4
  7. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    170
    Okay
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    5
    Rep Power
    0
    Originally Posted by AndrewSW
    Okay
    Ok so can't send you a dm or put the link here as this is too new an account..

    'tfstestsite' hosted on blogspot
  10. #6
  11. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    170
    Type the address with spaces and (dot) for .
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    5
    Rep Power
    0
    Originally Posted by AndrewSW
    Type the address with spaces and (dot) for .
    [WEBSITE REMOVED]
    Last edited by Eoas; April 24th, 2011 at 10:24 PM. Reason: Removed website
  14. #8
  15. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    170
    Yes, works ok in IE for me .. almost

    The drop-downs for States and A-League sit behind the little video and section to the right, as attached.
    This probably just needs a little tweeking of z-indexes - although it's odd that it works in FF (we hate IE??!). I generally find it better to reduce the z-index of the elements that overlap, rather than constantly increasing the z-index for the item of interest.

    I am not a web designer, but I would prefer to be able to distinguish between buttons, like Home and About, and drop-downs. (If I point at About I'm not sure if I'm waiting for a drop-down.) Although, I suppose, most users these days realise that Home/ About etc. are likely to be buttons

    For your next challenge you could make the button text a light grey for the currently active page. I achieved this by adding a class to the link for the current page.
    Attached Images
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    5
    Rep Power
    0
    Originally Posted by AndrewSW
    Yes, works ok in IE for me .. almost

    The drop-downs for States and A-League sit behind the little video and section to the right, as attached.
    This probably just needs a little tweeking of z-indexes - although it's odd that it works in FF (we hate IE??!). I generally find it better to reduce the z-index of the elements that overlap, rather than constantly increasing the z-index for the item of interest.

    I am not a web designer, but I would prefer to be able to distinguish between buttons, like Home and About, and drop-downs. (If I point at About I'm not sure if I'm waiting for a drop-down.) Although, I suppose, most users these days realise that Home/ About etc. are likely to be buttons

    For your next challenge you could make the button text a light grey for the currently active page. I achieved this by adding a class to the link for the current page.
    Wow, thankyou for being so helpful! Amazing!

    The overlapping and the highlight for active page are both things I'd like to resolve, so thanks for pointing them out. TBH I'm thinking that the video doesn't need to be there anyway and can be moved so I don't have that issue.

    Thanks again Andrew!

IMN logo majestic logo threadwatch logo seochat tools logo