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 5 of 5

Thread: drop down

  1. #1
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts

    drop down

    Hi

    I am having some difficulties with a drop down menu i am creating it works perfectly in FF but in IE the drop down has some problems

    code:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jamie's Computers</title>
    <link href="./stylesheets/main.css" rel="stylesheet" type="text/css" />
    <link href="./stylesheets/drop-down.css" rel="stylesheet" type="text/css" />
    <meta name="keywords" content="jamies computer club, jamie's computers, disposal, WEEE, recycling, IT training, PC sales"/>
    <script>
    <!--
    function toggle(obj) {
    	var el = document.getElementById(obj);
    	var i=1;
    	var string='submenu';
    	// close any open ones
    	for(i=1;i<=6;i++)
    	{
    	  string+=i
    	  var el2= document.getElementById(string);
    	  if (obj!=string)
    	  {
    		if (el2.style.display == 'block' ) {
    		el2.style.display = 'none';
    		}
    	  }
    	  string='submenu';
    	}
    	
    	if ( el.style.display != 'none' ) {
    		el.style.display = 'none';
    	}
    	else {
    		el.style.display = 'block';
    	}
    	
    }
    //-->
    </script>
    </head>
    <body>
     <div class="nav_bar">
            	<table id="top_nav">
    
                	<tr>
                    	<td>		<ul id="submenu1" onMouseout="toggle('submenu1')">
    				<li><a href="">Option 1</a></li>
    				<li><a href="">Option 2</a></li>
    				<li><a href="">Option 3</a></li>
    				</ul>
    			<a href="about.html" onMouseover="toggle('submenu1')">About us</a></td>
    
                        <td>
    				<ul id="submenu2" onMouseout="toggle('submenu2')">
    				<li><a href="">Option 1</a></li>
    				<li><a href="">Option 2</a></li>
    				<li><a href="">Option 3</a></li>
    				</ul>
    		         <a href="recycling.php" onMouseover="toggle('submenu2')">Recycling</a></td>
    
                        <td>
    				<ul id="submenu3" onMouseout="toggle('submenu3')">
    				<li><a href="">Option 1</a></li>
    				<li><a href="">Option 2</a></li>
    				<li><a href="">Option 3</a></li>
    				</ul>
    		       <a href="sales.html" onMouseover="toggle('submenu3')">Sales</a></td>
    
                        <td>
    				<ul id="submenu4" onMouseout="toggle('submenu4')">
    				<li><a href="">Option 1</a></li>
    				<li><a href="">Option 2</a></li>
    				<li><a href="">Option 3</a></li>
    				</ul>
    		      <a href="training.php" onMouseover="toggle('submenu4')">Training</a></td>
    
                        <td>
    				<ul id="submenu5" onMouseout="toggle('submenu5')">
    				<li><a href="">Option 1</a></li>
    				<li><a href="">Option 2</a></li>
    				<li><a href="">Option 3</a></li>
    				</ul>
    		       <a href="partners.html" onMouseover="toggle('submenu5')">Partners</a></td>
    
                        <td style="border-right:none;">
    		    
    				<ul id="submenu6" onMouseout="toggle('submenu6')">
    				<li><a href="">Option 1</a></li>
    				<li><a href="">Option 2</a></li>
    				<li><a href="">Option 3</a></li>
    				</ul>
    		    <a href="contact.html" onMouseover="toggle('submenu6')">Contact us</a></td>
    
                    </tr>
            	</table>
            </div>
    </body>
    </html>
    CSS:
    Code:
    /* General CSS*/
    
    body, tr, td
    {
    	font-family: Verdana, Arial, sans-serif;
    	color:#183c47;
    	font-size:12px;
    	_font-size:100%;
    	margin:0;
    	padding:0;
    	vertical-align:top;
    }
    
    
    a, a:visited
    {
     	color:#0081c6;
    }
    
    
    
    
    
    
    
    a:hover
    {
     	color:#183c47;
    }
    
    
    
    p
    {
    	font-family: Verdana, Arial, sans-serif;
    	color:#183c47;
    	font-size:12px;
    	_font-size:100%;
    }
    
    
    
    
    
    
    div#page
    {
    	width:100%;
    	text-align:center;
    }
    
    
    
    ul
    {
    	list-style-type: square;
    	margin-left:3em;
    	padding:0;
    }
    
    .nav_bar
    {
    	height:30px;
    	width:760px; 
    	background-color:#183c47;
    	overflow:hidden;
    }
    
    
    
    div#footer
    {
    	text-align:center;
    	clear:both;
    }
    
    body
    {
    	margin-top:0;
    }
    
    
    
    
    table#top_nav
    {
    
    
    
    }
    
    
    
    table#top_nav tr td
    {
    	border-right:2px groove #183c47;
    	_border-right-color:#8b9da3;
    	width:10%;
    	height: 26px;
    	padding-left:2px;
    	padding-right:2px;
    	padding-top:5px;
    	text-align:center;
    }
    
    
    
    table#top_nav tr td a
    {
    	display:block;
    	text-decoration:none;
    	color:white;
    	border:2px outset #183c47;
    	_border-left-color:#8b9da3;
    	_border-top-color:#8b9da3;
    }
    
    
    
    table#top_nav tr td a:hover
    {
    	color:white;
    	/*text-decoration:underline;*/
    	border:2px inset #183c47;
    	_border-right-color:8b9da3;
    	_border-bottom-color:8b9da3;
    }
    
    table#top_nav ul
    {
    	display:none;
    	list-style:none;
    	position:absolute;
    	top:0;
    	bottom:0;
    	width:125px;
    }
    
    
    
    table#top_nav ul li
    {
    	background-color:#183C47;
    }
    Any ideas whats causing this?
    You can not say you know how to do something, until you can teach it to someone else.

  • #2
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    What exactly are the problems, and could you give us a link to your page?


    thanks,
    koss

  • #3
    New Coder
    Join Date
    Apr 2007
    Location
    India
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts

    search the forum

    hi tim

    i think the drop down issue have been discussed many times in this forum and still many of us starting a new thread for it. Its better to have a search in this forums related to that drop down issue and move for new thread.
    GemGuy

    Be friend of me
    Hey what a fun

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    I did but the problem is specific to this code and the nav bar must stay in the style.
    You can not say you know how to do something, until you can teach it to someone else.

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    IE might be having a problem because it's working in quirksmode because of the xml statement before your doctype?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

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