Member Avatar for j4mes_bond25

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:

# Error  Line 11 column 8: there is no attribute "name".

<a name="top"><img src="about.gif" alt=""/></a>

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).

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.

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.

✉
# Error Line 162 column 73: there is no attribute "border".

...ref="#top"><img src="top.gif" alt="" border="0"/></a></span>

✉
# Error Line 170 column 17: there is no attribute "language".

<script language="javascript">

✉
# Error Line 170 column 29: required attribute "type" not specified.

<script language="javascript">

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.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

# Error  Line 181 column 5: document type does not allow element "br" here; assuming missing "li" start-tag.

<br /><br />

✉
# Error Line 183 column 3: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.

<li><span class="boldText">Beer Stein/Mug:</span><img class="right" src="drinkwa

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.

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>").

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)

  • 2 Contributors
  • 6 Replies
  • 166 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by j4mes_bond25

Recommended Answers

All 6 Replies

Member Avatar for 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.

Member Avatar for j4mes_bond25

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:

#content ul li
{
   margin-top:20px;
}

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.

Member Avatar for 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.

Member Avatar for j4mes_bond25

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:

#content ul
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	color:black;
	margin:20px 30px;
	list-style-image:url(list_icon.gif);
}

#content ul li
{
	margin:20px;
}


/* ............................... IMAGES WITHIN "li" ............................. */

#content img.left
{
	float:left;
	padding:10px;
}

#content img.right
{
	float:right;
	padding:10px;
}

Entire Stylesheet is:

/* CSS Document */

body 
{
	background-image:url(background.jpg);
	background-attachment:fixed;
}

/* ........................................ Banner ........................................ */

#banner
{
	width:100%;
	height:100px;
	text-align:center;
}


/* ......................................... Top Menu .................................... */

#topMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:980px;
	float:right;
}

#topMenu ul
{
	list-style: none;
	font-size:medium;
	float:right;
	position:relative;
	margin-left: 130px;
	width:850px;
	padding: 0;
}

#topMenu ul li 
{
	display: inline;
	border:1px solid black;
	width:210px;
	background-color:white;
	color:#FF00FF;
	float:left;
	position: relative;
	font-size:large;
}

#topMenu ul li:hover
{
	background-color:black;
}

#topMenu a
{
	display:block;
	text-decoration:none; 
	font-size:larger;
	color:red; 
}

#topMenu a:hover
{
	color:white;
	text-transform:uppercase;
}

/* ....................................... Left Menu .......................................... */

#leftMenu
{
	background-color:transparent;
	cursor:default;
	text-align:center;
	width:100px;
	float:left;
}

#leftMenu ul
{
	text-align:center;
	list-style:none;
	margin:0px;
	position:relative;
	padding:0px;
	width:120px;
	border:thin solid red;
	border-bottom:0px;
}

#leftMenu ul li
{
	display: block;
	background-color:white;
	width:120px;
	border-bottom:thin solid red;
	color:purple;
	position: relative;
	font-size:large;
	line-height:50px; 
}

#leftMenu ul li:hover
{
	color:black;
	background-color:yellow;
	text-transform:uppercase;
}

#leftMenu ul li ul 
{
	position:absolute;
	display: none;
	text-transform:none;
	left:120px;
	width:123px;
	top:0px;
}

#leftMenu ul li ul a
{
	display:block;
	position:relative;
	text-decoration:none; 
	background-color:white;
	line-height:20px; 
	font-size:large;
	width:123px;
	color:green;
	text-transform:none;
}

#leftMenu ul li ul a:hover
{
	color:#00FFFF;
	background-color:black;
}

#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}


/* This Code is for Microsoft Internet Explorer Browser 
to it shows the effect of "li:hover" */

body { behavior: url(csshover.htc); }


/* ................................... Content ................................................ */

#content
{
	background-color:white;
	width:850px; 
	border:1px solid green;
	float:right;
	border-bottom:none;
}

#content h2
{
	font-family:"Times New Roman", Times, serif;
	text-align:justify;
	margin:30px;
	color:#990033;
	text-decoration:underline;
}

#content h3
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:left;
	font-size:large;
	margin:30px;
	color:blue;
	text-decoration:none;
}

#content h4
{
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	font-size:large;
	color:red;
	margin:30px;
	text-decoration:none;
}

#content h5
{
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	font-size:large;
	color:fuchsia;
	margin:30px;
	text-decoration:none;
}

#content h6
{
	font-family:"Courier New", Courier, monospace;
	text-align:left;
	font-size:medium;
	color:black;
	margin:30px;
	text-decoration:underline;
}

#content p
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	margin:20px 30px;
	color:black;
}

#content p.first-letter:first-letter
{
	color:red;
	margin-left:20px;
	font-size:xx-large;
}

#content ul
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	color:black;
	margin:20px 30px;
	list-style-image:url(list_icon.gif);
}

#content ul li
{
	margin:20px;
}

#content ol
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	margin:20px 30px;
	list-style-type:decimal;
}

#content ol li
{
	margin:20px;
}

#content img.left
{
	float:left;
	padding:10px;
}

#content img.right
{
	float:right;
	padding:10px;
}

#content ul li a
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	text-decoration:none;
}

#content ul li a:hover
{
	color:red;
	background-color:yellow;
	font-weight:bold;
}

#content ul a:active
{
	color:blue;
	font-weight:bold;
}

#content ul a:visited
{
	color:grey;
}

/* ................................... Other Class ......................................... */

.boldText
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	font-weight:bold;
}

.italicText
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	font-style:italic;
}

.underlineText
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:justify;
	color:black;
	text-decoration:underline;
}

.centerTop img
{
	text-align:center;
	border:0px;
}

/* ................................... Table ......................................... */

.table
{
	background-color:black;
	border-style:outset;
	border-width:thick;
	border-spacing:20px;
	margin:30px 30px;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
}

.table:hover
{
	border-style:inset;
	border-width:thick;
}

.tr
{
	border:1px solid red;
}

.th
{
	border:1px solid yellow;
	color:fuchsia;
}

.td
{
	border:1px solid red;
	font-size:medium;
	color:yellow;
}

/* ................................... Bottom Menu ......................................... */


#bottomMenu
{
	border:1px solid red;
	float:left;
	background-color:black;
	color:#FFFFFF;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	font-size:large;
	width:100%; 
	height:5%; 
	margin:0px;
}
Member Avatar for 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.

Member Avatar for j4mes_bond25

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.