HTML and CSS RSS HTML and CSS RSS

css drop down menu not working in i.e 7

Reply

•
•
Join Date: Apr 2008
Posts: 78
Reputation: shadiadiph is an unknown quantity at this point 
Solved Threads: 0
shadiadiph shadiadiph is offline Offline
Junior Poster in Training

css drop down menu not working in i.e 7

 
0
  #1
Feb 5th, 2009
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2005
Posts: 154
Reputation: katarey is an unknown quantity at this point 
Solved Threads: 20
katarey's Avatar
katarey katarey is offline Offline
Junior Poster

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

 
0
  #2
Feb 5th, 2009
Hi,

download this file and place with html page
•
•
•
•
http://www.xs4all.nl/~peterned/htc/csshover3.htc
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
Freelance Web Designer & Developer
Http//www.Katarey.com
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

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

 
0
  #3
Feb 5th, 2009
I believe the reason for this malfunction is because they don't support li:hover, so downloading that behavior is probably your best bet.
If I have been helpful add to my reputation!
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 78
Reputation: shadiadiph is an unknown quantity at this point 
Solved Threads: 0
shadiadiph shadiadiph is offline Offline
Junior Poster in Training

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

 
0
  #4
Feb 5th, 2009
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 78
Reputation: shadiadiph is an unknown quantity at this point 
Solved Threads: 0
shadiadiph shadiadiph is offline Offline
Junior Poster in Training

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

 
0
  #5
Feb 6th, 2009
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 78
Reputation: shadiadiph is an unknown quantity at this point 
Solved Threads: 0
shadiadiph shadiadiph is offline Offline
Junior Poster in Training

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

 
0
  #6
Feb 6th, 2009
solved it by removing a few <li> tags
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 247
Reputation: cmills83 is an unknown quantity at this point 
Solved Threads: 1
cmills83 cmills83 is offline Offline
Posting Whiz in Training

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

 
0
  #7
Feb 11th, 2009
also you can use the css sprite nav that uses the javascript sfhover function, google and youll see it.
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2008
Posts: 16
Reputation: gurshan is an unknown quantity at this point 
Solved Threads: 0
gurshan gurshan is offline Offline
Newbie Poster

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

 
0
  #8
Feb 12th, 2009
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>
Web design services

Website Designing Company
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC