login  Naam:   Wachtwoord: 
Registreer je!
 Forum

#leftnav ul li a:hover background werkt niet in firefox

Offline ecoracer - 05/05/2014 00:22 (laatste wijziging 05/05/2014 00:34)
Avatar van ecoracerNieuw lid doe ik iets fout, wat doe ik fout?
dank,
ecoracer

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Testsite</title>
  6. <style>
  7. * 
  8. { 
  9. 	padding: 0px;
  10. 	margin: 0px;
  11. }
  12. body {
  13. 	background-color: #CCCCCC;
  14. 	font-family: "Courier New", Courier, monospace;
  15. 	color: #000;
  16. 	text-decoration: none;
  17. 	list-style-type: none;
  18. }
  19.  
  20. #container
  21. {
  22. 	width: 960px;
  23. 	background-color: #FFFFFF;
  24. 	position: relative;
  25. 	margin-top: 0px;
  26. 	margin-right: auto;
  27. 	margin-bottom: 0px;
  28. 	margin-left: auto;
  29. }
  30.  
  31. #menu-container
  32. {
  33.     width: 960px;
  34. }
  35.  
  36.  
  37. #menu
  38. {
  39.     width: 780px;
  40.     padding: 10px;
  41.     float: left;
  42. 	text-align: left;
  43. }
  44.  
  45. #menu ul 
  46. {  
  47.         list-style-type: none;  
  48.         width: auto; /* Nieuw */  
  49. }  
  50.  
  51. #menu ul li 
  52. {  
  53.         margin: 0;  
  54. }  
  55.  
  56. #menu ul li a {  
  57.         display: inline;  
  58.         padding: 15px;  
  59.         background-color: #44699C;    
  60.         color: #CCC;  
  61.     }  
  62. #menu ul li a:hover 
  63. {  
  64.         background-color: ##5F94DC;  
  65. }  
  66.  
  67. #menu ul li a:visited 
  68. {  
  69.         background-color: #44699C;
  70. 		color: #CCC;  
  71. } 
  72.  
  73. #taalkeuze
  74. {
  75.     width: 140px;
  76.     padding: 10px;
  77.     float: left;
  78. 	text-align: right;
  79. }
  80.  
  81. #logo
  82. {
  83.     width: 940px;
  84.     padding: 10px;
  85. }
  86.  
  87. #content-container
  88. {
  89.     width: 960px;
  90. }
  91.  
  92. #leftnav
  93. {
  94. 	width: 240px;
  95. 	float: left;
  96. 	text-decoration: none;
  97. }
  98.  
  99. #leftnav ul 
  100. {
  101. 	list-style-type: none;
  102. 	width: 240px; /* Nieuw */
  103. 	text-decoration: none;
  104. }  
  105.  
  106. #leftnav ul li 
  107. {  
  108.         margin: 0;  
  109. }  
  110.  
  111. #leftnav ul li a {
  112. 	display: block;
  113. 	padding: 10px;
  114. 	background-color: #44699C;
  115. 	color: #CCC;
  116. 	text-decoration: none;
  117.     }  
  118.  
  119. #leftnav ul li a:link {
  120. 	display: block;
  121. 	padding: 10px;
  122. 	background-color: #44699C;
  123. 	color: #CCC;
  124. 	text-decoration: none;
  125.     }  
  126.  
  127.  
  128. #leftnav ul li a:hover 
  129. {
  130. 	background-color: green;
  131. 	text-decoration: none;
  132. }  
  133.  
  134. #leftnav ul li a:visited 
  135. {
  136. 	background-color: #44699C;
  137. 	color: #CCC;
  138. 	text-decoration: none;
  139. } 
  140.  
  141. #leftnav ul li a:active 
  142. {
  143. 	background-color: #44699C;
  144. 	color: #CCC;
  145. 	text-decoration: none;
  146. } 
  147.  
  148. #content
  149. {
  150.     width: 680px;
  151.     padding: 10px;
  152.     float: left;
  153. }
  154.  
  155. #content img 
  156. {
  157.     padding: 0px 10px 0px 0px;
  158. 	margin: 0px;
  159. }
  160.  
  161. #container img.left 
  162. {
  163. 	float: left;
  164. 	clear: left;
  165. }
  166.  
  167. #container img.right
  168. {
  169. 	float: right;
  170. 	clear: right;
  171. }
  172.  
  173. #content p
  174. { 
  175. 	padding: 0px;
  176. 	margin: 0px;
  177.  
  178. }
  179.  
  180. #content h1
  181. {
  182. 	padding: 0px 0px 10px 0px;
  183. 	margin: 0px;
  184. }
  185.  
  186. #content h2
  187. {
  188. 	padding: 0px 0px 10px 0px;
  189. 	margin: 0px;
  190. }
  191.  
  192. #footer
  193. {
  194.     clear: both;
  195.     width: 940px;
  196.     padding: 10px;
  197. 	background-color: #333;
  198. 	text-align: center;
  199. }
  200.  
  201. #footer p
  202. {
  203. 	color: #CCC;
  204. }
  205.  
  206. </style>
  207. </head>
  208. <body>
  209. <div id="container">
  210.   <div id="menu-container">
  211.     <div id="menu">LINK 1 | LINK 2| LINK 3 | LINK 4 | LINK 5</div>
  212.     <div id="taalkeuze">NL | FR | EN</div>
  213.     </div>
  214.     <div id="logo">LOGO</div>
  215.   <div id="content-container">
  216.         <div id= "leftnav">
  217.         <ul>
  218.         <li><a href="#" title="LINK 1">LINK 1</a></li>
  219.         <li><a href="#" title="LINK 2">LINK 2</a></li>
  220.         <li><a href="#" title="LINK 3">LINK 3</a></li>
  221.         <li><a href="#" title="LINK 4">LINK 4</a></li>
  222.         <li><a href="#" title="LINK 5">LINK 5</a></li>
  223.         </ul>
  224.         </div>
  225.         <div id="content">
  226.         <h1>Homepage</h1>
  227.         <h2>H2</h2>
  228.         <img src="afbeeldingen/honden.jpg" width="400" height="320" class="left" />
  229.         <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p>
  230.  
  231.         <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. </p>
  232.         <br />
  233.         <p>Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p>
  234.     </div>
  235.     </div>
  236.     <div id="footer"><p>Copyright</p></div>
  237. </div>
  238. </body>
  239. </html>

3 antwoorden

Gesponsorde links
Offline Jointjeff - 05/05/2014 02:11
Avatar van Jointjeff HTML interesse Heb het zojuist getest in Firefox (Mac) en de hover werkt gewoon. Misschien je browsercache eens legen?
Offline Thomas - 05/05/2014 10:05 (laatste wijziging 05/05/2014 10:05)
Avatar van Thomas Moderator Waarom niet gewoon het rgb-equivalent van "green"? Dat werkt altijd, lijkt mij.
EDIT: en als dat niet werkt, weet je meteen dat de fout ergens anders zit. Dus ook in het kader van dingen uitsluiten lijkt mij dit handiger.

Overigens vind ik het niet echt noodzakelijk om een compleet (239 regels tellend) document te plaatsen. Gelieve alleen de relevante delen aan te leveren (enkele regels CSS, enkele regels HTML) zodat het geen speurtocht wordt.
Offline valles10 - 12/05/2014 16:14
Avatar van valles10 HTML interesse Is dit nog iemand opgevallen?
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menu ul li a:hover 
  2. {  
  3.         background-color: #[b]#[/b]5F94DC;  
  4. }
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.204s