Help - Horizontal dropdown menu
-
hello everyone, i am writing a code for horizontal dropdown menubar the problem i'm facing is that the menu just works fine in firefox :) , but in Internet explorer the submenu is shifting to 30 pixels to the right when mouse is over the menu :( . I don't know that it is actually shifting or aligning to center ??? :confused: the background image i m using for menu buttons is 150x35 px in dimension. Here's my code for all the files:- home.html -------------------------------------------------------------------------------------------
<!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>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="scripts/menu_script.js"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head><body>
<div class="Menubar">
<ul>
<li class="nav_li"><a href="#" class="menu1" id="m1">Item 1</a></li>
<li class="nav_li"><a href="#" class="menu2" id="m2" onmouseover="showmenu('m2', 'sm2')" onmouseout="hidemenu('m2', 'sm2')">Item 2</a></li>
<ul class="submenu2" id="sm2" onmouseover="showmenu('m2', 'sm2')" onmouseout="hidemenu('m2', 'sm2')">
<li class="nav_li"><a href="#">Item 2.1</a></li>
<li class="nav_li"><a href="#">Item 2.2</a></li>
<li class="nav_li"><a href="#">Item 2.3</a></li>
</ul>
<li class="nav_li"><a href="#" class="menu3" id="m3">Item 3</a></li>
<li class="nav_li"><a href="#" class="menu4" id="m4" onmouseover="showmenu('m4', 'sm4')" onmouseout="hidemenu('m4', 'sm4')">Item 4</a></li>
<ul class="submenu4" id="sm4" onmouseover="showmenu('m4', 'sm4')" onmouseout="hidemenu('m4', 'sm4')">
<li class="nav_li"><a href="#">Item 4.1</a></li>
<li class="nav_li"><a href="#">Item 4.2</a></li>
<li class="nav_li"><a href="#">Item 4.3</a></li>
</ul>
</ul>
</div></body>
</html>------------------------------------------------------------
-
hello everyone, i am writing a code for horizontal dropdown menubar the problem i'm facing is that the menu just works fine in firefox :) , but in Internet explorer the submenu is shifting to 30 pixels to the right when mouse is over the menu :( . I don't know that it is actually shifting or aligning to center ??? :confused: the background image i m using for menu buttons is 150x35 px in dimension. Here's my code for all the files:- home.html -------------------------------------------------------------------------------------------
<!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>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="scripts/menu_script.js"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head><body>
<div class="Menubar">
<ul>
<li class="nav_li"><a href="#" class="menu1" id="m1">Item 1</a></li>
<li class="nav_li"><a href="#" class="menu2" id="m2" onmouseover="showmenu('m2', 'sm2')" onmouseout="hidemenu('m2', 'sm2')">Item 2</a></li>
<ul class="submenu2" id="sm2" onmouseover="showmenu('m2', 'sm2')" onmouseout="hidemenu('m2', 'sm2')">
<li class="nav_li"><a href="#">Item 2.1</a></li>
<li class="nav_li"><a href="#">Item 2.2</a></li>
<li class="nav_li"><a href="#">Item 2.3</a></li>
</ul>
<li class="nav_li"><a href="#" class="menu3" id="m3">Item 3</a></li>
<li class="nav_li"><a href="#" class="menu4" id="m4" onmouseover="showmenu('m4', 'sm4')" onmouseout="hidemenu('m4', 'sm4')">Item 4</a></li>
<ul class="submenu4" id="sm4" onmouseover="showmenu('m4', 'sm4')" onmouseout="hidemenu('m4', 'sm4')">
<li class="nav_li"><a href="#">Item 4.1</a></li>
<li class="nav_li"><a href="#">Item 4.2</a></li>
<li class="nav_li"><a href="#">Item 4.3</a></li>
</ul>
</ul>
</div></body>
</html>------------------------------------------------------------
I think you may need a CSS reset for IE6 to stop the "shifting" when opening the menu. Try
* {margin:0; padding:0;}
in your CSS
-
I think you may need a CSS reset for IE6 to stop the "shifting" when opening the menu. Try
* {margin:0; padding:0;}
in your CSS
Thanks, It works :thumbsup: But why the problem was there in IE; was it due to the reason the way IE handles CSS ?
Future Lies in Present. Manmohan Bishnoi
-
Thanks, It works :thumbsup: But why the problem was there in IE; was it due to the reason the way IE handles CSS ?
Future Lies in Present. Manmohan Bishnoi