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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Fancy Drop Down Menu Help

    Hey, have another question. I've made a basic website template, which I'm still working on, but I'd like to make it compatible with IE before I go any further.

    I'm having trouble with the drop down menu that is located in the top right section on the site...in the banner.

    It seems to work fine in FireFox (which is what I've built it for), Safari, and Chrome, but it will not work in Internet Explorer. Problem is....it doesn't hide the links, or "il" section. I was able to get it to do so, but then it would not let you select any of them...they would disappear as soon as you moved your mouse off of the top section, or "ul" i believe it's called.

    Here is the website link http://pmportfolio.net/tester
    and here is the CSS sheet for the menu http://pmportfolio.net/tester/dropdown.css

    I'm sure I'm probably missing some things as well as having things I don't need. I'm lost.

    Here is the code for the menu:
    Code:
    <div id="rgbar">
    	<div id="container">
    
    		<div id="specialtext">
    			<div id="gameselector">
    				<div class="menu">
    					<ul>
    
    					 <li><a href="#">Drop Down Links
    					  <ins>
    
    						<table cellspacing="0" cellpadding="0"><tr><td>
    							<ul>
    							    <li><a href="#" target='_blank'>&nbsp;First One</a></li>
                            		<li><a href="#" target='_blank'>&nbsp;Second One</a></li>
                         		    <li><a href="#" target='_blank'>&nbsp;Third One</a></li>
                          		    <li><a href="#" target='_blank'>&nbsp;Fourth One</a></li>
    							</ul>
    
    						</td></tr></table>
    					  </ins></a>					 </li>
    					</ul>
    				</div>
    			</div>
    		</div>
    </div>

    and here is the CSS
    Code:
    /*	#rgbar
    	{
    	position:absolute;
    	top:8px;
    	left:0px;
    	width:1180px;
    	height:80px;
    	border:0px;
    	display:block;
    	font-size:10px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	padding:0px;
    	margin:0px;
    	*/
    
    /* SPECIAL TEXT FORMATION */
    	#rgbar #container #specialtext
    	{
    	width:190px;
    	text-align:center;
    	font-size:10px;
    	color:#FFFFFF;
    	padding:4px 0px 0px 0px; font-weight: bold;
    	}
    	#rgbar ins
    	{
    		text-decoration:none;
    	}
    	#rgbar a,
    	#rgbar a:link,
    	#rgbar a:visited,
    	#rgbar a:active,
    	#rgbar a:hover
    	{
    		font-family:Verdana, Arial, Helvetica, sans-serif;
    		font-size:10px;
    		color: #ccc
    	}
    
    	/* remove all the bullets, borders and padding from the default list styling */
    	#rgbar #container #specialtext #gameselector .menu ul
    	{
    		padding:0;
    		margin:0;
    		list-style-type:none;
    	}
    	/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    	#rgbar #container #specialtext #gameselector .menu li
    	{
    		float:left;
    		width:175px;
    		position:relative;
    		z-index:100; left:5;
    	}
    	/* style the links for the top level */
    	#rgbar #container #specialtext #gameselector .menu a,
    	#rgbar #container #specialtext #gameselector .menu a:visited
    	{
    		display:block;
    		text-align:left;
    		font-size:10px;
    		text-decoration:none;
    		color:#000000;
    		width:169px;
    		height:16px;
    		padding-left:4px;
    		line-height:16px;
    		background-color: #c8c8c8; background-image: url("images/dropbg.png"); border: 1px solid #000000;
    
    -moz-border-radius-topright: 2px; /* mozilla border radius */
    -webkit-border-radius-topright: 2px; /* safari and chrome border radius */
    border-radius-topright: 2px; /* opera border radius */
    
    -moz-border-radius-topleft: 2px; /* mozilla border radius */
    -webkit-border-radius-topleft: 2px; /* safari and chrome border radius */
    border-radius-topleft: 2px; /* opera border radius */
    		}
    	/* a hack so that IE5.5 faulty box model is corrected */
    	* html #rgbar #container #specialtext #gameselector .menu a,
    	* html #rgbar #container #specialtext #gameselector .menu a:visited
    	{
    		width:175px;
    		/* QUIRKS MODE */
    		/* w\idth:175px; */
    		/* VALID MODE */
    		w\idth:173px;
    	}
    	/* IE 6 to OPERA Switch */
    	html > body #rgbar #container #specialtext #gameselector .menu ul ul
    	{
    		p\osition:relative;
    		d\isplay:none;
    		top: 18px; left:-5;
    	}
    	/* style the table so that it takes no ppart in the layout - required for IE to work */
    	#rgbar #container #specialtext #gameselector .menu table
    	{
    		position:absolute;
    		top:0;
    		left:0;
    		border-collapse:collapse;
    	}
    
    	/* style the second level links */
    	#rgbar #container #specialtext #gameselector .menu ul ul a,
    	#rgbar #container #specialtext #gameselector .menu ul ul a:visited
    	{
    		text-align:left;
    		background:#222;
    		color:#bbb;
    		height:auto;
    		line-height:12px;
    		padding:3px;
    		width:167px;
    		border:1px solid #000000;
    		border-width:0 1px 1px 1px;
    -moz-box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: inset 0 0 1em #000000;
    box-shadow: inset 0 0 1em #000000;
    
    -moz-border-radius: 0px; /* mozilla border radius */
    -webkit-border-radius: 0px; /* safari and chrome border radius */
    border-radius: 0px; /* opera border radius */
    	}
    
    	#rgbar #container #specialtext #gameselector .menu ul ul li.last,
    	#rgbar #container #specialtext #gameselector .menu ul ul li.last:visited
    	{
    		text-align:left;
    		background:#000000;
    		color:#bbb;
    		height:auto;
    		line-height:12px;
    		padding:0;
    		width:171px;
    		w\idth:173px;
    		border:1px solid #555;
    		border-width:0 1px 1px 1px;
    		b\order-width:0 1px 1px 1px;
    	}
    	#rgbar #container #specialtext #gameselector .menu ul ul li.last a,
    	#rgbar #container #specialtext #gameselector .menu ul ul li.last:visited a:visited
    	{
    		border: 0px;
    		width: 173px;
    		w\idth: 166px;
    	}
    
    	/* yet another hack for IE5.5 */
    	* html #rgbar #container #specialtext #gameselector .menu ul ul a,
    	* html #rgbar #container #specialtext #gameselector .menu ul ul a:visited
    	{
    		width:175px;
    		/* QUIRKS MODE */
    		/* w\idth:175px; */
    		/* VALID MODE */
    		w\idth:167px;
    	}
    	/* style the top level hover */
    	#rgbar #container #specialtext #gameselector .menu ul a:hover
    	{
    		color:#000000;
    		background-color: #c8c8c8;
    	}
    	#rgbar #container #specialtext #gameselector .menu ul ul a:hover
    	{
    		color:#FFF;
    		background:#2a78c6;
    	}
    	#rgbar #container #specialtext #gameselector .menu :hover > a,
    	#rgbar #container #specialtext #gameselector .menu ul ul :hover > a
    	{
    		color:#c8c8c8;
    		background:#222;
    	}
    	/* make the second level visible when hover on first level list OR link */
    	#rgbar #container #specialtext #gameselector .menu ul li:hover ul,
    	#rgbar #container #specialtext #gameselector .menu ul a:hover ul
    	{
    		visibility:visible;
    	}
    	/* IE 6 to OPERA Switch */
    	html > body #rgbar #container #specialtext #gameselector .menu ul li:hover ul,
    	html > body #rgbar #container #specialtext #gameselector .menu ul a:hover ul
    	{
    		d\isplay:block;
    	}


    I'm ready to give up and just find another one online somewhere that will work.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,248
    Thanks
    15
    Thanked 254 Times in 254 Posts
    To make it work with IE the very first thing you need is a doctype statement consistent with your page coding. Don't even start a page without having the doctype statement in place.

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    32
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I don't know much about those. I added one yesterday and it messed up other parts of the layout. Centered everything for some reason, made my onmouseover text affects no longer work, and my pagination buttons no longer have a background color.
    Are there different ones, and if so how do you know which to use?
    Last edited by jimmyd; 12-19-2010 at 06:56 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
    •