#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2008
    Posts
    42
    Rep Power
    11

    Css drop down menu problem in i.e 7


    Hi I have the following menu worlks fine in firefox etc but will not work in I.E 7 any ideas why?

    I have searched hi and low about i.e 7 problems but can't find the answer.

    Code:
    <html>
    <head>
    <title></title>
    <style type="text/css">
    #mainmenu{
     width: auto;
     height: 30px;
    }
    #mainmenu{
     margin: 0px;
     padding: 0px;
     z-index: 1;
    }
    #mainmenu li{
     float:left;
     position:relative;
     width: 140px;
     border: 0px solid #fff;
     list-style: none;
     background: #336699;
     font-family: verdana;
     font-weight: bold;
     font-size: 14px;
     padding: 3px 10px 3px 10px;
    }
    #mainmenu li a{
     background: #336699;
     text-decoration: none;
     color: #000;
    }
    #mainmenu li a:hover{
     color: #ff0000;
    }
    #mainmenu li ul{
     display:none;
     position:absolute;
     margin: 0px;
     width: 140px;
     padding: 0px;
     list-style: none;
     top: 20px;
     left: 0;
     z-index: 2;
    }
    #mainmenu li:hover ul {
     display: block;
     width: 140px;
    }
    #mainmenu .drop {
    background: #fff;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px dashed #000;
    }
    #mainmenu .drop a{
    background: #fff;
    }
    #mainmenu .dropb {
    background: #fff;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    }
    #mainmenu .dropb a{
    background: #fff;
    }
    #mainmenu .dropt {
    background: #fff;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px dashed #000;
    }
    #mainmenu .dropt a{
    background: #fff;
    }
    
    
    </style>
    </head>
    
    <body>
    <div id="mainmenu">
    	<li>
    		<a href="#">MENU 1</a>
    		<ul>
    			<li class="dropt"><a href="#">DROP DOWN 1</a></li>
    			<li class="drop"><a href="#">DROP DOWN 2</a></li>
    			<li class="dropb"><a href="#">DROP DOWN 3</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">MENU 2</a>
    		<ul>
    			<li><a href="#">DROP DOWN 1</a></li>
    			<li><a href="#">DROP DOWN 2</a></li>
    			<li><a href="#">DROP DOWN 3</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">MENU 3</a>
    		<ul>
    			<li><a href="#">DROP DOWN 1</a></li>
    			<li><a href="#">DROP DOWN 2</a></li>
    			<li><a href="#">DROP DOWN 3</a></li>
    		</ul>
    	</li>
    </div>
    
    </body>
    </html>
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    You need to add a doctype to your code. Then validate it. That is the problem wit a lot of browser issues, especially IE. Add a 4.01 Strict doctype, or XHTML if you choose to do so.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2008
    Posts
    42
    Rep Power
    11

    wow thanks


    wow thats scary works great now i have just wasted a day because of this all my pages usually have doc type on them but this was just a test didn;t realise it had become compulsory was working fine in all other browers just i.e 7.

    anyway thanks for that i shall never miss a doctype again what a waste of a day thanks
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2008
    Posts
    42
    Rep Power
    11

    new problem


    mm got that working ok but now i have new problem i have added a flyout menu and now that works fine in I.E 7 but not in firefox??

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    
    #mainmenu{
     width: auto;
     height: 30px;
    }
    #mainmenu{
     margin: 0px;
     padding: 0px;
    }
    
    #mainmenu li{
     float:left;
     position:relative;
     width: 140px;
     border: 1px solid #000;
     list-style: none;
     background: #336699;
     font-family: verdana;
     font-size: 14px;
     font-weight: bold;
     text-align: center;
     padding: 3px 10px 3px 10px;
    }
    #mainmenu li a{
     background: #336699;
     text-decoration: none;
     color: #000;
    }
    #mainmenu li a:hover{
     color: #ff0000;
    }
    .nav1{
    width: 140px;
    margin: 0px;
    padding: 0px;
    }
    #mainmenu li ul.nav1{
     display:none;
     position:absolute;
     list-style: none;
     top: 23px;
     left: 0;
    
    }
    #mainmenu li:hover ul.nav1{
     display: block;
     width: 140px;
    }
    
    #mainmenu li ul.nav1 li {
     background: #fff;
     text-decoration: none;
     font-size: 11px;
     font-weight: none;
    }
    #mainmenu li ul.nav1 li a{
     background: #fff;
     text-decoration: none;
     font-size: 11px;
     font-weight: none;
     color: #000;
    
    }
    #mainmenu li ul.nav1 li a:hover{
     color: #ff0000;
    }
    
    #mainmenu li ul.nav1 li ul.nav2 li{
     font-size: 8px;
     font-weight: none; 
     color: #fffab8;
    }
    #mainmenu li ul.nav1 li ul.nav2 li a{
     color: #000;
    }
    #mainmenu li ul.nav1 li ul.nav2 li a:hover{
     color: #ff0000;
    }
    
    
    #mainmenu ul.nav1 li ul.nav2{
     display:none;
     position:absolute;
     list-style: none;
     top: -1px;
     left: 120px;
    
    }
    #mainmenu ul.nav1 li:hover ul.nav2{
     display: block;
     width: 140px;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="mainmenu">
         
    	<li>
    		<a href="#">MENU 1</a>
    		<ul class="nav1">
    			<li><a href="#">DROP DOWN 1</a></li>
    
                <ul class="nav2">
    			<li><a href="#">FLY OUT 1</a>
    			<li><a href="#">FLY OUT 2</a>
                </ul>
    			<li><a href="#">DROP DOWN 2</a></li>
    			<li><a href="#">DROP DOWN 3</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">MENU 2</a>
    		<ul class="nav1">
    			<li><a href="#">DROP DOWN 1</a></li>
    			<li><a href="#">DROP DOWN 2</a></li>
    			<li><a href="#">DROP DOWN 3</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">MENU 3</a>
    		<ul class="nav1">
    			<li><a href="#">DROP DOWN 1</a></li>
    			<li><a href="#">DROP DOWN 2</a></li>
    			<li><a href="#">DROP DOWN 3</a></li>
    		</ul>
    	</li>
    </div>
    
    </body>
    </html>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2008
    Posts
    42
    Rep Power
    11

    mm almost solved


    solved it validates 100% so it works

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title></title>
    <style type="text/css">
    
    #mainmenu{
     width: auto;
     height: 30px;
    }
    #mainmenu{
     margin: 0px;
     padding: 0px;
    }
    
    #mainmenu li{
     float:left;
     position:relative;
     width: 140px;
     border: 1px solid #000;
     list-style: none;
     background: #336699;
     font-family: verdana;
     font-size: 14px;
     font-weight: bold;
     text-align: center;
     padding: 3px 10px 3px 10px;
    }
    #mainmenu li a{
     background: #336699;
     text-decoration: none;
     color: #000;
    }
    #mainmenu li a:hover{
     color: #ff0000;
    }
    .nav1{
    width: 140px;
    margin: 0px;
    padding: 0px;
    }
    #mainmenu li ul.nav1{
     display:none;
     position:absolute;
     list-style: none;
     top: 23px;
     left: 0;
    
    }
    #mainmenu li:hover ul.nav1{
     display: block;
     width: 140px;
    }
    
    #mainmenu li ul.nav1 li {
     background: #fff;
     text-decoration: none;
     font-size: 11px;
    }
    #mainmenu li ul.nav1 li a{
     background: #fff;
     text-decoration: none;
     font-size: 11px;
     color: #000;
    
    }
    #mainmenu li ul.nav1 li a:hover{
     color: #ff0000;
    }
    
    #mainmenu li ul.nav1 li ul.nav2 li{
     font-size: 8px;
     color: #fffab8;
    }
    #mainmenu li ul.nav1 li ul.nav2 li a{
     color: #000;
    }
    #mainmenu li ul.nav1 li ul.nav2 li a:hover{
     color: #ff0000;
    }
    
    
    #mainmenu ul.nav1 li ul.nav2{
     display:none;
     position:absolute;
     list-style: none;
     top: -1px;
     left: 120px;
    
    }
    #mainmenu ul.nav1 li:hover ul.nav2{
     display: block;
     width: 140px;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="mainmenu">
         
    <ul>	
          <li>
    		<a href="#">MENU 1</a>
    		<ul class="nav1">
    		<li><a href="#">DROP DOWN 1</a>
               <ul class="nav2">
    			<li><a href="#">FLY OUT 1</a></li>
    			<li><a href="#">FLY OUT 2</a></li>
                </ul>
    </li>
    			<li><a href="#">DROP DOWN 2</a></li>
    			<li><a href="#">DROP DOWN 3</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">MENU 2</a>
    		<ul class="nav1">
    			<li><a href="#">DROP DOWN 1</a></li>
    			<li><a href="#">DROP DOWN 2</a></li>
    			<li><a href="#">DROP DOWN 3</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="#">MENU 3</a>
    		<ul class="nav1">
    			<li><a href="#">DROP DOWN 1</a></li>
    			<li><a href="#">DROP DOWN 2</a></li>
    			<li><a href="#">DROP DOWN 3</a></li>
    		</ul>
    	</li>
    </ul>
    </div>
    
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo