HTML and CSS RSS HTML and CSS RSS

CSS browser compatibility ???

Reply

•
•
Join Date: Jan 2006
Posts: 89
Reputation: j4mes_bond25 is an unknown quantity at this point 
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

CSS browser compatibility ???

 
0
  #1
Apr 8th, 2006
Presently, after sorting my previous problem of menu, I'm only struggling with browser compatibility. Thought of it scares me since the reason I'm making this website is to show it to different employers (who often asks for the proof of applicant's previous work within CSS before considering their application) & since around 90% of browser are Internet Explorer, I rather prefer my website being able to work perfect for MAJORITY of the viewers.

Presently whatever I've done works perfectly well in Firefox & wonder if anyone around can help me or point me in right direction in getting it work well in Internet Explorer as well.

Now in Internet Explorer, every time I hover the mouse over Beer/Wine/Whiskey/Spirit link, the sub-menu either appears on the right side of it rather than straight underneat it (horizontal drop-down menu) & some not only appears on right side but also splits up into two different menu that appears at two different position.

Additionally, ONLY in Internet Explorer the left menu (#leftMenu in my code) is appearing SEPARATE from the "Content" rather than floating on left of the "Content". I can't even click on the link that's associated with Home/History/Law/Effect/Effect/Contact.

I've been checking browser compatibility for all the elements I've used & it all supports the latest Internte Explorer & Firefox browser, as well.

Can anyone around PLEASEEEEEEEEEEEEEEEEEEE help, since I've been working on it for the past 5 days quite unsuccessfully. For readers' convenience, I indented the code so as to make it more easily readable.

Attached here are 2 files one shows the result in Firefox (as I wish to see in Internet Explorer as well) & other showing result in Internet Explorer.

FOLLOWING ARE MY CODES SO FAR

CSS STYLE

HTML and CSS Syntax (Toggle Plain Text) 
  1. /* CSS Document */
  2.  
  3. body {background:url(background_champagne.gif) repeat}
  4.  
  5. /* ........................................ Banner ........................................ */
  6.  
  7. div.banner
  8. {
  9. 	background:url(glass_row.jpg);
  10. 	width:100%;
  11. 	height:4em;
  12. }
  13.  
  14. /* ......................................... Top Menu .................................... */
  15.  
  16. #topMenu
  17. {
  18. 	background-color:transparent;
  19. 	cursor:default;
  20. 	text-align:center;
  21. 	width:90%;
  22. 	float:right;
  23. }
  24.  
  25. #topMenu ul
  26. {
  27. 	list-style: none;
  28. 	text-align:center;
  29. 	font-size:medium;
  30. 	float:left;
  31. 	position:relative;
  32. 	margin: 0;
  33. 	padding: 0;
  34. }
  35.  
  36. #topMenu ul li 
  37. {
  38. 	display: inline;
  39. 	text-align:center;
  40. 	color:#FF00FF;
  41. 	float:left;
  42. 	position: relative;
  43. 	margin-left:150px;
  44. 	height:20px; 
  45. 	line-height:20px; 
  46. 	font-size:large;
  47. }
  48.  
  49. #topMenu ul li:hover
  50. {
  51. 	color:white;
  52. 	background-color:black;
  53. }
  54.  
  55. #topMenu ul li ul 
  56. {
  57. 	position:absolute;
  58. 	display: none;
  59. 	margin-left:-11em;
  60. }
  61.  
  62. #topMenu a
  63. {
  64. 	display:block;
  65. 	text-decoration:none; 
  66. 	background-color:white;
  67. 	width:120px; 
  68. 	height:20px; 
  69. 	line-height:20px; 
  70. 	font-size:large;
  71. 	color:blue; 
  72. 	border:1px solid red;
  73.  
  74. }
  75.  
  76. #topMenu a:hover
  77. {
  78. 	color:red;
  79. 	background-color:yellow;
  80. }
  81.  
  82. #topMenu ul li:hover ul {display:none}
  83. #topMenu ul li:hover ul {display:block;}
  84.  
  85. body {behavior: url(csshover.htc);}
  86.  
  87.  
  88. /* ....................................... Left Menu .......................................... */
  89.  
  90. #leftMenu
  91. {
  92. 	background-color:transparent;
  93. 	cursor:default;
  94. 	text-align:center;
  95. 	width:10%;
  96. 	float:left;
  97. }
  98.  
  99. #leftMenu ul
  100. {
  101. 	padding:0;
  102. 	list-style:none;
  103. 	width:12ex;
  104. }
  105.  
  106. #leftMenu ul li 
  107. {
  108. 	background-color:black;
  109. 	border-width:thick;
  110. 	border-style:outset;
  111. 	color:white;
  112. 	display:block;
  113.     position: relative;
  114. 	margin-top:2px;
  115. 	padding: 12px 6px;
  116. }
  117.  
  118. #leftMenu a
  119. {
  120. 	color: white;
  121. 	font-weight:bold;
  122. 	display: block;
  123. 	text-align:center;
  124.     text-decoration: none;
  125. }
  126.  
  127. #leftMenu a:hover {color:yellow;}
  128.  
  129. #leftMenu a:active {color:red;}
  130.  
  131. #leftMenu ul li:hover
  132. {
  133. 	border-width:thick;
  134. 	border-style:inset;
  135. }
  136.  
  137. /* This Code is for Microsoft Internet Explorer Browser 
  138. to it shows the effect of "li:hover" */
  139.  
  140. body { behavior: url(csshover.htc); }
  141.  
  142. /* Fix IE. Hide from IE Mac \*/
  143. * html #leftMenu ul li {float:left; height:1%;}
  144. * html #leftMenu ul li a {height:1%;}
  145. /* End */
  146.  
  147. /* ................................... Content ................................................ */
  148.  
  149. div.content
  150. {
  151. 	background-color:yellow; 
  152. 	width:90%; 
  153. 	height:30em; 
  154. 	float:right;
  155. }
  156.  
  157. /* ................................... Bottom Menu ......................................... */
  158.  
  159.  
  160. div.bottomMenu
  161. {
  162. 	background-color:green; 
  163. 	width:100%; 
  164. 	float:left;
  165. 	height:5%; 
  166. }

HOME.HTML

HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  5. <title>Alcohol - Main Page</title>
  6. <link rel="stylesheet" type="text/css" href="style.css"/>
  7. </head>
  8.  
  9. <body background="background_champagne.gif">
  10.  
  11. <div class="banner">
  12. </div>
  13.  
  14. <div id="topMenu">
  15.   <ul>
  16. 		<li><strong>Beer</strong>
  17. 			<ul>
  18. 			  <li><a href="">History</a></li>
  19. 			  <li><a href="">Ingredients</a></li>
  20. 			  <li><a href="">Brewing Process</a></li>
  21. 			  <li><a href="">Bottling</a></li>
  22. 			  <li><a href="">Home Brewing</a></li>
  23. 	  		</ul>
  24. 		</li>
  25.  
  26. 		<li><strong>Wine</strong>
  27. 			<ul>
  28. 			  <li><a href="">Preparation</a></li>
  29. 			  <li><a href="">Serving</a></li>
  30. 			  <li><a href="">Storing</a></li>
  31.   			  <li><a href="">Aging</a></li>
  32. 			  <li><a href="">Choosing</a></li>
  33. 			  <li><a href="">Grapes</a></li>
  34. 			  <li><a href="">Taste</a></li>
  35. 			  <li><a href="">Label</a></li>
  36. 			  <li><a href="">Terms</a></li>
  37. 			  <li><a href="">Glossary</a></li>			  
  38. 	  		</ul>
  39. 		</li>
  40.  
  41. 		<li><strong>Whiskey</strong>
  42. 			<ul>
  43. 			  <li><a href="">History</a></li>
  44. 			  <li><a href="">Preparation</a></li>
  45. 			  <li><a href="">Variety</a></li>
  46. 			  <li><a href="">Whiskies</a></li>
  47. 			  <li><a href="">Glossary</a></li>
  48. 	  		</ul>
  49. 		</li>
  50.  
  51. 		<li><strong>Spirit</strong>
  52. 			<ul>
  53. 			  <li><a href="">Brandy</a></li>
  54. 			  <li><a href="">Rum</a></li>
  55. 			  <li><a href="">Gin</a></li>
  56. 			  <li><a href="">Vodka</a></li>
  57. 			  <li><a href="">Absinthe</a></li>
  58. 	  		</ul>
  59. 		</li>
  60. 	</ul>
  61. </div>
  62.  
  63. <div id="leftMenu">
  64. 	<ul>
  65. 		<li><a href"">Home</a></li>
  66. 		<li><a href"">History</a></li>
  67. 		<li><a href"">Law</a></li>
  68. 		<li><a href"">Effect</a></li>
  69. 		<li><a href"">Contact</a></li>
  70. 	</ul>
  71. </div>
  72.  
  73. <div class="content">
  74. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
  75. </div>
  76.  
  77. <div class="bottomMenu">
  78. Bottom Menu
  79. </div>
  80.  
  81.  
  82.  
  83. </html>
Attached Thumbnails
FirefoxandExplorerResult.jpg  
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
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