Advanced Search

Results 1 to 2 of 2

Thread: CSS Horizontal Menu Code works in IE but not in Firefox

  1. #1
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Horizontal Menu Code works in IE but not in Firefox

    here is the css code.. Menus appear next to each other in IE
    but fall one below another in Firefox

    Code:
    a.exc:link {color:black; text-decoration:none; font-size:small;font-family:arial;}
    
    a.exc:hover {color:red; text-decoration:none; font-size:small;font-family:arial;}
    
    
    body{
    padding:0;
    margin:0;
    }
    
    #main{
    width:934px;
    margin:0 auto;
    }
    
    
    #menuh-container
    {
        Z-INDEX: 0;
        POSITION: relative;
        float:left;
        TOP: 0px;
        LEFT: 65px
    }
    #menuh
    {
    
        BORDER-BOTTOM: lime;
        BORDER-LEFT: lime;
        MARGIN: 0em 2em 2em;
        WIDTH: 100%;
        FONT-FAMILY: arial, helvetica, sans-serif;
        FLOAT: left;
        FONT-SIZE: small;
        BORDER-TOP: white;
        BORDER-RIGHT: lime
    }
    #menuh A
    {
    
        BORDER-BOTTOM: white 0px solid;
        TEXT-ALIGN: center;
        BORDER-LEFT: #555 1px solid;
        PADDING-BOTTOM: 0.6em;
        MARGIN: 0px;
        PADDING-LEFT: 0.3em;
        PADDING-RIGHT: 0.3em;
        DISPLAY: block;
        WHITE-SPACE: nowrap;
        BORDER-TOP: #555 1px solid;
        BORDER-RIGHT: #555 1px solid;
        PADDING-TOP: 0.6em
    }
    #menuh A:link
    {
    
        BORDER-BOTTOM: white 0px solid;
        BORDER-LEFT: navyblue 0px solid;
        BACKGROUND-COLOR: #fffff0;
        COLOR: navyblue;
        BORDER-TOP: white 1px solid;
        BORDER-RIGHT: navyblue 1px solid;
        TEXT-DECORATION: none
    }
    #menuh A.top_child:link
    {
    
        BORDER-BOTTOM: white 0px solid;
        BORDER-LEFT: navyblue 0px solid;
        BACKGROUND-COLOR: #fffff0;
        COLOR: navyblue;
        BORDER-TOP: gray 1px solid;
        BORDER-RIGHT: navyblue 1px solid;
        TEXT-DECORATION: none
    }
    
    #menuh A.bottom_child:link
    {
        BORDER-BOTTOM: gray 1px solid;
        BORDER-LEFT: navyblue 0px solid;
        BACKGROUND-COLOR: #fffff0;
        COLOR: navyblue;
        BORDER-TOP: white 1px solid;
        BORDER-RIGHT: navyblue 1px solid;
        TEXT-DECORATION: none
    }
    
    #menuh A:visited
    {
        BORDER-BOTTOM: gray thin solid;
        BORDER-LEFT: gray thin solid;
        BACKGROUND-COLOR: #7ba5b5;
        COLOR: purple;
        BORDER-TOP: gray thin solid;
        BORDER-RIGHT: gray thin solid;
        TEXT-DECORATION: none
    }
    #menuh A:active
    {
        BORDER-BOTTOM: silver 4px solid;
        BORDER-LEFT: silver 4px solid;
        BACKGROUND-COLOR: #7ba5b5;
        COLOR: white;
        BORDER-TOP: silver 4px solid;
        BORDER-RIGHT: silver 4px solid;
        TEXT-DECORATION: none
    }
    #menuh A:hover
    {
        BORDER-BOTTOM: silver thin solid;
        BORDER-LEFT: silver thin solid;
        COLOR: red;
        BORDER-TOP: silver thin solid;
        BORDER-RIGHT: silver thin solid;
        TEXT-DECORATION: none
    }
    #menuh A.top_parent
    {
    
        BACKGROUND-IMAGE: url(images/services.gif);
        BACKGROUND-REPEAT: no-repeat;
        background-color:lightgray;
        color:black;
        BORDER-BOTTOM: silver thin solid;   
        font-weight:bold; 
        BACKGROUND-POSITION: right center
    }
    #menuh A.top_parent:hover
    {
        BACKGROUND-IMAGE: url(navdown_white.gif);
        BACKGROUND-REPEAT: no-repeat;
        background-color: #D90020;
        color:white;
        BACKGROUND-POSITION: right center
    }
    
    #menuh A.top_parent:active
    {
        BACKGROUND-REPEAT: no-repeat;
        background-color: #D90020;
        color:white;
        BACKGROUND-POSITION: right center
    }
    
    #menuh A.parent
    {
        BACKGROUND-IMAGE: url(nav_white.gif);
        BACKGROUND-REPEAT: no-repeat;
        BACKGROUND-POSITION: right center
    }
    #menuh A.parent:hover
    {
        BACKGROUND-IMAGE: url(nav_white.gif);
        BACKGROUND-REPEAT: no-repeat;
        BACKGROUND-POSITION: right center
    }
    #menuh UL
    {
        PADDING-BOTTOM: 0px;
        LIST-STYLE-TYPE: none;
        MARGIN: 0px;
        PADDING-LEFT: 0px;
        WIDTH: 9em;
        PADDING-RIGHT: 0px;
        FLOAT: left;
        PADDING-TOP: 0px
    }
    #menuh LI
    {
        POSITION: relative;
        MIN-HEIGHT: 1px;
        VERTICAL-ALIGN: bottom
    }
    #menuh UL UL
    {
        Z-INDEX: 500;
        POSITION: absolute;
        PADDING-BOTTOM: 1em;
        MARGIN: -1em 0px 0px -1em;
        PADDING-LEFT: 1em;
        PADDING-RIGHT: 1em;
        DISPLAY: none;
        TOP: auto;
        PADDING-TOP: 1em
    }
    #menuh UL UL UL
    {
        TOP: 0px;
        LEFT: 100%
    }
    DIV#menuh LI:hover
    {
        Z-INDEX: 100;
        CURSOR: pointer
    }
    DIV#menuh LI:hover UL UL
    {
        DISPLAY: none
    }
    DIV#menuh LI LI:hover UL UL
    {
        DISPLAY: none
    }
    DIV#menuh LI LI LI:hover UL UL
    {
        DISPLAY: none
    }
    DIV#menuh LI LI LI LI:hover UL UL
    {
        DISPLAY: none
    }
    DIV#menuh LI:hover UL
    {
        DISPLAY: block
    }
    DIV#menuh LI LI:hover UL
    {
        DISPLAY: block
    }
    DIV#menuh LI LI LI:hover UL
    {
        DISPLAY: block
    }
    DIV#menuh LI LI LI LI:hover UL
    {
        DISPLAY: block
    }
    
    here is index.html
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <head>
    <LINK href="menuh.css" rel="stylesheet" type="text/css">    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    
    <meta name="abstract" content="AnandSoft.com website design, software 
    
    development, SEO promotion, S/W development, and Certification practice tests.">
    
    <meta name="description" content="Offers website design, hosting, SEO promotion, 
    
    software development, and certification practice tests.">
    
    <meta name="Keywords" content="software development, website design, web hosting, 
    
    SEO promotion, search engine optimization, website design, software development, 
    
    seo india, certification practice tests, anandsoft.com">
    
    <meta name="revisit-after" content="1 days">
    
    <TITLE>AnandSoft.com website design, Software development, and Certification 
    
    practice tests.</TITLE>
    
      <meta name="robots" content="index, follow" />
    
      <link href="/index.php?format=feed&amp;type=rss" rel="alternate" 
    
    type="application/rss+xml" title="RSS 2.0" />
      <link href="/index.php?format=feed&amp;type=atom" rel="alternate" 
    
    type="application/atom+xml" title="Atom 1.0" />
                      
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    #menuh{float:none;}
    body{behavior:url(csshover.htc); font-size:100%;}
    #menuh ul li{float:left; width: 100%;}
    #menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
    
    </style>
    <![endif]-->
    
    </head>
    
    <body id="bd" bgcolor="white" leftMargin=0 topMargin=0 bottomMargin=0
    marginwidth=0 marginheight=0> 
    <div id="main"> 
    <TABLE cellSpacing=0 cellPadding=0 width="100%" align=left border=1 
    
    bordercolor="#FFFFFF" height="604">
    
    <tr bgColor=white>
          <td height=35 colspan=2 valign=top>
             <img border="0" src="images/anandsoft.gif" width="150" height="35">
             <img src=images/logo.gif>
          </td>
          <td align=right><a class="exc" href="#">Log-in</a> &nbsp;&nbsp; <a href="#" 
    
    class=exc>Contact Us</a>
    
    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type=text  style="height:10px"><img ALIGN=TEXTTOP border=1 height=13 
    
    src="images/gosearch.gif">
    
    </td>  
    </tr>
    <tr><TD bgColor=#ff0000 colSpan=3 height=1><img border="0" 
    
    src="images/header-images/red-bar.gif" height="1"></TD></TR>
    
      <TR align=left valign="top">
        <TD width=934 bgColor=white  height=0 align=left valign="top" colspan=3>
    <div id="menuh-container" align=left>
    <div id="menuh">
    	
    		<ul>
    		    <li><a href="#" class="top_parent">Services &nbsp;&nbsp;
    <img border=0 height=12px src ="images/arrow.gif"></a>
                        	<ul>
    
    			<li><a href="#" class="parent">Website Services</a>
    				<ul>
    		         	<li><a href="#" class=bottom_child>Web 
    
    hosting</a></li>
    				</ul>
    			</li>
    		
                		
    
    			<li><a href="#" class="parent">Networking</a>
    				<ul>
    				<li><a href="#" class=bottom_child>Articles</a>
                                           <ul>
    					<li><a href="#" class=top_child>Planning 
    
    & Design</a></li>
    					<li><a href="#" class=bottom_child>IP 
    
    Telephony</a></li>
    					</ul>
                                    </li>
    				</ul>
    				</li>		
    
    
    			<li><a href="#" class="parent">Software Services</a>
    				<ul>
    				<li><a href="#" class=top_child>Desktop 
    
    Application<br> Development</a></li>
    				<li><a href="#">Web 
    
    Application<br>development</a></li>
    				<li><a href="#" class=bottom_child>Software 
    
    <br>re-engineering</a>
                                    </li>
    				</ul>
    				</li>		
    
    <li><a href="#" class="parent">Certification Training</a>
    				<ul>
    				<li><a href="#" class=top_child>Cisco 
    
    Certification<br> Development</a></li>
    				<li><a href="#" class=bottom_child>Others</a>
                                    </li>
    				</ul>
    				</li>	
    
    <li><a href="#" class="bottom_child">Exam Hosting</a></li>
    
                    	   </li> 
    			</ul>
    		
    	<ul>
    		<li><a href="#" class="top_parent">Products  &nbsp;&nbsp;
    <img border=0 height=12px src ="images/arrow.gif"></a>
                    	<ul>
    			
    			<li><a href="#" class="parent">Network simulators</a>
    			</li>
    			<li><a href="#" class=bottom_child>Certification exam 
    
    <br>simulators</a>
    			    <ul>
    				<li><a href="#" class=bottom_child>Others</a>
                                          	<ul>
    				<li><a href="#" class=top_child>CheckPoint 
    
    Cert.<br></a></li>
    	
    	
    				</ul>
    	                </ul>  
                            </li>  </li>
    	</ul>
    	<ul>
    		<li><a href="#" class="top_parent">About Us  &nbsp;&nbsp;
    <img border=0 height=12px src ="images/arrow.gif"></a>
    			<ul>
    				<li><a href="#" class=bottom_child>Location map 
    
    -<br>Google</a></li>
    			</ul>
    		</li>	                     
    	</ul>
    	<ul>
    		<li><a href="#" class="top_parent">Careers</a>
    		</li>
    	</ul>
    	<ul>	
    		<li><a href="#" class="top_parent">News </a>
    		</li>
    	                     
    	</ul>
           	<ul>
    		<li><a href="#" class="top_parent">Press release</a>
    		</li>	                     
    	</ul>
    
    	
    </div> 	<!-- end the menuh-container div -->  
    </div>	<!-- end the menuh div --> 
    
    </td>
    
    </tr>
    </table>
    
    </div>
    
    </body> 
    </html>
    Last edited by Snookerman; 11-23-2009 at 12:07 PM.

  2. #2
    Join Date
    Oct 2008
    Location
    kolkata, india
    Posts
    75
    Thanks
    2
    Thanked 10 Times in 10 Posts

    Default

    Code:
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    a.exc:link {color:black; text-decoration:none; font-size:small;font-family:arial;}
    
    a.exc:hover {color:red; text-decoration:none; font-size:small;font-family:arial;}
    
    
    body{
    padding:0;
    margin:0;
    }
    
    #main{
    width:934px;
    margin:0 auto;
    }
    
    
    #menuh-container
    {
        Z-INDEX: 0;
        POSITION: relative;
        float:left;
        TOP: 0px;
        LEFT: 65px
    }
    #menuh
    {
    
        BORDER-BOTTOM: lime;
        BORDER-LEFT: lime;
        MARGIN: 0em 2em 2em;
        WIDTH: 100%;
        FONT-FAMILY: arial, helvetica, sans-serif;
        FLOAT: left;
        FONT-SIZE: small;
        BORDER-TOP: white;
        BORDER-RIGHT: lime
    }
    #menuh A
    {
    
        BORDER-BOTTOM: white 0px solid;
        TEXT-ALIGN: center;
        BORDER-LEFT: #555 1px solid;
        PADDING-BOTTOM: 0.6em;
        MARGIN: 0px;
        PADDING-LEFT: 0.3em;
        PADDING-RIGHT: 0.3em;
        DISPLAY: block;
        WHITE-SPACE: nowrap;
        BORDER-TOP: #555 1px solid;
        BORDER-RIGHT: #555 1px solid;
        PADDING-TOP: 0.6em
    }
    #menuh A:link
    {
    
        BORDER-BOTTOM: white 0px solid;
        BORDER-LEFT: navyblue 0px solid;
        BACKGROUND-COLOR: #fffff0;
        COLOR: navyblue;
        BORDER-TOP: white 1px solid;
        BORDER-RIGHT: navyblue 1px solid;
        TEXT-DECORATION: none
    }
    #menuh A.top_child:link
    {
    
        BORDER-BOTTOM: white 0px solid;
        BORDER-LEFT: navyblue 0px solid;
        BACKGROUND-COLOR: #fffff0;
        COLOR: navyblue;
        BORDER-TOP: gray 1px solid;
        BORDER-RIGHT: navyblue 1px solid;
        TEXT-DECORATION: none
    }
    
    #menuh A.bottom_child:link
    {
        BORDER-BOTTOM: gray 1px solid;
        BORDER-LEFT: navyblue 0px solid;
        BACKGROUND-COLOR: #fffff0;
        COLOR: navyblue;
        BORDER-TOP: white 1px solid;
        BORDER-RIGHT: navyblue 1px solid;
        TEXT-DECORATION: none
    }
    
    #menuh A:visited
    {
        BORDER-BOTTOM: gray thin solid;
        BORDER-LEFT: gray thin solid;
        BACKGROUND-COLOR: #7ba5b5;
        COLOR: purple;
        BORDER-TOP: gray thin solid;
        BORDER-RIGHT: gray thin solid;
        TEXT-DECORATION: none
    }
    #menuh A:active
    {
        BORDER-BOTTOM: silver 4px solid;
        BORDER-LEFT: silver 4px solid;
        BACKGROUND-COLOR: #7ba5b5;
        COLOR: white;
        BORDER-TOP: silver 4px solid;
        BORDER-RIGHT: silver 4px solid;
        TEXT-DECORATION: none
    }
    #menuh A:hover
    {
        BORDER-BOTTOM: silver thin solid;
        BORDER-LEFT: silver thin solid;
        COLOR: red;
        BORDER-TOP: silver thin solid;
        BORDER-RIGHT: silver thin solid;
        TEXT-DECORATION: none
    }
    #menuh A.top_parent
    {
    
        BACKGROUND-IMAGE: url(images/services.gif);
        BACKGROUND-REPEAT: no-repeat;
        background-color:lightgray;
        color:black;
        BORDER-BOTTOM: silver thin solid;   
        font-weight:bold; 
        BACKGROUND-POSITION: right center
    }
    #menuh A.top_parent:hover
    {
        BACKGROUND-IMAGE: url(navdown_white.gif);
        BACKGROUND-REPEAT: no-repeat;
        background-color: #D90020;
        color:white;
        BACKGROUND-POSITION: right center
    }
    
    #menuh A.top_parent:active
    {
        BACKGROUND-REPEAT: no-repeat;
        background-color: #D90020;
        color:white;
        BACKGROUND-POSITION: right center
    }
    
    #menuh A.parent
    {
        BACKGROUND-IMAGE: url(nav_white.gif);
        BACKGROUND-REPEAT: no-repeat;
        BACKGROUND-POSITION: right center
    }
    #menuh A.parent:hover
    {
        BACKGROUND-IMAGE: url(nav_white.gif);
        BACKGROUND-REPEAT: no-repeat;
        BACKGROUND-POSITION: right center
    }
    #menuh UL
    {
        PADDING-BOTTOM: 0px;
        LIST-STYLE-TYPE: none;
        MARGIN: 0px;
        PADDING-LEFT: 0px;
        WIDTH: 9em;
        PADDING-RIGHT: 0px;
        FLOAT: left;
        PADDING-TOP: 0px
    }
    #menuh LI
    {
        POSITION: relative;
        MIN-HEIGHT: 1px;
        VERTICAL-ALIGN: bottom
    }
    #menuh UL UL
    {
        Z-INDEX: 500;
        POSITION: absolute;
        PADDING-BOTTOM: 1em;
        MARGIN: -1em 0px 0px -1em;
        PADDING-LEFT: 1em;
        PADDING-RIGHT: 1em;
        DISPLAY: none;
        TOP: auto;
        PADDING-TOP: 1em
    }
    #menuh UL UL UL
    {
        TOP: 0px;
        LEFT: 100%
    }
    DIV#menuh LI:hover
    {
        Z-INDEX: 100;
        CURSOR: pointer
    }
    DIV#menuh LI:hover UL UL
    {
        DISPLAY: none
    }
    DIV#menuh LI LI:hover UL UL
    {
        DISPLAY: none
    }
    DIV#menuh LI LI LI:hover UL UL
    {
        DISPLAY: none
    }
    DIV#menuh LI LI LI LI:hover UL UL
    {
        DISPLAY: none
    }
    DIV#menuh LI:hover UL
    {
        DISPLAY: block
    }
    DIV#menuh LI LI:hover UL
    {
        DISPLAY: block
    }
    DIV#menuh LI LI LI:hover UL
    {
        DISPLAY: block
    }
    DIV#menuh LI LI LI LI:hover UL
    {
        DISPLAY: block
    }
    
    here is index.html
    </style>
    
                      
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    #menuh{float:none;}
    body{behavior:url(csshover.htc); font-size:100%;}
    #menuh ul li{float:left; width: 100%;}
    #menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
    
    </style>
    <![endif]-->
    
    </head>
    
    <body id="bd" bgcolor="white" leftMargin=0 topMargin=0 bottomMargin=0
    marginwidth=0 marginheight=0>
    <div id="main">
      <TABLE cellSpacing=0 cellPadding=0 width="100%" align=left border=1 
    
    bordercolor="#FFFFFF" height="604">
        <tr bgColor=white>
          <td height=35 colspan=2 valign=top><img border="0" src="images/anandsoft.gif" width="150" height="35"> <img src=images/logo.gif> </td>
          <td align=right><a class="exc" href="#">Log-in</a> &nbsp;&nbsp; <a href="#" 
    
    class=exc>Contact Us</a> <br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type=text  style="height:10px">
            <img ALIGN=TEXTTOP border=1 height=13 
    
    src="images/gosearch.gif"> </td>
        </tr>
        <tr>
          <TD bgColor=#ff0000 colSpan=3 height=1><img border="0" 
    
    src="images/header-images/red-bar.gif" height="1"></TD>
        </TR>
        <TR align=left valign="top">
          <TD width=934 bgColor=white  height=0 align=left valign="top" colspan=3>
    	  	<div id="menuh-container" align=left>
            	<div id="menuh">
            <ul>
              <li><a href="#" class="top_parent">Services &nbsp;&nbsp; <img border=0 height=12px src ="images/arrow.gif"></a></li>
              <li><a href="#" class="parent">Website Services</a>
                <ul>
                  <li><a href="#" class=bottom_child>Web 
                    
                    hosting</a></li>
                </ul>
              </li>
              <li><a href="#" class="parent">Networking</a>
                <ul>
                  <li><a href="#" class=bottom_child>Articles</a>
                    <ul>
                      <li><a href="#" class=top_child>Planning 
                        
                        & Design</a></li>
                      <li><a href="#" class=bottom_child>IP 
                        
                        Telephony</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a href="#" class="parent">Software Services</a>
                <ul>
                  <li><a href="#" class=top_child>Desktop 
                    
                    Application<br>
                    Development</a></li>
                  <li><a href="#">Web 
                    
                    Application<br>
                    development</a></li>
                  <li><a href="#" class=bottom_child>Software <br>
                    re-engineering</a> </li>
                </ul>
              </li>
              <li><a href="#" class="parent">Certification Training</a>
                <ul>
                  <li><a href="#" class=top_child>Cisco 
                    
                    Certification<br>
                    Development</a></li>
                  <li><a href="#" class=bottom_child>Others</a> </li>
                </ul>
              </li>
              <li><a href="#" class="bottom_child">Exam Hosting</a></li>
              </li>
            </ul>
            <ul>
            <li>
            <a href="#" class="top_parent">Products  &nbsp;&nbsp; <img border=0 height=12px src ="images/arrow.gif"></a>
            <ul>
              <li><a href="#" class="parent">Network simulators</a> </li>
              <li><a href="#" class=bottom_child>Certification exam <br>
                simulators</a></li>
    			</ul>
                <ul>
                  <li><a href="#" class=bottom_child>Others</a>
                    <ul>
                      <li><a href="#" class=top_child>CheckPoint 
                        
                        Cert.<br>
                        </a></li>
                    </ul>
                </ul>
              </li>
              </li>
            </ul>
            <ul>
              <li><a href="#" class="top_parent">About Us  &nbsp;&nbsp; <img border=0 height=12px src ="images/arrow.gif"></a>
                <ul>
                  <li><a href="#" class=bottom_child>Location map 
                    
                    -<br>
                    Google</a></li>
                </ul>
              </li>
            </ul>
            <ul>
              <li><a href="#" class="top_parent">Careers</a> </li>
            </ul>
            <ul>
              <li><a href="#" class="top_parent">News </a> </li>
            </ul>
            <ul>
              <li><a href="#" class="top_parent">Press release</a> </li>
            </ul>
            </div>
            <!-- end the menuh-container div -->
            </div>
            <!-- end the menuh div -->
          </td>
        </tr>
      </table>
    </div>
    </body> 
    </html>
    I have changed a little bit in your code and it is working fine in firefox, IE 6, and IE 7. please check.

    Thanks
    Monica

Bookmarks

Posting Permissions

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