CSS Codes
CSS Layouts
Results 1 to 2 of 2

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

  1. 11-23-2009, 09:14 AM #1
    s_malavika
    s_malavika is offline New Comer (less than 5 posts)
    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 01:07 PM.
    Reply With Quote Reply With Quote
  2. 11-24-2009, 06:16 AM #2
    monicasaha
    monicasaha is offline Junior Coders
    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
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules