Hi Friends,
I done a simple and small page with menu bar. I worked it out as a horizontal menu, but it is displaying like a vertical menu in firefox3.0.5. So, What is the problem here ? Is it problem with browser or CSS code.
Pleae help me, Thanks in Advance…
<!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>AP3 - Encryption Redefined</title>
<link href=“menu.css” rel=“stylesheet” type=“text/css” />
</head>
<body>
<div id=“menu”>
<div class=“fleft”>
<div id=“mb_home”>img/s.gif</div><div id=“mb_about”>img/s.gif</div><div id=“mb_comparison”>img/s.gif</div><div id=“mb_newsroom”>img/s.gif</div><div id=“mb_threat”>img/s.gif</div>
</div>
<div class=“flright”><div id=“mb_support”>img/s.gif</div><div id=“mb_account”>img/s.gif</div><div id=“mb_download”>img/s.gif</div><div id=“mb_buynow”>img/s.gif</div>
</div>
</div>
<div id=“submenu_off”>img/menu/off_left.gifimg/menu/off_right.gif</div>
<div id=“wheream”>AP3Secure.com > About</div>
</body>
</html>
/*menu.css ....................Jsut Sample code for first two buttons*/
#mb_home a {
display:block;
width:79px;
text-decoration: none;
background-image: url(img/menu/homee_.png);
background-repeat: no-repeat;
background-position: 0 0;
height: 33px;
margin: 0px;
padding: 0px;
float: left;
display: block;
}
#mb_home a:hover.arrow {
background-position: 0px -33px;
display: block;
}
#mb_home a:active.arrow {
background-position: 0px -66px;
display: block;
}
#mb_about a {
display:block;
width:79px;
text-decoration: none;
background-image: url(img/menu/about_.png);
background-repeat: no-repeat;
background-position: 0 0;
height: 33px;
margin: 0px;
padding: 0px;
float: left;
display: block;
}
#mb_about a:hover {
background-position: 0px -33px;
}
#mb_about a:active {
background-position: 0px -66px;
}
Please help me here if you know, Thanks in advance
Thanks & Regards
Venu.K