XHTML Validation ???

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

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

XHTML Validation ???

 
0
  #1
May 7th, 2006
After realising the importance of "validating" my XHTML document, I'm going through the validation process by trying to validate each of my HTML page.

Couple of problems that was beyond me includes:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2.  
  3. # Error Line 11 column 8: there is no attribute "name".
  4.  
  5. <a name="top"><img src="about.gif" alt=""/></a>
  6.  
  7. You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
  8.  
  9. This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
  10.  
  11. How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.
  12.  
  13. # Error Line 162 column 73: there is no attribute "border".
  14.  
  15. ...ref="#top"><img src="top.gif" alt="" border="0"/></a></span>
  16.  
  17. # Error Line 170 column 17: there is no attribute "language".
  18.  
  19. <script language="javascript">
  20.  
  21. # Error Line 170 column 29: required attribute "type" not specified.
  22.  
  23. <script language="javascript">
  24.  
  25. The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
  26.  
  27. Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
  28.  
  29. # Error Line 181 column 5: document type does not allow element "br" here; assuming missing "li" start-tag.
  30.  
  31. <br /><br />
  32.  
  33. # Error Line 183 column 3: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.
  34.  
  35. <li><span class="boldText">Beer Stein/Mug:</span><img class="right" src="drinkwa
  36.  
  37. The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
  38.  
  39. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
  40.  

My website is: http://homepage.ntlworld.com/darsh25/alcohol.html

1st problem is about the "top" image link which can be clicked to reach the top of the page (available on every single page). How do I overcome this problem and still able to reach at the top of the page using a link at the bottom of the page ??? (this is with About.html)

2nd problem seems to be from the "javascript" that states the "automatic update date" of the page. Can't I use javascript in CSS document ??? (this is with About.html)

3rd problem seems with the use of <br/> since I need some space. (this is with Alcohol.html)
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: XHTML Validation ???

 
0
  #2
May 8th, 2006
Just read through the error messages carefully: they describe the problems and solutions. For example, your doctype expects "type" rather than "language" in your script tag: the error message says exactly that.
Reply With Quote Quick reply to this message  
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

Re: XHTML Validation ???

 
0
  #3
May 8th, 2006
Originally Posted by tgreer
Just read through the error messages carefully: they describe the problems and solutions. For example, your doctype expects "type" rather than "language" in your script tag: the error message says exactly that.
Thanks for your help.

Basically, I managed to sort the JavaScript error out, since I spent yesterday evening trying to find out more about it & end of the night, it was all worth the effort. I also managed to find some other errors, as the time went by.

Not exactly the error that I'm getting in validation but right now, what's beyond me is that regardless of having:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. #content ul li
  2. {
  3. margin-top:20px;
  4. }

why do I HAVE TO use <br /> between two "li", since as you can see from all the "li" within the "Drinkware" heading of homepage.ntlworld.com/darsh25/alcohol.html , that many "li" are overlapping each other rather than having "space" between them i.e. a "new li starting from fresh new line" (rather than relying on <br />)

This ONLY happens when there's an "image" within an "li", although if it's ONLY text then the new "li" always starts with fresh new line.
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: XHTML Validation ???

 
0
  #4
May 8th, 2006
For spacing issues, make sure you always set the "margin", and the "padding", for all affected elements. Otherwise, each browser will set a default, and the default may not be what you want.
Reply With Quote Quick reply to this message  
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

Re: XHTML Validation ???

 
0
  #5
May 8th, 2006
Originally Posted by tgreer
For spacing issues, make sure you always set the "margin", and the "padding", for all affected elements. Otherwise, each browser will set a default, and the default may not be what you want.
Indeed, that makes sense.

I've got rid of all the <br /> between "li" in the Drinkware heading of "Alcohol.html" page on: http://homepage.ntlworld.com/darsh25/alcohol.html

Now you can see that all the "li" are over-lapping each other. This ONLY happen when there's an image within the "li" (but if it's ONLY text, then the new "li" always starts on the fresh lilne).

All the "li" related coding (along with "img" that's WITHIN these "li" are:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. #content ul
  3. {
  4. font-family:Verdana, Arial, Helvetica, sans-serif;
  5. text-align:left;
  6. color:black;
  7. margin:20px 30px;
  8. list-style-image:url(list_icon.gif);
  9. }
  10.  
  11. #content ul li
  12. {
  13. margin:20px;
  14. }
  15.  
  16.  
  17. /* ............................... IMAGES WITHIN "li" ............................. */
  18.  
  19. #content img.left
  20. {
  21. float:left;
  22. padding:10px;
  23. }
  24.  
  25. #content img.right
  26. {
  27. float:right;
  28. padding:10px;
  29. }


Entire Stylesheet is:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. /* CSS Document */
  2.  
  3. body
  4. {
  5. background-image:url(background.jpg);
  6. background-attachment:fixed;
  7. }
  8.  
  9. /* ........................................ Banner ........................................ */
  10.  
  11. #banner
  12. {
  13. width:100%;
  14. height:100px;
  15. text-align:center;
  16. }
  17.  
  18.  
  19. /* ......................................... Top Menu .................................... */
  20.  
  21. #topMenu
  22. {
  23. background-color:transparent;
  24. cursor:default;
  25. text-align:center;
  26. width:980px;
  27. float:right;
  28. }
  29.  
  30. #topMenu ul
  31. {
  32. list-style: none;
  33. font-size:medium;
  34. float:right;
  35. position:relative;
  36. margin-left: 130px;
  37. width:850px;
  38. padding: 0;
  39. }
  40.  
  41. #topMenu ul li
  42. {
  43. display: inline;
  44. border:1px solid black;
  45. width:210px;
  46. background-color:white;
  47. color:#FF00FF;
  48. float:left;
  49. position: relative;
  50. font-size:large;
  51. }
  52.  
  53. #topMenu ul li:hover
  54. {
  55. background-color:black;
  56. }
  57.  
  58. #topMenu a
  59. {
  60. display:block;
  61. text-decoration:none;
  62. font-size:larger;
  63. color:red;
  64. }
  65.  
  66. #topMenu a:hover
  67. {
  68. color:white;
  69. text-transform:uppercase;
  70. }
  71.  
  72. /* ....................................... Left Menu .......................................... */
  73.  
  74. #leftMenu
  75. {
  76. background-color:transparent;
  77. cursor:default;
  78. text-align:center;
  79. width:100px;
  80. float:left;
  81. }
  82.  
  83. #leftMenu ul
  84. {
  85. text-align:center;
  86. list-style:none;
  87. margin:0px;
  88. position:relative;
  89. padding:0px;
  90. width:120px;
  91. border:thin solid red;
  92. border-bottom:0px;
  93. }
  94.  
  95. #leftMenu ul li
  96. {
  97. display: block;
  98. background-color:white;
  99. width:120px;
  100. border-bottom:thin solid red;
  101. color:purple;
  102. position: relative;
  103. font-size:large;
  104. line-height:50px;
  105. }
  106.  
  107. #leftMenu ul li:hover
  108. {
  109. color:black;
  110. background-color:yellow;
  111. text-transform:uppercase;
  112. }
  113.  
  114. #leftMenu ul li ul
  115. {
  116. position:absolute;
  117. display: none;
  118. text-transform:none;
  119. left:120px;
  120. width:123px;
  121. top:0px;
  122. }
  123.  
  124. #leftMenu ul li ul a
  125. {
  126. display:block;
  127. position:relative;
  128. text-decoration:none;
  129. background-color:white;
  130. line-height:20px;
  131. font-size:large;
  132. width:123px;
  133. color:green;
  134. text-transform:none;
  135. }
  136.  
  137. #leftMenu ul li ul a:hover
  138. {
  139. color:#00FFFF;
  140. background-color:black;
  141. }
  142.  
  143. #leftMenu ul li ul {display:none;}
  144. #leftMenu ul li:hover ul {display:block;}
  145.  
  146.  
  147. /* This Code is for Microsoft Internet Explorer Browser
  148. to it shows the effect of "li:hover" */
  149.  
  150. body { behavior: url(csshover.htc); }
  151.  
  152.  
  153. /* ................................... Content ................................................ */
  154.  
  155. #content
  156. {
  157. background-color:white;
  158. width:850px;
  159. border:1px solid green;
  160. float:right;
  161. border-bottom:none;
  162. }
  163.  
  164. #content h2
  165. {
  166. font-family:"Times New Roman", Times, serif;
  167. text-align:justify;
  168. margin:30px;
  169. color:#990033;
  170. text-decoration:underline;
  171. }
  172.  
  173. #content h3
  174. {
  175. font-family:Georgia, "Times New Roman", Times, serif;
  176. text-align:left;
  177. font-size:large;
  178. margin:30px;
  179. color:blue;
  180. text-decoration:none;
  181. }
  182.  
  183. #content h4
  184. {
  185. font-family:"Courier New", Courier, monospace;
  186. text-align:left;
  187. font-size:large;
  188. color:red;
  189. margin:30px;
  190. text-decoration:none;
  191. }
  192.  
  193. #content h5
  194. {
  195. font-family:"Courier New", Courier, monospace;
  196. text-align:left;
  197. font-size:large;
  198. color:fuchsia;
  199. margin:30px;
  200. text-decoration:none;
  201. }
  202.  
  203. #content h6
  204. {
  205. font-family:"Courier New", Courier, monospace;
  206. text-align:left;
  207. font-size:medium;
  208. color:black;
  209. margin:30px;
  210. text-decoration:underline;
  211. }
  212.  
  213. #content p
  214. {
  215. font-family:Verdana, Arial, Helvetica, sans-serif;
  216. text-align:justify;
  217. margin:20px 30px;
  218. color:black;
  219. }
  220.  
  221. #content p.first-letter:first-letter
  222. {
  223. color:red;
  224. margin-left:20px;
  225. font-size:xx-large;
  226. }
  227.  
  228. #content ul
  229. {
  230. font-family:Verdana, Arial, Helvetica, sans-serif;
  231. text-align:left;
  232. color:black;
  233. margin:20px 30px;
  234. list-style-image:url(list_icon.gif);
  235. }
  236.  
  237. #content ul li
  238. {
  239. margin:20px;
  240. }
  241.  
  242. #content ol
  243. {
  244. font-family:Verdana, Arial, Helvetica, sans-serif;
  245. text-align:justify;
  246. color:black;
  247. margin:20px 30px;
  248. list-style-type:decimal;
  249. }
  250.  
  251. #content ol li
  252. {
  253. margin:20px;
  254. }
  255.  
  256. #content img.left
  257. {
  258. float:left;
  259. padding:10px;
  260. }
  261.  
  262. #content img.right
  263. {
  264. float:right;
  265. padding:10px;
  266. }
  267.  
  268. #content ul li a
  269. {
  270. font-family:Verdana, Arial, Helvetica, sans-serif;
  271. text-align:justify;
  272. color:black;
  273. text-decoration:none;
  274. }
  275.  
  276. #content ul li a:hover
  277. {
  278. color:red;
  279. background-color:yellow;
  280. font-weight:bold;
  281. }
  282.  
  283. #content ul a:active
  284. {
  285. color:blue;
  286. font-weight:bold;
  287. }
  288.  
  289. #content ul a:visited
  290. {
  291. color:grey;
  292. }
  293.  
  294. /* ................................... Other Class ......................................... */
  295.  
  296. .boldText
  297. {
  298. font-family:Verdana, Arial, Helvetica, sans-serif;
  299. text-align:justify;
  300. color:black;
  301. font-weight:bold;
  302. }
  303.  
  304. .italicText
  305. {
  306. font-family:Verdana, Arial, Helvetica, sans-serif;
  307. text-align:justify;
  308. color:black;
  309. font-style:italic;
  310. }
  311.  
  312. .underlineText
  313. {
  314. font-family:Verdana, Arial, Helvetica, sans-serif;
  315. text-align:justify;
  316. color:black;
  317. text-decoration:underline;
  318. }
  319.  
  320. .centerTop img
  321. {
  322. text-align:center;
  323. border:0px;
  324. }
  325.  
  326. /* ................................... Table ......................................... */
  327.  
  328. .table
  329. {
  330. background-color:black;
  331. border-style:outset;
  332. border-width:thick;
  333. border-spacing:20px;
  334. margin:30px 30px;
  335. font-family:Georgia, "Times New Roman", Times, serif;
  336. text-align:center;
  337. }
  338.  
  339. .table:hover
  340. {
  341. border-style:inset;
  342. border-width:thick;
  343. }
  344.  
  345. .tr
  346. {
  347. border:1px solid red;
  348. }
  349.  
  350. .th
  351. {
  352. border:1px solid yellow;
  353. color:fuchsia;
  354. }
  355.  
  356. .td
  357. {
  358. border:1px solid red;
  359. font-size:medium;
  360. color:yellow;
  361. }
  362.  
  363. /* ................................... Bottom Menu ......................................... */
  364.  
  365.  
  366. #bottomMenu
  367. {
  368. border:1px solid red;
  369. float:left;
  370. background-color:black;
  371. color:#FFFFFF;
  372. text-align:center;
  373. font-family:"Times New Roman", Times, serif;
  374. font-style:italic;
  375. font-size:large;
  376. width:100%;
  377. height:5%;
  378. margin:0px;
  379. }
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: XHTML Validation ???

 
0
  #6
May 8th, 2006
Please re-read my prior message. Your "li-related" style declarations are not complete. You need to provide a complete margin AND a complete padding, for every element, or else each browser will determine its own. Your page looks fine in Firefox, but the images overlap in IE. Don't leave spacing at the whim of the browser: declare it explicitly.
Reply With Quote Quick reply to this message  
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

Re: XHTML Validation ???

 
0
  #7
May 8th, 2006
Originally Posted by tgreer
Please re-read my prior message. Your "li-related" style declarations are not complete. You need to provide a complete margin AND a complete padding, for every element, or else each browser will determine its own. Your page looks fine in Firefox, but the images overlap in IE. Don't leave spacing at the whim of the browser: declare it explicitly.
Thanks for your time & help.

I finally managed to get it sorted out to my full satisfaction, although with a lot of pain in the neck.

Oh well, you live & learn, as they say.
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC