943,148 Members | Top Members by Rank

Web Development > ASP.NET > Horizontal Menu in Master page displaying causing all sorts of problems.
Ad:
  • ASP.NET Discussion Thread
  • Unsolved
  • Views: 1432
  • ASP.NET RSS
Permalink
Mar 4th, 2010
0

Horizontal Menu in Master page displaying causing all sorts of problems.

Expand Post »
I am using Visual Studio Web Developer 2008, CSS 2.1

Browser Firefox 3.5.8, IE 6.0.2900

I created a master page following tutorials elsewhere and the problem mainly comes with the Menu bar, I created a custom menu bar to suit my needs, rather than using the inbuilt menu, but i am guessing because of the menu the webpage components are out of place in
1)Firefox: there is a Nav div on the left hand side of the page

Logo Title
Dotted Line
Menu
Dotted Line
Nav Main Content page
(25%) (margin-left:30%
footer

This is how i am trying to arrange the page but in firefox the Nav falls to the right, CSS setting justify:left dosent help.

2)In Internet Explorer
The menu appears vertical rather than horizontal

Please find the code to my Master Page below, however note that i am NOT trying to use the asp:menu item for a menu, and using a customized menu. Because of which my master page is all over the browser.

I would really appreciate if anyone can provide any sort of suggestions.

Please find Master Page below.
ASP.NET Syntax (Toggle Plain Text)
  1. ><%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %&gt;
  2. &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  3.  
  4. &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  5. &lt;head id="Head1" runat="server"&gt;
  6.     &lt;title&gt;Untitled Page&lt;/title&gt;
  7.     &lt;link href="StyleSheet.css" type="text/css" rel="Stylesheet" /&gt;
  8.     &lt;script language="javascript" src="menu.js" type="text/javascript" &gt;&lt;/script&gt;
  9. &lt;/head&gt;
  10. &lt;body&gt;
  11. &lt;div id="outer"&gt;
  12. 	&lt;div id="header"&gt;
  13. 		&lt;div id="lhead"&gt;
  14. 		    &lt;img alt="logo1" src="Images/team1.jpg" style="height: 45px; width: 44px"/&gt;
  15. 		    &lt;a href="Default.aspx" style="color:Black; text-decoration:none" &gt;&lt;i&gt;&lt;b&gt;TEAM&lt;/b&gt;&lt;/i&gt;&lt;/a&gt;
  16. 		&lt;/div&gt;
  17. 		&lt;div id="rhead"&gt;
  18. 		    &lt;img alt="logo2" src="Images/team6.jpg" style="height: 46px; width: 50px" /&gt;
  19. 		    &lt;img alt="logo3" src="Images/team3.jpg" /&gt;
  20.             &lt;img alt="logo4" src="Images/team5.jpg" style="height: 44px; width: 54px" /&gt;
  21.             &lt;img alt="logo5" src="Images/team4.jpg" style="height: 43px; width: 56px" /&gt;            
  22. 		&lt;/div&gt;
  23. 		&lt;b id="team definition" style="color:Black; text-decoration:none; font-size:x-small; 
  24. 		font-weight:lighter; display:block; text-align:left;"&gt;REDEFINING EXCELLENCE&lt;/b&gt;
  25. 		    &lt;ul id="menu1"&gt;
  26. 		        &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt;
  27. 		        &lt;li&gt;&lt;a href="#"
  28. 		            onmouseover="mopen('m1')"
  29. 		            onmouseout="mclosetime()"&gt;products &amp; services&lt;/a&gt;
  30. 		            &lt;div id="m1"
  31. 		                onmouseover="mcancelclosetime()"
  32. 		                onmouseout="mclosetime()"&gt;
  33. 		                &lt;a href="#"&gt;engineering services&lt;/a&gt;
  34. 		                &lt;a href="#"&gt;engineering products&lt;/a&gt;
  35. 		                &lt;a href="#"&gt;it services&lt;/a&gt;
  36. 		            &lt;/div&gt;
  37. 		        &lt;/li&gt;
  38. 		        &lt;li&gt;
  39. 		            &lt;a href="#"
  40. 		                onmouseover="mopen('m2')"
  41. 		                onmouseout="mclosetime()"&gt;about us&lt;/a&gt;
  42. 		            &lt;div id="m2"
  43. 		                onmouseover="mcancelclosetime()"
  44. 		                onmouseout="mclosetime()"&gt;
  45. 		                &lt;a href="#"&gt;company history&lt;/a&gt;
  46. 		                &lt;a href="#"&gt;achievements &amp; awards&lt;/a&gt;
  47. 		                &lt;a href="#"&gt;company policies&lt;/a&gt;
  48. 		                &lt;a href="#"&gt;future growth &amp; vision&lt;/a&gt;
  49. 		            &lt;/div&gt;
  50. 		        &lt;/li&gt;
  51. 		        &lt;li&gt;
  52. 		            &lt;a href="#"
  53. 		                onmouseover="mopen('m3')"
  54. 		                onmouseout="mclosetime()"&gt;careers&lt;/a&gt;
  55. 		            &lt;div id="m3"
  56. 		                    onmouseover="mcancelclosetime()"
  57. 		                    onmouseout="mclosetime()"&gt;
  58. 		                    &lt;a href="#"&gt;career path&lt;/a&gt;
  59. 		                    &lt;a href="#"&gt;type of jobs&lt;/a&gt;
  60. 		                    &lt;a href="#"&gt;current openings&lt;/a&gt;
  61. 		            &lt;/div&gt;
  62. 		        &lt;/li&gt;
  63. 		        &lt;li&gt;
  64. 		            &lt;a href="#"
  65. 		                onmouseover="mopen('m4')"
  66. 		                onmouseout="mlosetime()"&gt;help &amp; support&lt;/a&gt;
  67. 		            &lt;div id='m4'
  68. 		                onmouseover="mcancelclosetime()"
  69. 		                onmouseout="mclosetime()"&gt;
  70. 		                &lt;a href="#"&gt;technical support&lt;/a&gt;
  71. 		                &lt;a href="#"&gt;feedback form&lt;/a&gt;
  72. 		             &lt;/div&gt;
  73. 		        &lt;/li&gt;
  74. 		        &lt;li&gt;
  75. 		            &lt;a href="#"&gt;contact us&lt;/a&gt;
  76. 		        &lt;/li&gt;
  77. 		        &lt;li&gt;    
  78. 		            &lt;a href="#"&gt;site map&lt;/a&gt;
  79. 		        &lt;/li&gt;		        
  80. 		    &lt;/ul&gt;
  81. 	&lt;/div&gt;
  82. &lt;div id="body1"&gt;
  83. 	&lt;div id="nav"&gt;
  84. 		&lt;h4&gt;Navigation&lt;/h4&gt;
  85. 		&lt;ul&gt;
  86. 			&lt;li&gt;Let me not to the marriage of true minds&lt;/li&gt;
  87. 			&lt;li&gt;Admit impediments; love is not love&lt;/li&gt;
  88. 			&lt;li&gt;Which alters when it alteration finds&lt;/li&gt;
  89. 		&lt;/ul&gt;
  90.  
  91. 	&lt;/div&gt;
  92. 	&lt;div id="main"&gt;
  93. 		&lt;p&gt;Main Content -- Love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come; admit impediments; love is not love. Which alters when it alteration finds, or bends with the remover to remove. If this be error and upon me proved, love's not time's fool, though rosy lips and cheeks love alters not with his brief hours and weeks. Whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; but bears it out even to the edge of doom.&lt;/p&gt;
  94. 		&lt;p&gt;Which alters when it alteration finds, within his bending sickle's compass come; it is the star to every wand'ring bark. Whose worth's unknown, although his height be taken. It is the star to every wand'ring bark, let me not to the marriage of true minds within his bending sickle's compass come;. Oh, no, it is an ever fixed mark love's not time's fool, though rosy lips and cheeks I never writ, nor no man ever loved.&lt;/p&gt;
  95. 		&lt;p&gt;That looks on tempests and is never shaken; or bends with the remover to remove. But bears it out even to the edge of doom. Within his bending sickle's compass come; love alters not with his brief hours and weeks, whose worth's unknown, although his height be taken. Let me not to the marriage of true minds.&lt;/p&gt;
  96. 	&lt;/div&gt;
  97.  
  98. &lt;div id="footer"&gt;
  99.  
  100. 		&lt;p&gt;Footer text -- Admit impediments; love is not love whose worth's unknown, although his height be taken. Which alters when it alteration finds, let me not to the marriage of true minds oh, no, it is an ever fixed mark. &lt;/p&gt;
  101. 	&lt;/div&gt;
  102. &lt;/div&gt;	
  103. &lt;/div&gt;
  104. &lt;/body&gt;
  105.  
  106. &lt;/html&gt;

Code for CSS file
ASP.NET Syntax (Toggle Plain Text)
  1. body {
  2. 	background-color: #999999;
  3. 	font-size:12px;
  4. 	font-family:Verdana, Arial, Helvetica, sans-serif;
  5. 	margin-right:auto;
  6. 	margin-left:auto;
  7. 	margin-top:auto;
  8. 	margin-bottom:auto;
  9. }
  10. div#outer {
  11. 	width: 80%;
  12. 	background-color:#FFFFFF;
  13. 	margin-top: 50px;
  14. 	margin-bottom: 50px;
  15. 	margin-left: auto;
  16. 	margin-right: auto;
  17. 	padding: 0px;
  18. 	border: thin solid #000000;
  19. }
  20.  
  21. div#header {
  22.  
  23.     padding: 10px;
  24.     height: 95px;
  25. }
  26.  
  27. div#lhead {
  28.  
  29. 	font-size:x-large;
  30. 	color:Black;
  31. 	width:26%;
  32. 	float:left;
  33. 	margin-bottom:0px;
  34.     height: 48px;
  35. }
  36.  
  37. div#rhead {
  38.     margin-left:30%;
  39.     margin-right:auto;
  40.     margin-top:auto;
  41.     margin-bottom:auto;
  42.     height:auto;
  43. }
  44.  
  45.  
  46.  
  47. #menu1 li
  48. {
  49.     list-style:none;
  50.     float: left;
  51.     padding:0px;
  52.  
  53. }
  54.  
  55. #menu1
  56. {
  57.     border-style: dotted none dotted none;
  58.     border-width: thin;
  59.     border-color: #000000;
  60.     text-decoration: none;
  61.     background-color: #FFFFFF;
  62.     margin-left: auto;
  63.     margin-right: auto;
  64. }
  65. #menu1 li a
  66. {
  67.     border-style: none;
  68.     border-width: thin;    
  69.     display: block;
  70.     padding: 0px 0px 5px 5px;
  71.     text-align: center;
  72.     text-decoration: none;
  73.     color: Black;
  74.     /*z-index:-1; to send the block behind the dotted line. 2nd obsderv doesnt work here.*/
  75. }
  76.  
  77. #menu1 div
  78. {
  79.     border-style: solid;
  80.     border-width: thin;
  81.     visibility: hidden;
  82. }
  83.  
  84. #menu1 div a
  85. {
  86.     display: block;
  87.     white-space:nowrap;
  88.     text-align:left;
  89.     padding:0 5 0 5px;
  90.     text-decoration:none;
  91.     color: #2875DE;
  92. }
  93.  
  94. #menu1 li a:hover
  95. {
  96.     background-color: white;
  97.     color: #3366FF;
  98. }
  99.  
  100. #menu1 div a:hover
  101. {
  102.     background: white;
  103.     text-decoration: underline;
  104. }
  105.  
  106. #body1
  107. {
  108.     margin-top: auto;
  109.     margin-bottom: auto;
  110.     margin-left: auto;
  111.     height: auto;
  112.     background-color: #FFFFFF;
  113. }
  114. div#nav
  115. {
  116.     width: 25%;
  117.     padding: 10px;
  118.     margin-top: 1px;
  119.     z-index: -1;
  120.     height: auto;
  121.     float:left;
  122. }   
  123. div#main {
  124. 	margin-left: 30%;
  125. 	margin-top: 1px;
  126. 	padding: 0px 0 0 0;
  127. }
  128. #footer
  129. {
  130.     display:block;
  131.     padding: 5px;
  132.     margin: auto;
  133. }

Code for JavaScript
ASP.NET Syntax (Toggle Plain Text)
  1. var timeout= 500;
  2. var closetimer	= 0;
  3. var ddmenuitem	= 0;
  4.  
  5. // open hidden layer
  6. function mopen(id)
  7. {	
  8. 	// cancel close timer
  9. 	mcancelclosetime();
  10.  
  11. 	// close old layer
  12. 	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
  13.  
  14. 	// get new layer and show it
  15. 	ddmenuitem = document.getElementById(id);
  16. 	ddmenuitem.style.visibility = 'visible';
  17.  
  18. }
  19. // close showed layer
  20. function mclose()
  21. {
  22. 	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
  23. }
  24.  
  25. // go close timer
  26. function mclosetime() /**the window property setTimeout is being passed(mclose(),500) guessing, so at the end of 500ms, the window hidden*/
  27. {
  28. 	closetimer = window.setTimeout(mclose, timeout);
  29. }
  30.  
  31. // cancel close timer
  32. function mcancelclosetime()
  33. {
  34. 	if(closetimer)
  35. 	{
  36. 		window.clearTimeout(closetimer);
  37. 		closetimer = null;
  38. 	}
  39. }
  40.  
  41. // close layer when click-out
  42. document.onclick = mclose;

Thanks
Similar Threads
Reputation Points: 10
Solved Threads: 1
Newbie Poster
c_rob is offline Offline
6 posts
since Feb 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in ASP.NET Forum Timeline: Multiple Dynamic Control Postback Issue
Next Thread in ASP.NET Forum Timeline: how can i connect VS to xampp.





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC