SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 41
  1. #1
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hover issue for dropdown menu on different browsers.

    Hi,

    I have just completed my dropdown menu for my website www.leehughes.co.uk

    Everything works fine for me so I thoughts I had completed it however, my friend told me that she has trouble picking the links that drop down. They disappear soon after making it hard to select the link, she is using AOL. This is also the case for my mums computer who uses IE.

    I can't figure out what it is, my only guess is that it is an hover issue within these browsers.. am not sure..

    Code:
    /* 
      ------------------------------------
      PVII Menu CSS Express Drop-Down Menu
      by Project Seven Development
      www.projectseven.com
      ------------------------------------
    */
    body {
    	font-family: "Trebuchet MS", Arial, sans-serif;
    	font-size: 100%;
    	background-color: #000000;
    	margin: 24px 0;
    	padding: 0;
    	background-image: url();
    	background-repeat: repeat-x;
    	color: #FFFFFF;
    }
    /*
    Container for the menu. We set top and bottom borders only because the menu container
    stretches the entire window width. Note that this container can go inside a fixed width
    element that is centered on the page, if you so desire. It can even go inside a table cell.
    It carries a background image for aesthetics.
    */
    #menuwrapper {
    	border-top: 1px solid #000;
    	border-bottom: 1px solid #333;
    	background-color: #000000;
    	background-image: url();
    	background-repeat: repeat-x;
    	padding-bottom: 25px;
    	padding-right: 1px;
    	margin-right: 0px;
    	height: 1px;
    	bottom: auto;
    }
    /*Clears the floated menu items.
    Assigned to a BR tag placed just before
    menuwrapper's closing DIV tag*/
    .clearit {
    	clear: both;
    	height: 0;
    	line-height: 0.0;
    	font-size: 0;
    }
    /*
    p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs.
    We set padding and margin to zero to eliminate all indentation, turn bullets off,
    and set a font-family different from the global font-family declared for the
    body element above. This sets font for just the menu. Do not add a font-size here.
    */
    #p7menubar, #p7menubar ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	font-family: Arial, Helvetica, sans-serif;
    }
    /*
    Root-Level Links.  Do not change the first two properties.
    Adjust padding values to make the root links taller and to offset them
    from the left and right edges of the link box. The border right creates a
    separator between links. Font-size is set here and will apply to all menu levels.
    Font color is set to light gray.
    */
    #p7menubar a {
    	display: block;
    	text-decoration: none;
    	padding: 5px 5px 5px 10px;
    	border-right: 1px solid #333;
    	font-size: .85em;
    	color: #CCCCCC;
    }
    /*
    Class assigned to those Root-Level links that have associated Sub-Menus.
    The top and bottom padding assigned this element must be the same as
    that assigned to the p7menubar a element. The right padding is increased
    to accomodate the display of background image depicting a downward
    pointing arrow.
    */
    #p7menubar a.trigger {
    	padding: 5px 16px 5px 10px;
    	background-image: url();
    	background-repeat: no-repeat;
    	background-position: right center;
    }
    /*
    The Root-Level list items. Floating left allows
    them to appear horizontally. Width is for IE5 Mac. The last rule in
    this style sheet will set the width for this element to auto for all
    other browsers - hiding it from IE5 Mac. The width is proportional.
    As you add and edit root menu items, you will need to test this width
    to ensure it is wide enough to accomodate all text.
    */
    #p7menubar li {
    	float: right;
    	width: 9em;
    }
    /*
    Sets width for Sub-Menu box and the List Items inside - in proportional em units. 
    This allows the sub-menu width to expand if users resize the text in their browsers.
    */
    #p7menubar li ul, #p7menubar ul li  {
    	width: 12em;
    }
    /*
    The sub-menu links. We set color and turn off the right border, which
    would otherwise be inherited from the root link rule. We set top and 
    bottom padding less than the root items and increas the left padding
    to indent the sub-menu links a small amount in from the root links.
    */
    #p7menubar ul li a  {
    	color: #565656;
    	border-right: 0;
    	padding: 3px 12px 3px 16px;
    }
    /*
    Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. 
    Positioned Absolutely to allow them to appear below their root trigger.
    Set to display none to hide them until trigger is moused over.
    Background Color must be set or problems will be encountered in MSIE.
    Right and bottom borders are set to simulate a raised look.
    A gradient background image is assigned.
    */
    #p7menubar li ul {
    	position: absolute;
    	display: none;
    	background-color:<param name="wmode" value="transparent">;
    	border-right: 0px solid #FFFFFF;
    	border-bottom: 0px solid #FFFFFF;
    	background-image: url();
    	background-repeat: repeat-x;
    }
    /*
    Changes the Text color and background color when the Root-Level
    menu items are moused over. The second selector sets color and background
    when Root-Level items are accessed with the keyboard tab key. The third
    selector sets an active state to support keyboard access in MSIE. The fourth 
    selector is assigned to IE5 and IE6 Windows via the P7_ExpMenu script.
    Note that IE7 supports hover on elements other than links and so behaves
    like Firefox, Opera, and Safari - making the menu operable even if JavaScript
    is not enabled.
    */
    #p7menubar li:hover a, #p7menubar a:focus,
    #p7menubar a:active, #p7menubar li.p7hvr a {
    	color: #000000;
    	background-color: #C19674; 
    }
    /*
    Set the Sub-Menu UL to be visible when its associated
    Root-Level link is moused over. The second selector is 
    assigned to IE5 and IE6 via the P7_ExpMenu script.
    */
    #p7menubar li:hover ul, #p7menubar li.p7hvr ul {
    	display: block;
    }
    /*
    Sets the Text color of the Sub-Level links when the Root-Level
    menu items are moused over. The second selector is 
    assigned to IE5 and IE6 via the P7_ExpMenu script.
    The color set should march the normal Sub-Level link color
    in the rule: #p7menubar ul li a. The background color must be
    transparent to allow the underlying gradient background on the UL
    to show through.
    */
    #p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
    	color: #000000;
    	background-color: transparent;
    }
    /*
    The normal hover class for Sub-Level links. The Important directive
    is required for older browsers. We set a background color, which shows
    over the gradient background. We set text color to white.
    */
    
    /* hide from IE mac \*/
    
    #p7menubar li {position: static; width: auto;}
    
    /* end hiding from IE5 mac */
    
    #p7menubar ul a:hover {
    	background-color: #000000!important;
    	color: #FFFFFF!important;
    }
    /* The single backslash \ character inside this comment
    causes IE5 Mac to ignore the following rule, which allows other
    browsers to render top-level menu items to their natural width.
    Do not edit this rule in any way. */
    #p7menubar li {width: auto;}
    #outer #right div {
    }
    #outer #right a {
    	padding-bottom: 10px;
    }
    Attached Files Attached Files

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You are missing a closing </style> tag in your page. When the internal stylesheet ends you have a link to an external stylesheet (links.css) , then you have a single selector called .style6 in an internal style. It is missing the closing tag. You don't need that html comment in there either.

    Code:
    
    <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    
    <link href="links.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    <!--
    .style6 {font-size: 120&#37;}
    
    -->
    missing closing tag here
    <script type="text/javascript" src="p7exp/p7exp.js"></script>
    <link href="dropdown.css" rel="stylesheet" type="text/css" />
    
    
    <!--[if lte IE 7]>
    <style>
    #menuwrapper, #p7menubar ul a {height: 1%;}
    a:active {width: auto;}
    </style>
    <!--[endif]-->
    Try this instead -
    Code:
    <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    
    <link href="links.css" rel="stylesheet" type="text/css">
    
    <style type="text/css">
    .style6 {font-size: 120%}
    </style>
    
    <script type="text/javascript" src="p7exp/p7exp.js"></script>
    <link href="dropdown.css" rel="stylesheet" type="text/css" />
    
    <!--[if lte IE 7]>
    <style>
    #menuwrapper, #p7menubar ul a {height: 1%;}
    a:active {width: auto;}
    </style>
    <!--[endif]-->

  3. #3
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, missed that but still the same result..

    i even replace <li> with <a> to the make hover work with IE but still doesn't work meh

  4. #4
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    av just found out about whatever:hover..


    couldn't get it to work though

  5. #5
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    update...

    I have narrowed down the problem to that of IE does not like the code I put in for the transparent colour as my backround

    Code:
    <param name="wmode" value="transparent">
    My aim is to get the drop down background to transparent then when hover over the link background goes black with white font colour to highlight the link..

    Is there a code for a transparent background that works well with MSIE?

    thanks

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Is there a code for a transparent background that works well with MSIE?
    That would be the Microsoft.AlphaImageLoader if I remember correctly.
    Perhaps someone who has had more experience with it than me can point you in the right direction.

    Paul makes use of it in some of his examples -
    http://www.pmob.co.uk/temp/dropdown-...ransparent.htm

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi, maybe I'm confused, but <param name="wmode" value="transparent"> is for flash, not transparent backgrounds.

    Here is transparency for all browsers...
    opacity:.5; /* FX/Opera/Safari/Chrome */
    -ms-filter:"alpha(opacity=50)"; /* IE8 */
    filter:alpha(opacity=50); /* IE6/IE7 */

    The alpha image loader thing is an ie6 png24 fix.

    And, yes, I understand about the whatever:hover, I put it in 10 lines or less here at the bottom of the page... http://www.visibilityinherit.com/cod...javascript.php

  8. #8
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,

    I have someone check for me and they have it working on IE 8... I tried it on IE 7 and no go..

    I need some sort of hack or something, quite puzzling.

  9. #9
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also added background-color: transparent; which seemed to make the background transparent but still gave me the same problems. SO am guessing it is not a transparent issue any more

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I assume that you have made the corrections I mentioned above on your local files. They have not been updated on your live page. When the corrections from post#2 are made these changes below get your page working for me in IE7.

    In your dropdown.css -
    Code:
    #menuwrapper {
        border-top: 1px solid #000;
        border-bottom: 1px solid #333;
        background-color: #000000;
        background-image: url();
        background-repeat: repeat-x;
        padding-bottom:0;/* 25px;*/
        padding-right: 1px;
        margin-right: 0px;
        height: 1px;
        bottom: auto;
    }
    
    #p7menubar li ul, #p7menubar ul li  {
        width: 12em;
        background:url(fake.jpg); /*IE needs some sort of BG on the UL*/
    }

  11. #11
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Rayzur,

    Av corrected and uploaded the page with the new code, I have no idea if it works because am at the girlfriends now and we both have macs.

    The menu has dropped down a little bit, am I ok to edit this to get it back up to the top of the picture without affecting the page?

    Thanks for your time

    edit...

    I mis read your 2nd post. I now have the </style> tag in the correct place and I have deleted the html comments <!--[if lte IE 7]> and the other one.

    It is now in the correct position. Still need to test it however..

    Thanks
    Last edited by leehughes; Jul 20, 2009 at 06:13. Reason: update

  12. #12
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    works in IE7

  13. #13
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just checked other pages within my site and although the home page looks good and works the other pages have the problem of my previous post of the links coming down onto the background image..

    Can i move these up with out affecting it working on IE?

    thanks

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I mis read your 2nd post. I now have the </style> tag in the correct place and I have deleted the html comments <!--[if lte IE 7]> and the other one.
    Hi,
    The only html comments you needed to delete were the ones highlighted in red. The <!--[if lte IE 7]>comment was fine. I just highlighted other stuff in green and blue to help you locate it in your page.

    If you set it up like it was where I said (Try this instead -) all is well.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry I don't follow you..what ..

    I see it now.

    The problem is that on #menuwrapper you put height:1px thus the content is hanging out of that container. Remove the height:1px and you are all good.

    Well...IE6/7 need haslayout on #menuwrapper in order for it to appear above the background.
    Code:
    #menuwrapper
    {
      height:auto;/*otherwise it will hang out*/
      min-height:0;/*Ie7 haslayout*/
    }
    * html #menuwrapper
    {
      height:1&#37;;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #16
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    I copy and pasted the code which you gave in your 2nd post..

    the code
    <!--[if lte IE 7]>
    <style>
    #menuwrapper, #p7menubar ul a {height: 1%;}
    a:active {width: auto;}
    </style>
    <!--[endif]-->


    is the colour grey which am guessing means is not active... is this supposed to happen? sorry if these seem like dumb questions.

  17. #17
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    that code made my page go funny....

    See pic 2..

    This is my problem http://www.leehughes.co.uk/Charity/index.html

    The text goes into the picture.

    My original problem was that when the drop down comes down you could not select this on IE 7 or lower..
    Attached Images Attached Images

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    ?? I tried that code personally and it worked. The navbar then went above the image with that code.....

    Did you remove the height on #menuwrapper? Did you add min-height:0; to it instead? Did you add the IE6 hack?
    Code:
    #menuwrapper{height:auto;min-height:0;}
    * html #menuwrapper{height:1&#37;;}
    ..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    apologies Ryan,

    I got confused with the code....

    now working..

    I am unaware of the IE6 hack as I was unaware of the problem in css terms.

    Thanks

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ah ok lol I thought I was misinterpreting it again (I do that so often lol).

    Glad it worked
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to trouble you but could you point me to the ie6 hack?

    I know it works now for IE7 (thanks Rayzur) but am unable to test it on IE6 as i have a mac..

    Just wanna cover my **** as it were

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leehughes View Post
    Sorry to trouble you but could you point me to the ie6 hack?

    I know it works now for IE7 (thanks Rayzur) but am unable to test it on IE6 as i have a mac..

    Just wanna cover my **** as it were
    The * html #menuwrapper{height:1%;} is the IE6 hack.

    It selects IE6 down and gives it haslayout (which is what the min-height:0; does in the code)

    I checked IE6 and it is working. I got your back, so to speak .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh! Silly me

    Thanks

  24. #24
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It looks like you have some errors in your nested list structure. You were missing some closing list tags on some list items that contain sublist. The "Miscellaneous" and "Blog" links in particular.

    Also get rid of that empty p tag at the end of the list.
    <p>&nbsp;</p>

    Try this -
    Code:
    <div id="header">        
        <div align="left"> 
            <p><font color="#FFFFFF" size="5">The adventure of a lifetime</font><font size="5"></font></font></p>    
            <div id="menuwrapper">                
                <ul id="p7menubar">
                    <li><a href="Sponsorship/index.html">Sponsorship</a></li>
                    <li><a class="trigger" href="#">Contact me</a>
                        <ul>
                            <li><a href="http://www.facebook.com/home.php#/profile.php?id=881485724&ref=profile">Facebook</a></li>
                            <li><a href="http://twitter.com/leehughes21">Twitter</a></li>
                            <li><a href="http://www.vimeo.com/user1920247/videos">Vimeo</a></li>
                            <li><a href="http://www.youtube.com/user/rhythmofthecosmos">Youtube</a></li>
                            <li><a href="http://www.flickr.com/photos/39535358@N02/">Flickr</a></li>
                            <li><a href="mailto:rhythmofthecosmos@gmail.com">Email</a></li>
                        </ul>
                    </li>
                    <li><a class="trigger" href="#">Miscellaneous</a>
                        <ul>
                            <li><a href="Links/index.html">Links</a></li>
                            <li><a href="Facts_and_stats/index.html">Facts and stats</a></li>
                            <li><a href="FAQs/index.html">FAQs</a></li>
                            <li><a href="Equipment/index.html">Equipment</a></li>
                        </ul>
                    </li>
                    <li><a class="trigger" href="#">Blog</a>
                        <ul>
                            <li><a href="#">August 2009</a></li>
                        </ul>
                    </li>
                    <li><a class="trigger" href="#">Charity</a>
                        <ul>
                            <li><a href="Charity/index.html">About Action Aid</a></li>
                            <li><a href="http://www.justgiving.com/leehughes-theadventureofalifetime/">Donate</a></li>
                        </ul>
                    </li>
                    <li><a class="trigger" href="#">Multimedia</a>
                        <ul>
                            <li><a href="Video/index.html">Video</a></li>
                            <li><a href="Photography/index.html">Photography</a></li>
                            <li><a href="Media/index.html">Media</a></li>
                        </ul>
                    </li>
                    <li><a class="trigger" href="#">Expeditions</a>
                        <ul>
                            <li><a href="Walk_New_Zealand/index.html">Walk New Zealand</a></li>
                            <li><a href="Future_expeditions/index.html">Future expeditions</a></li>
                        </ul>
                    </li>
                    <li><a class="trigger" href="#">Route</a>
                        <ul>
                            <li><a href="Route/2D.html">2D Route</a></li>
                            <li><a href="Route/3D.html">3D Route</a></li>
                        </ul>
                    </li>
                    <li><a href="index.html">Home</a></li>
                </ul>
                <br class="clearit">
            </div><!-- end menuwrapper -->
        </div><!-- end left -->
    </div><!-- end header -->

  25. #25
    SitePoint Addict
    Join Date
    Jun 2009
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    Everything works when previewed in browser but when uploaded goes back to that problem.. will there be some sort of time delay or something..

    So close to finishing my website... arggh lol


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
  •