943,810 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > css drop down menu not working in i.e 7
Ad:
Permalink
Feb 5th, 2009
0

css drop down menu not working in i.e 7

Expand Post »
I have this menu which works fine in firefox etc but just will not work in I.E 7 can anyone tell me why?

HTML and CSS Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type="text/css">
  5. #mainmenu{
  6.  width: auto;
  7.  height: 30px;
  8. }
  9. #mainmenu{
  10.  margin: 0px;
  11.  padding: 0px;
  12.  z-index: 1;
  13. }
  14. #mainmenu li{
  15.  float:left;
  16.  position:relative;
  17.  width: 140px;
  18.  border: 0px solid #fff;
  19.  list-style: none;
  20.  background: #336699;
  21.  font-family: verdana;
  22.  font-weight: bold;
  23.  font-size: 14px;
  24.  padding: 3px 10px 3px 10px;
  25. }
  26. #mainmenu li a{
  27.  background: #336699;
  28.  text-decoration: none;
  29.  color: #000;
  30. }
  31. #mainmenu li a:hover{
  32.  color: #ff0000;
  33. }
  34. #mainmenu li ul{
  35.  display:none;
  36.  position:absolute;
  37.  margin: 0px;
  38.  width: 140px;
  39.  padding: 0px;
  40.  list-style: none;
  41.  top: 20px;
  42.  left: 0;
  43.  z-index: 2;
  44. }
  45. #mainmenu li:hover ul {
  46.  display: block;
  47.  width: 140px;
  48. }
  49. #mainmenu .drop {
  50. background: #fff;
  51. border-left: 1px solid #000;
  52. border-right: 1px solid #000;
  53. border-bottom: 1px dashed #000;
  54. }
  55. #mainmenu .drop a{
  56. background: #fff;
  57. }
  58. #mainmenu .dropb {
  59. background: #fff;
  60. border-left: 1px solid #000;
  61. border-right: 1px solid #000;
  62. border-bottom: 1px solid #000;
  63. }
  64. #mainmenu .dropb a{
  65. background: #fff;
  66. }
  67. #mainmenu .dropt {
  68. background: #fff;
  69. border-top: 1px solid #000;
  70. border-left: 1px solid #000;
  71. border-right: 1px solid #000;
  72. border-bottom: 1px dashed #000;
  73. }
  74. #mainmenu .dropt a{
  75. background: #fff;
  76. }
  77.  
  78.  
  79. </style>
  80. </head>
  81.  
  82. <body>
  83. <div id="mainmenu">
  84. 	<li>
  85. 		<a href="#">MENU 1</a>
  86. 		<ul>
  87. 			<li class="dropt"><a href="#">DROP DOWN 1</a></li>
  88. 			<li class="drop"><a href="#">DROP DOWN 2</a></li>
  89. 			<li class="dropb"><a href="#">DROP DOWN 3</a></li>
  90. 		</ul>
  91. 	</li>
  92. 	<li>
  93. 		<a href="#">MENU 2</a>
  94. 		<ul>
  95. 			<li><a href="#">DROP DOWN 1</a></li>
  96. 			<li><a href="#">DROP DOWN 2</a></li>
  97. 			<li><a href="#">DROP DOWN 3</a></li>
  98. 		</ul>
  99. 	</li>
  100. 	<li>
  101. 		<a href="#">MENU 3</a>
  102. 		<ul>
  103. 			<li><a href="#">DROP DOWN 1</a></li>
  104. 			<li><a href="#">DROP DOWN 2</a></li>
  105. 			<li><a href="#">DROP DOWN 3</a></li>
  106. 		</ul>
  107. 	</li>
  108. </div>
  109.  
  110. </body>
  111. </html>
Similar Threads
Reputation Points: 10
Solved Threads: 0
Junior Poster
shadiadiph is offline Offline
117 posts
since Apr 2008
Permalink
Feb 5th, 2009
0

Re: css drop down menu not working in i.e 7

Hi,

download this file and place with html page
and add this style in css

css Syntax (Toggle Plain Text)
  1.  
  2. body
  3. { 
  4.       behavior: url("csshover3.htc"); 
  5. }

you menu will work in IE and FireFox

hope this will help you
Rahul Dev Katarey
Reputation Points: 39
Solved Threads: 23
Junior Poster
katarey is offline Offline
167 posts
since Jul 2005
Permalink
Feb 5th, 2009
0

Re: css drop down menu not working in i.e 7

I believe the reason for this malfunction is because they don't support li:hover, so downloading that behavior is probably your best bet.
Reputation Points: 13
Solved Threads: 6
Junior Poster in Training
ccube921 is offline Offline
93 posts
since Oct 2008
Permalink
Feb 5th, 2009
0

Re: css drop down menu not working in i.e 7

I resolved the problem a much easier way I.E 7 requires that you have a doc heading or it will not work I just simply added
HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and it works fine in both I.E and Firefox but now I have a new problem I have added a flyout menu it works fine in I.E 7 but not in Firefox?? I just tried this one with the behaviour htc and that doesn't work.

any ideas?

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6.  
  7. #mainmenu{
  8.  width: auto;
  9.  height: 30px;
  10. }
  11. #mainmenu{
  12.  margin: 0px;
  13.  padding: 0px;
  14. }
  15.  
  16. #mainmenu li{
  17.  float:left;
  18.  position:relative;
  19.  width: 140px;
  20.  border: 1px solid #000;
  21.  list-style: none;
  22.  background: #336699;
  23.  font-family: verdana;
  24.  font-size: 14px;
  25.  font-weight: bold;
  26.  text-align: center;
  27.  padding: 3px 10px 3px 10px;
  28. }
  29. #mainmenu li a{
  30.  background: #336699;
  31.  text-decoration: none;
  32.  color: #000;
  33. }
  34. #mainmenu li a:hover{
  35.  color: #ff0000;
  36. }
  37. .nav1{
  38. width: 140px;
  39. margin: 0px;
  40. padding: 0px;
  41. }
  42. #mainmenu li ul.nav1{
  43.  display:none;
  44.  position:absolute;
  45.  list-style: none;
  46.  top: 23px;
  47.  left: 0;
  48.  
  49. }
  50. #mainmenu li:hover ul.nav1{
  51.  display: block;
  52.  width: 140px;
  53. }
  54.  
  55. #mainmenu li ul.nav1 li {
  56.  background: #fff;
  57.  text-decoration: none;
  58.  font-size: 11px;
  59.  font-weight: none;
  60. }
  61. #mainmenu li ul.nav1 li a{
  62.  background: #fff;
  63.  text-decoration: none;
  64.  font-size: 11px;
  65.  font-weight: none;
  66.  color: #000;
  67.  
  68. }
  69. #mainmenu li ul.nav1 li a:hover{
  70.  color: #ff0000;
  71. }
  72.  
  73. #mainmenu li ul.nav1 li ul.nav2 li{
  74.  font-size: 8px;
  75.  font-weight: none; 
  76.  color: #fffab8;
  77. }
  78. #mainmenu li ul.nav1 li ul.nav2 li a{
  79.  color: #000;
  80. }
  81. #mainmenu li ul.nav1 li ul.nav2 li a:hover{
  82.  color: #ff0000;
  83. }
  84.  
  85.  
  86. #mainmenu ul.nav1 li ul.nav2{
  87.  display:none;
  88.  position:absolute;
  89.  list-style: none;
  90.  top: -1px;
  91.  left: 120px;
  92.  
  93. }
  94. #mainmenu ul.nav1 li:hover ul.nav2{
  95.  display: block;
  96.  width: 140px;
  97. }
  98.  
  99. </style>
  100. </head>
  101.  
  102. <body>
  103.  
  104. <div id="mainmenu">
  105.  
  106. 	<li>
  107. 		<a href="#">MENU 1</a>
  108. 		<ul class="nav1">
  109. 			<li><a href="#">DROP DOWN 1</a></li>
  110.  
  111.             <ul class="nav2">
  112. 			<li><a href="#">FLY OUT 1</a>
  113. 			<li><a href="#">FLY OUT 2</a>
  114.             </ul>
  115. 			<li><a href="#">DROP DOWN 2</a></li>
  116. 			<li><a href="#">DROP DOWN 3</a></li>
  117. 		</ul>
  118. 	</li>
  119. 	<li>
  120. 		<a href="#">MENU 2</a>
  121. 		<ul class="nav1">
  122. 			<li><a href="#">DROP DOWN 1</a></li>
  123. 			<li><a href="#">DROP DOWN 2</a></li>
  124. 			<li><a href="#">DROP DOWN 3</a></li>
  125. 		</ul>
  126. 	</li>
  127. 	<li>
  128. 		<a href="#">MENU 3</a>
  129. 		<ul class="nav1">
  130. 			<li><a href="#">DROP DOWN 1</a></li>
  131. 			<li><a href="#">DROP DOWN 2</a></li>
  132. 			<li><a href="#">DROP DOWN 3</a></li>
  133. 		</ul>
  134. 	</li>
  135. </div>
  136.  
  137. </body>
  138. </html>
Reputation Points: 10
Solved Threads: 0
Junior Poster
shadiadiph is offline Offline
117 posts
since Apr 2008
Permalink
Feb 6th, 2009
0

Re: css drop down menu not working in i.e 7

In order to get this work in both i.e and mozilla i have gone and got my document to validate 100% on w3c org to their validation standatds problem is i have had to add an additional set of <li> tags which is creating an unwated list element but without it doesn't work in both browers. Can anyone think of a fix for this?
here is my code it is obvious that where the list is doesnt make sense but it valitates therefore the menu works but not properly because of the additional space???

validates in html and css without the opening <ul> tag doesn't validate I am lost here.

HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  6. <title></title>
  7. <style type="text/css">
  8.  
  9. #mainmenu{
  10.  width: auto;
  11.  height: 30px;
  12. }
  13. #mainmenu{
  14.  margin: 0px;
  15.  padding: 0px;
  16. }
  17.  
  18. #mainmenu li{
  19.  float:left;
  20.  position:relative;
  21.  width: 140px;
  22.  border: 1px solid #000;
  23.  list-style: none;
  24.  background: #336699;
  25.  font-family: verdana;
  26.  font-size: 14px;
  27.  font-weight: bold;
  28.  text-align: center;
  29.  padding: 3px 10px 3px 10px;
  30. }
  31. #mainmenu li a{
  32.  background: #336699;
  33.  text-decoration: none;
  34.  color: #000;
  35. }
  36. #mainmenu li a:hover{
  37.  color: #ff0000;
  38. }
  39. .nav1{
  40. width: 140px;
  41. margin: 0px;
  42. padding: 0px;
  43. }
  44. #mainmenu li ul.nav1{
  45.  display:none;
  46.  position:absolute;
  47.  list-style: none;
  48.  top: 23px;
  49.  left: 0;
  50.  
  51. }
  52. #mainmenu li:hover ul.nav1{
  53.  display: block;
  54.  width: 140px;
  55. }
  56.  
  57. #mainmenu li ul.nav1 li {
  58.  background: #fff;
  59.  text-decoration: none;
  60.  font-size: 11px;
  61. }
  62. #mainmenu li ul.nav1 li a{
  63.  background: #fff;
  64.  text-decoration: none;
  65.  font-size: 11px;
  66.  color: #000;
  67.  
  68. }
  69. #mainmenu li ul.nav1 li a:hover{
  70.  color: #ff0000;
  71. }
  72.  
  73. #mainmenu li ul.nav1 li ul.nav2 li{
  74.  font-size: 8px;
  75.  color: #fffab8;
  76. }
  77. #mainmenu li ul.nav1 li ul.nav2 li a{
  78.  color: #000;
  79. }
  80. #mainmenu li ul.nav1 li ul.nav2 li a:hover{
  81.  color: #ff0000;
  82. }
  83.  
  84.  
  85. #mainmenu ul.nav1 li ul.nav2{
  86.  display:none;
  87.  position:absolute;
  88.  list-style: none;
  89.  top: -1px;
  90.  left: 120px;
  91.  
  92. }
  93. #mainmenu ul.nav1 li:hover ul.nav2{
  94.  display: block;
  95.  width: 140px;
  96. }
  97.  
  98. </style>
  99. </head>
  100.  
  101. <body>
  102.  
  103. <div id="mainmenu">
  104.  
  105. <ul>	
  106.       <li>
  107. 		<a href="#">MENU 1</a>
  108. 		<ul class="nav1">
  109. 		<li><a href="#">DROP DOWN 1</a></li>
  110. <li>
  111.            <ul class="nav2">
  112. 			<li><a href="#">FLY OUT 1</a></li>
  113. 			<li><a href="#">FLY OUT 2</a></li>
  114.             </ul>
  115. </li>
  116. 			<li><a href="#">DROP DOWN 2</a></li>
  117. 			<li><a href="#">DROP DOWN 3</a></li>
  118. 		</ul>
  119. 	</li>
  120. 	<li>
  121. 		<a href="#">MENU 2</a>
  122. 		<ul class="nav1">
  123. 			<li><a href="#">DROP DOWN 1</a></li>
  124. 			<li><a href="#">DROP DOWN 2</a></li>
  125. 			<li><a href="#">DROP DOWN 3</a></li>
  126. 		</ul>
  127. 	</li>
  128. 	<li>
  129. 		<a href="#">MENU 3</a>
  130. 		<ul class="nav1">
  131. 			<li><a href="#">DROP DOWN 1</a></li>
  132. 			<li><a href="#">DROP DOWN 2</a></li>
  133. 			<li><a href="#">DROP DOWN 3</a></li>
  134. 		</ul>
  135. 	</li>
  136. </ul>
  137. </div>
  138.  
  139. </body>
  140. </html>
Reputation Points: 10
Solved Threads: 0
Junior Poster
shadiadiph is offline Offline
117 posts
since Apr 2008
Permalink
Feb 6th, 2009
0

Re: css drop down menu not working in i.e 7

solved it by removing a few <li> tags
Reputation Points: 10
Solved Threads: 0
Junior Poster
shadiadiph is offline Offline
117 posts
since Apr 2008
Permalink
Feb 11th, 2009
0

Re: css drop down menu not working in i.e 7

also you can use the css sprite nav that uses the javascript sfhover function, google and youll see it.
Reputation Points: 37
Solved Threads: 1
Posting Whiz in Training
cmills83 is offline Offline
249 posts
since Jun 2004
Permalink
Feb 12th, 2009
0

Re: css drop down menu not working in i.e 7

HTML and CSS Syntax (Toggle Plain Text)
  1. .leftnav {
  2. 	padding-top:244px;
  3. 	width:188px;
  4. 	padding-left:12px;
  5. 	color:#000000;
  6. 	font-family:Arial;
  7. 	font-weight:bold;
  8. 	float:left;
  9. 	clear:both;
  10. }
  11. .leftheading {
  12. 	background-image: url(../images/rightstyle.jpg);
  13. 	width:178px;
  14. 	height:30px;
  15. 	padding-top:5px;
  16. 	padding-left:10px;
  17. 	background-repeat:no-repeat;
  18. 	color:#FFFFFF;
  19. 	font-family:Arial;
  20. 	font-weight:bold;
  21. 	z-index:10;
  22. }
  23. ul.menu1, ul ul {
  24. 	float:left;
  25. 	clear:both;
  26. 	padding:0; 
  27. 	margin:0;
  28. 	bottom:20px;
  29. 	border:0; 
  30. 	list-style-type:none; 	
  31. 	overflow:hidden; 
  32. 	background:#ffe6a3; 
  33. 	width:178px; 
  34. 	text-align:left;
  35. 	font-size:10pt; 
  36. 	color:#000000; 
  37. 	border:0;
  38. }
  39. ul.menu1 table {
  40. 	border-collapse:collapse; 
  41. 	padding:0; margin:0; 
  42. 	font-size:1em;
  43. }
  44. ul.menu1 ul {
  45. 	margin-left:1em;
  46. }
  47. ul.menu1 li {
  48. 	text-indent:10px;
  49. }
  50. ul.menu1 li.drop {
  51. 	margin-bottom:-2px;
  52. }
  53. ul.menu1 li a,ul.menu1 li a:visited {
  54. 	display:block; 
  55. 	width:178px; 
  56. 	height:2em; 
  57. 	line-height:1.2em; 
  58. 	text-decoration:none;
  59. 	color:#000000;
  60. }
  61. ul.menu1 li a.last, 
  62. ul.menu1 li a.last:visited {
  63. 	display:block; 
  64. 	width:178px;; 
  65. 	line-height:1.2em;
  66. }
  67. ul.menu1 li ul {
  68. 	display:none;
  69. }
  70. ul.menu1 li:hover a,ul.menu1 li a:hover {
  71. 	border:0; 
  72. 	color:#000000;
  73. 	font-weight:bold;
  74. }
  75. ul.menu1 li:hover ul, 
  76. ul.menu1 li a:hover ul {
  77. 	display:block; 
  78. 	width:168px;; 
  79. 	margin-top:-1px;
  80. }
  81. ul.menu1 li:hover ul li a, 
  82. ul.menu1 li a:hover ul li a {
  83.  	background:#ffe6a3; 
  84. 	color:#a51f17;
  85. 	font-weight:bold;
  86. }
  87. ul.menu1 li:hover ul li:hover a, 
  88. ul.menu1 li a:hover ul li a:hover {
  89. 	background:#ffe6a3;
  90. 	color:#000000;
  91. }
  92. .maincontent {
  93. 	float:left;
  94. 	position:absolute;
  95. 	top:244px;
  96. 	padding-left:215px;
  97. 	width:618px;
  98. 	font-family:Arial;
  99. 	font-weight:normal;
  100. 	font-size:10pt;
  101. 	clear:both;
  102. }

Html -:

HTML and CSS Syntax (Toggle Plain Text)
  1. <div class="maincontent">
  2. <p>test</p>
  3. <p>test</p>
  4. <p>test</p>
  5. <p>test</p>
  6. </div>
  7. <div class="leftnav">
  8. <div style="background-color:#ffe6a3;width:188px;min-height:600px;bottom:20px;">
  9. <div class="leftheading">Participants</div>
  10. <ul class="menu1">
  11. <li class="drop"><a href="#">Growers<!--[if IE 7]>
  12. <!-->
  13. </a><!--<![endif]--><table><tr><td>
  14. 	<ul>
  15. 	<li><a href="#">Grower Profile</a></li>
  16. 	<li><a href="#">2</a></li>
  17. 	<li><a href="#">3</a></li>
  18. 	<li><a href="#">4</a></li>
  19. 	</ul>
  20. 	</td></tr></table><!--[if lte IE 6]>
  21. </a><![endif]-->
  22. </li>
  23. <li class="drop"><a href="#">ColorStars<!--[if IE 7]>
  24. <!-->
  25. </a><!--<![endif]--><table><tr><td>
  26. 	<ul>
  27. 	<li><a href="#">1</a></li>
  28. 	<li><a href="#">2</a></li>
  29. 	<li><a href="#">3</a></li>
  30. 	<li><a href="#">4</a></li>
  31. 	</ul>
  32. 	</td></tr></table><!--[if lte IE 6]>
  33. </a><![endif]-->
  34. </li>
  35. <li class="drop"><a href="#">Rules<!--[if IE 7]>
  36. <!-->
  37. </a><!--<![endif]--><table><tr><td>
  38. 	<ul>
  39. 	<li><a href="#">1</a></li>
  40. 	<li><a href="#">2</a></li>
  41. 	<li><a href="#">3</a></li>
  42. 	<li><a href="#">4</a></li>
  43. 	</ul>
  44. 	</td></tr></table><!--[if lte IE 6]>
  45. </a><![endif]-->
  46. </li>
  47.  
  48. <li class="drop"><a href="#">FAQs<!--[if IE 7]>
  49. <!-->
  50. </a><!--<![endif]--><table><tr><td>
  51. 	<ul>
  52. 	<li><a href="#">1</a></li>
  53. 	<li><a href="#">2</a></li>
  54. 	<li><a href="#">3</a></li>
  55. 	<li><a href="#">4</a></li>
  56. 	</ul>
  57. 	</td></tr></table>
  58.  
  59. </ul>
  60. </div></div>
Reputation Points: 20
Solved Threads: 1
Newbie Poster
gurshan is offline Offline
15 posts
since Dec 2008

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 HTML and CSS Forum Timeline: pdf file
Next Thread in HTML and CSS Forum Timeline: Horizontal centering issue with varying # of spans





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


Follow us on Twitter


© 2011 DaniWeb® LLC