s_malavika
11-23-2009, 09:14 AM
here is the css code.. Menus appear next to each other in IE
but fall one below another in Firefox
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&type=rss" rel="alternate"
type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&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> <a href="#"
class=exc>Contact Us</a>
<br>
<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
<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
<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
<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>
but fall one below another in Firefox
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&type=rss" rel="alternate"
type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&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> <a href="#"
class=exc>Contact Us</a>
<br>
<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
<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
<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
<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>