1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

top menu does not display under chrome

Discussion in 'CSS' started by whosedomain, Jan 2, 2015.

  1. #1
    CSS:
    .nav{ height:40px; overflow:hidden; position:absolute; right:90px; top:45px; }
    .nav li{ list-style:none;float:left;padding:0px 10px; text-align:center; height:40px; line-height:40px;}
    .nav .navdown{color:#ff0000;}
    .nav .navdown a{color:#ff0000;}
    .nav .navup{color:#FFFFFF; }
    .nav .navup a{color:#000000;}
    Code (markup):
    html:
    <div class="nav"><SCRIPT language=JavaScript type=text/JavaScript>
    function topnavMouseOver(param1)
        {
         var param2='10001'
         document.getElementById('nav_'+param1).className='navdown';
            document.getElementById('nav_'+param2).className='navup';
        }  
            function topnavMouseOut(param3)
        { 
         var param4='10001'
         document.getElementById('nav_'+param3).className='navup';
            document.getElementById('nav_'+param4).className='navdown';
        }
    </SCRIPT>
    <ul>
    <li class='navdown' id='nav_10001'><a href='http://localhost/metinfo/' onMouseOver=topnavMouseOver('10001') onMouseOut=topnavMouseOut('10001') >Home</a></li>
    <li class='navup' id='nav_1'><a href='about/' 0 onMouseOver=topnavMouseOver('1') onMouseOut=topnavMouseOut('1')>About Us</a></li>
    <li class='navup' id='nav_2'><a href='news/'   onMouseOver=topnavMouseOver('2') onMouseOut=topnavMouseOut('2')>News</a></li>
    <li class='navup' id='nav_3'><a href='product/' 0  onMouseOver=topnavMouseOver('3') onMouseOut=topnavMouseOut('3')>Product</a></li>
    <div style='clear:both;'></div>
    </ul>
    <SCRIPT language=JavaScript type=text/JavaScript>
         document.getElementById('nav_10001').className='navup';
           document.getElementById('nav_'+10001).className='navdown';
    </SCRIPT>
    </div>
    Code (markup):
    the above code runs ok under ie, and firefox, how to let the code runs properly under chrome, pls?
    SEMrush
     
    whosedomain, Jan 2, 2015 IP
    SEMrush
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    We will need a link to the page to do diagnostics. A fragment of out of context code does not help much.

    Cd&
     
    COBOLdinosaur, Jan 3, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #3
    My question would be what the devil makes you think you need javascript to do ANY of that; but that's the case 99.99999% of the time people use onmouseover/onmouseout as of ~2001ish.

    As @COBOLdinosaur said, we'd need to see a live copy of it to really diagnose, but I really suspect that ALL your scripting belongs in the trash, as you're pissing all over the place with JS to do CSS' job! Much less that what scripting you have in the markup:

    <a href='product/' 0  onMouseOver=topnavMouseOver('3') onMouseOut=topnavMouseOut('3')>
    Code (markup):
    since there is no attribute "0", and the onevent attributes need quotes around their values... but again NOT that you really have any business using onmouseover/onmouseout when that's :hover in the CSS' job. Naturally the single quotes also mean garbage server-side coding practices as well... and the 1990's language attribute on SCRIPT...

    Also, the ONLY tags that can be direct children of UL is LI, so that clearing DIV is invalid/gibberish markup. Also this is 2015 not 1998, clearing DIV? REALLY? and naturally the absolute positioning of the outer DIV (that is probably also a DIV for nothing) is a bit suspect as well.

    First step would be to gut the markup down to something a wee bit more sane:

    <ul class="nav">
    	<li><a href="http://localhost/metinfo/" class="current">Home</a></li>
    	<li><a href="about/">About Us</a></li>
    	<li><a href="news/">News</a></li>
    	<li><a href="product/">Product</a></li>
    </ul>
    Code (markup):
    I'm guessing the reason you have the first one as 'navDown' is that it's the current element... and that you want current red, current hovered white, normal black, normal hovered red... which is ALL CSS' job. We axe the extra DIV for nothing, all the stupid malfing scripting for nothing... not sure why you are playing around in pixels so much other than possibly an inaccessible/broken layout methodology, but guessing wildly:

    .nav { 
    	overflow:hidden;
    	list-style:none;
    	/* you REALLY sure you need to aPo this? */
    	position:absolute;
    	right:90px;
    	top:45px;
    }
    
    .nav li {
    	display:inline; 
    	/*
    		It's easier to deal with floating the anchors than it is to dick
    		around with floats on LI. Setting these to inline prevents IE8
    		staircase bug.
    	*/
    }
    
    .nav a {
    	float:left;
    	/*
    		you PROBABLY shouldn't be dicking around with inaccessible PX metric
    		idiocy on something like a menu. 
    		No need to say height if setting line-height.
    	*/
    	padding:0 0.5em;
    	line-height:2em;
    	/* 
    		set color for the most common element so you aren't wasting
    		a class for nothing. P.S. I'm guessing WILDLY on your colorations
    	*/
    	color:#FFF;
    }
    
    .nav a:active, /* when clicked on OR when key nav to in older browsers */
    .nav a:focus, /* when key nav to in modern browsers */
    .nav a:hover {  /* when mouse is over it */
    	color:#F00;
    }
    
    .nav .current {
    	color:#F00;
    }
    
    .nav .current:active,
    .nav .current:focus,
    .nav .current:hover {
    	color:#000;
    }
    Code (markup):
    Should do the trick. Since you aren't declaring fixed widths there's NO reason to be setting text-align... since it's aPo it should be wrapping floats, but setting the overflow:hidden double-checks that so there is NO reason to be wasting a clearing DIV on it. Again as you can see, there is NO reason to be WASTING javascript on this, that's not what JS is for.

    REALLY though I'd be wondering why you are wasting aPo (position absolute) on a MENU -- something that REALLY should be positioned in flow.
     
    deathshadow, Jan 4, 2015 IP
    malky66 and COBOLdinosaur like this.