By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,446 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,446 IT Pros & Developers. It's quick & easy.

Problems validating css

P: 13
Hello,
I,m new to this forum, please excuse any poor etiquette.
I,m also new to web building, therefore my question may be somewhat elimentary for those further on down the highway.
I had the code validated as xhtml and wanted the css validated, but errors are showing with references pertaining to Family and whitespace. These are related to div selectors and class and style selectors. Any suggestions?
This web page not published, still in notepad.
Jan 28 '07 #1
Share this Question
Share on Google+
6 Replies


Expert 100+
P: 1,892
Hello,
I,m new to this forum, please excuse any poor etiquette.
I,m also new to web building, therefore my question may be somewhat elimentary for those further on down the highway.
I had the code validated as xhtml and wanted the css validated, but errors are showing with references pertaining to Family and whitespace. These are related to div selectors and class and style selectors. Any suggestions?
This web page not published, still in notepad.
Post the code here so we can run it through the validator.
Jan 28 '07 #2

P: 13
Post the code here so we can run it through the validator.
Expand|Select|Wrap|Line Numbers
  1. ���body { 
  2. min-width : 80%;
  3. margin : 0;
  4. padding : 0;
  5. font-family : Geneva, Helvetica;
  6. color : #f9f9f9;
  7. background-color : #070707;
  8. html > body { 
  9. overflow : hidden;
  10. display : block;
  11. div, p, li { 
  12. font-family : Geneva, Helvetica;
  13. font-size : 12px;
  14. p { 
  15. margin-top : 0;
  16. padding-top : 0;
  17. line-height : 1.5em;
  18. h4 { 
  19. font-family : Geneva, Helvetica;
  20. font-size : 12px;
  21. color : #333;
  22. text-transform : uppercase;
  23. text-decoration : underline;
  24. text-align : center;
  25. a { 
  26. text-decoration : underline;
  27. font-weight : bold;
  28. a:link { 
  29. color : #699;
  30. background-color : transparent;
  31. a:visited { 
  32. color : #999;
  33. background-color : transparent;
  34. a:hover { 
  35. color : #066;
  36. background-color : transparent;
  37. text-decoration : underline overline;
  38. a:active { 
  39. color : #fff;
  40. background-color : transparent;
  41. li { 
  42. font-weight : 100;
  43. line-height : 0.8em;
  44. letter-spacing : 0.1em;
  45. div#header { 
  46. position : relative;
  47. width : 100%;
  48. height : 75px;
  49. z-index : auto;
  50. top : 75px;
  51. right : 0;
  52. bottom : auto;
  53. left : 0;
  54. border-top : thin solid #777;
  55. background-color : #303030;
  56. text-align : left;
  57. float : left;
  58. span.hdone { 
  59. font-family : "Microsoft Sans Serif", Geneva, Helvetica;
  60. font-size : large;
  61. font-style : italic;
  62. color : #999;
  63. letter-spacing : 0.5em;
  64. text-transform : uppercase;
  65. span.hdtwo { 
  66. font-family : "Myriad Web Pro", Geneva, Helvetica;
  67. font-size : medium;
  68. font-weight : 200;
  69. color : #4e5657;
  70. letter-spacing : 0.2em;
  71. span.hdthree { 
  72. font-family : "Myriad Web Pro", Geneva, Helvetica;
  73. font-size : medium;
  74. font-weight : 100;
  75. color : #f7f7f7;
  76. letter-spacing : 0.2em;
  77. img { 
  78. position : relative;
  79. width : 100px;
  80. height : auto;
  81. z-index : 2;
  82. top : 0;
  83. right : 0;
  84. bottom : auto;
  85. left : 0;
  86. padding-right : 25px;
  87. float : left;
  88. clear : right;
  89. border : 0;
  90. #navbar { 
  91. position : relative;
  92. width : 100%;
  93. height : auto;
  94. top : 75px;
  95. right : 0;
  96. bottom : auto;
  97. left : 0;
  98. background-color : #4e5659;
  99. #navbar ul { 
  100. padding : 0;
  101. #navbar ul li { 
  102. display : inline;
  103. #navbar ul { 
  104. margin : 0;
  105. padding : 0 0 5px 0;
  106. #navbar ul li a { 
  107. padding : 3px 10px;
  108. text-decoration : none;
  109. float : right;
  110. border-left : thin solid #94b473;
  111. #navbar ul li a:hover { 
  112. background-color : #777;
  113. #navlist li a:hover, #navlist li a:active { 
  114. text-decoration : none;
  115. #leftcol { 
  116. position : relative;
  117. width : 250px;
  118. height : auto;
  119. top : 100px;
  120. right : 0;
  121. bottom : auto;
  122. left : 75px;
  123. padding : 10px 20px;
  124. margin : 30px 50px;
  125. border : 1px dotted #333;
  126. float : left;
  127. clear : right;
  128. #articles { 
  129. position : relative;
  130. width : 225px;
  131. height : auto;
  132. top : 100px;
  133. right : 0;
  134. bottom : auto;
  135. left : 55px;
  136. padding : 10px 20px;
  137. margin : 30px 0;
  138. border : 1px dotted #333;
  139. float : left;
  140. clear : right;
  141. #menu { 
  142. position : relative;
  143. width : 160px;
  144. height : auto;
  145. top : 125px;
  146. right : 0;
  147. bottom : auto;
  148. left : 65px;
  149. background-color : transparent;
  150. margin : 0;
  151. padding : 0;
  152. text-align : left;
  153. float : left;
  154. #menu ul { 
  155. list-style : none;
  156. padding-top : 0;
  157. margin : 0;
  158. width : auto;
  159. #menu ul li { 
  160. display : block;
  161. float : right;
  162. width : 150px;
  163. margin : 0;
  164. padding : 3px;
  165. #menu ul li a { 
  166. display : block;
  167. width : 150px;
  168. padding : 3px;
  169. border-width : 0;
  170. border-style : none;
  171. text-decoration : none;
  172. background-color : #4e5658;
  173. #menu > ul#menu li a { 
  174. width : 150px;
  175. #menu ul li a:hover, #menu ul #menu li a:hover { 
  176. background-color : #777778;
  177. #menu li.menutitle { 
  178. font-family : Geneva, Helvetica;
  179. color : #989898;
  180. text-align : center;
  181. #footer { 
  182. position : relative;
  183. width : 100%;
  184. height : auto;
  185. top : 85px;
  186. right : 0;
  187. bottom : auto;
  188. left : 0;
  189. font : 10px Geneva, Hevetica;
  190. margin-top : 10px;
  191. padding-top : 10px;
  192. border-top : 1px dotted #333;
  193. clear : both;
  194. }
  195.  
Feb 9 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
The code validates but I see the question marks at the start. Are these in your code? Are you saving it as utf-8?
Feb 9 '07 #4

P: 13
The code validates but I see the question marks at the start. Are these in your code? Are you saving it as utf-8?
Yes I am saving as utf-8. Those question marks are as the code came back from the www3 validator. But I was not given access to the validation link. What system of validation are you using? Is this an error on my part to save in notepad as utf-8?
Thank you for taking the time to share your efforts. Much appreciated.
Feb 9 '07 #5

P: 13
The code validates but I see the question marks at the start. Are these in your code? Are you saving it as utf-8?
Sorry, the other problem here is that I was using the same colors in the uppernavbar and the rightside navbar and the validator responded with warnings that similar colors were being used. Is this a problem? I want the navigation to look a certain way.
Feb 9 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
If you save text in utf-8, editors will insert a BOM, Byte Order Mark, at the head of the code so software will know. This can confuse the validator so you might just save it as ascii.

The warnings are just that, warnings. They are concerned with accessabality and it looks at color and contrast for readability but your markup may still be valid.
Feb 9 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.