Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts

    css definition issue

    Hello all,
    I have a problem with defining a class for particular <a>
    If you look at this page, you will see the menu. If you hover a word and go down along the drop down, then the color for the <a> reverts to browser default, something which does not happen if you over the word and then go straight to another without going down along the drop.. you see what I mean?

    Maybe it is an issue with the javascript.... When I applied the a:hover to the whole list, such issue did not appear...

    I hope someone of you understand the issue :-)

    here is the html:
    Code:
    <div id="menu_bar">
      <ul id="menu">
        <li><a class="men_grey" href="#">Home</a>
    
        <ul>
          <li><a href="#">home page</a></li>
          <li><a href="#">about site</a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">contact</a></li>
        </ul>
    
        </li>
        <li><a class="men_black" href="#">hello</a>
    
        <ul>
          <li><a href="#">log in</a></li>
          <li><a href="#">post query</a></li>
          <li><a href="#">register</a></li>
          <li><a href="#">search offers</a></li>
        </ul>
    
        </li>
        <li><a class="men_black" href="#">hello</a>
    
        <ul>
          <li><a href="#">log in </a></li>
          <li><a href="#">register </a></li>
          <li><a href="#">post offer</a></li>
          <li><a href="#">bulk upload </a></li>
        </ul>
    
        </li>
        <li><a class="men_grey" href="#">hello</a>
    
        <ul>
          <li><a href="#">search guide</a></li>
          <li><a href="#">leave comment</a></li>
          <li><a href="#">all year long </a></li>
        </ul>
    
        </li>
      </ul>
    </div>
    here is the css:
    Code:
    #menu_bar
    {
    background: transparent url("");
    height: 45px;
    }
    #menu {margin-left:250px;}
    
     #menu li {
        float: left;
        display: block;
        font-size: 10pt;
    padding: 1px 13px 0px 0;
    width:120px;
      }
      #menu li a {
        padding: 4px 0px;
        display: block;
        font-weight: bold;
        text-align:center;
      }
    
    
      #menu li ul {
        left : -999em;
        position : absolute;
    padding-bottom:12px;
    padding-top:6px;
    padding-left:0px;
    	z-index:950;
    	background:transparent url("") no-repeat scroll 0 bottom;
      }
    
      #menu li ul li { float : none; margin-left:6px;}
    
      #menu li ul a {
        width : 100px;
        padding-left:10px; 
        font-weight : normal;
        padding-bottom:1px;
        padding-top:2px;
        text-align:left;
        color:grey;
      } 
    
      #menu li ul a:hover {
        color: orange;
    	border-bottom: 1px solid #C9C9C9;
    	border-top: 1px solid #C9C9C9;
      }
    
      #menu li:hover ul, #menu li.sfhover ul {
        left: auto;
    	visibility: visible; /*IE fix for stickiness*/
      }
      
    a.men_grey, a.men_grey:visited
    {
    color:grey;
    } 
    
    a.men_grey:hover, a.men_grey:active
    {
    color: orange;
    }
      
     a.men_black, a.men_black:visited
    {
    color:black;
    } 
    
    a.men_black:hover, a.men_black:active
    {
    color: orange;
    }
    Thanks a lot for having a look,
    Michael
    Last edited by mikacruz; 06-02-2009 at 10:58 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    thanks for reminding me to validate abdu ;-)
    It seems to validate now but the issue is still there...
    Last edited by mikacruz; 06-02-2009 at 11:39 AM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Um.. it's you javascript, which replaces the default class attribute values with null on mouseout.

    For making a drop down, use the javascript given at http://htmldog.com/articles/suckerfish/dropdowns/, which targets IE only.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    I'm using such javascript (suckerfish), and it was working well if I applied a color to the whole <li><a>
    Code:
      #menu li a {
        padding: 4px 0px;
        display: block;
        font-weight: bold;
        text-align:center;
      }
    but when I removed that color from there and instead defined a new class, such as below, it stopped working properly.
    Code:
    a.men_grey, a.men_grey:visited
    {
    color:#BBBBBB;
    } 
    
    a.men_grey:hover, a.men_grey:active
    {
    color: orange;
    }
    Probably a javascript problem indeed. I shall post overthere, thanks.
    Last edited by mikacruz; 06-02-2009 at 12:37 PM.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'm using such javascript (suckerfish), and it was working well if I applied a color to the whole <li><a>
    http://htmldog.com/articles/suckerfish/dropdowns/ has
    Code:
    sfHover = function() {
    	var sfEls = document.getElementById("nav").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);
    only where as you have a lot of unwanted(not required for that drop down) scripts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Dec 2007
    Location
    on earth
    Posts
    183
    Thanks
    49
    Thanked 2 Times in 2 Posts
    I will look at what you are referring to just now. I fixed the issue by adding the class to the <li> rather than straight <a>:
    css
    Code:
     li.men_grey a 
    {
    color: #919191;
    } 
     li.men_black a
    {
    color: #656565;
    }
    html
    Code:
        <li class="men_grey"><a href="#">Home</a>
    
        <ul>
          <li><a href="#">home page</a></li>
          <li><a href="#">about site</a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">contact</a></li>
        </ul>
    
        </li>
    Last edited by mikacruz; 06-02-2009 at 01:36 PM.


  •  

    Posting Permissions

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