Help Required - New to coding

Hi all,

I have been learning how to use DIV’s nad UL / LI tags and it’s been going good so far. The website I currently have is http://www.vacationatsandals.ca. I ran this website through [URL=“http://nibbler.silktide.com/”]http://nibbler.silktide.com/ and got back a lot some code errors and as you will be able to see the code quality is “0”. I was wondering if someone could provide some help in regards to these errors and the DOC Type.

Any help would be appreciated.

Hi snackman_84,
Welcome on the forum! :slight_smile:
I see that after the last nibbler test (pages detected as html4.01) you have changed the Doctype into xhtml1.0Transitional (that is what a retest of the nibbler results is detecting now). That’s good: the homepage has 32 errors if it is html4.01, and only 16 errors as xhtml1.0.
We go for the xhtml! :slight_smile:

=======
Now the errors on the homepage [U]vacationatsandals.ca[/U].
I always use the official [U]w3c html-validator[/U], we can have a look at the [URL=“http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vacationatsandals.ca%2F”][U]16 errors and 3 warnings[/U].

  • Line 104, Column 30: character “<” is the first character of a delimiter but occurred as data
if(startProductBarPos<0)startProductBarPos=findPosY(bar);

In html-code the < is the beginning of a tag like <div>. But line 104 is inside a javascript-code, and there the < means “less than”. The validator did expect that is was html, and reports an error: there was no tag.
The solution is to give the validator the order not to inspect javascript-code as html-code. That can be done with the “CDATA” command //<![CDATA[ (C=Character=for html “pure text”, no tags), which has to be closed too, with //]]>.
At the moment it is:

<script type='text/javascript'>
    var startProductBarPos=-1;
    window.onscroll=function(){
        var bar = document.getElementById('categories');
        if(startProductBarPos<0)startProductBarPos=findPosY(bar);

        if(pageYOffset>startProductBarPos){
            bar.style.position='fixed';
            bar.style.top=0;
        }else{
            bar.style.position='relative';
        }
    };

    function findPosY(obj) {
        var curtop = 0;
        if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
            while (obj.offsetParent) {
                curtop += obj.offsetTop;
                obj = obj.offsetParent;
            }
            curtop += obj.offsetTop;
        }
        else if (obj.y)
            curtop += obj.y;
        return curtop;
    }
</script>

That can be:

<script type='text/javascript'>
//<![CDATA[
    var startProductBarPos=-1;
    window.onscroll=function(){
        var bar = document.getElementById('categories');
        if(startProductBarPos<0)startProductBarPos=findPosY(bar);

        if(pageYOffset>startProductBarPos){
            bar.style.position='fixed';
            bar.style.top=0;
        }else{
            bar.style.position='relative';
        }
    };

    function findPosY(obj) {
        var curtop = 0;
        if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
            while (obj.offsetParent) {
                curtop += obj.offsetTop;
                obj = obj.offsetParent;
            }
            curtop += obj.offsetTop;
        }
        else if (obj.y)
            curtop += obj.y;
        return curtop;
    }
//]]>
</script>
  • Tip: IMPORTANT! Start with the first error the validator is reporting, and re-validate the page with the html-validator after each correction!
    Often an error is causing follow-up errors further on in page. Repairing the error does melt the follow-up errors. :slight_smile:

In this case: 1 repair and 3 warnings are gone.

  • Line 150, Column 42: document type does not allow element “a” here; assuming missing “li” start-tag

The clickable items of the sliding menu under the image are now build as:

<ul class="als-wrapper">
	<a href="#sandalsresorts" class="topLink">
	<li class="als-item">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" height="65">
			<tr>
				<td align="center" valign="middle">Sandals Resorts</td>
			</tr>
		</table>
	</li>
	</a>
	<a href="#comparedtosandalstheresnocomparison" class="topLink">
	<li class="als-item">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" height="65">
			<tr>
				<td align="center" valign="middle"> Compared to Sandals<br />
					there's No Comparison</td>
			</tr>
		</table>
	</li>
	</a>
	<a href="#stayatoneplayatallsandals" class="topLink">
	... etc.

But an unordered list <ul> can only have list items <li> in it.
The links <a href=“…”> and their end tags </a> are inside the <ul> but outside the <li>'s, what is forbidden.
The construction can be:

<ul class="als-wrapper">
	<li class="als-item">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" height="65">
			<tr>
				<td align="center" valign="middle">
					<a href="#sandalsresorts" class="topLink">Sandals Resorts</a>
				</td>
			</tr>
		</table>
	</li>
	<li class="als-item">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" height="65">
			<tr>
				<td align="center" valign="middle">
					<a href="#comparedtosandalstheresnocomparison" class="topLink"> Compared to Sandals<br />
					there's No Comparison</a>
				</td>
			</tr>
		</table>
	</li>
	<li class="als-item">
	... etc.

If this is done, only 4 errors remain. :slight_smile:

The consequence of moving the <a>'s inside the <li> is that the color is changed and a link-underlining is added.
This can be changed in the css, which was:

#lista1 .als-item {
     color: #0871B9;
     font-family: Arial,Helvetica,sans-serif;
     font-size: 12px;
     font-style: normal;
     font-weight: bold;
     line-height: 18px;
}

That can be:

#lista1 .als-item a {
     color: #0871B9;
     font-family: Arial,Helvetica,sans-serif;
     font-size: 12px;
     font-style: normal;
     font-weight: bold;
     line-height: 18px;
     text-decoration: none;
}

Next html-error!

  • Line 152, Column 80: there is no attribute “height”

This line is:

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="65">

But a <table> cannot get a height in the html. So the html can be:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

Now the height of the table-cells <td> can be added in the css:

#als-wrapper_0 td {
height: 65px;
}
  • Note: all tables in the menu have the height-error, but the html-validator is seeing only the first one!

Now only 3 errors remain.

[LIST]
[*]Line 236, Column 71: document type does not allow element “div” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag[/LIST]
The construction over here is:

<p class="s14">
<!-- AddThis Follow BEGIN -->
	<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
		<a class="addthis_button_facebook_follow" addthis:userid="centreholidays"></a>
		<a class="addthis_button_twitter_follow" addthis:userid="centreholidays"></a>
		<a class="addthis_button_google_follow" addthis:userid="+centreholidays"></a>
		<a class="addthis_button_youtube_follow" addthis:userid="centreholidaysinc"></a>
		<a class="addthis_button_pinterest_follow" addthis:userid="centreholidays"></a>
		<a class="addthis_button_compact"></a>
		<a class="addthis_counter addthis_bubble_style"></a>
	</div>
	<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=centreholidays"></script>
<!-- AddThis Follow END -->
</p>

But a <div> is a “block level” element, and is not allowed inside a <p> element.
While I don’t see any difference if the <p> tag is omitted, you can remove the <p class=“s14”> and his </p>.

Two errors to go!

  • Line 237, Column 58: there is no attribute “addthis:userid”
<a class="addthis_button_facebook_follow" addthis:userid="centreholidays"></a>

And also in the following lines there is an addthis user-id attribute.
I’m afraid this cannot be missed: in this way an embedded javascript of addthis.com is recognizing the site. It’s not correct html, but it’s not your error, and it doesn’t harm the page.
So this error is something to live with.

One error to consider!

  • Line 289, Column 134: “allowfullscreen” is not a member of a group specified for any attribute
<div class="section-image">
    <iframe width="496" height="374" src="//www.youtube.com/embed/DNQPQ3DHeug" frameborder="0" allowfullscreen></iframe>
</div>

Yes, this is a part of the embedding code that YouTube is delivering. It is not valid xhtml, while in the last whatwg-standards it is allowed ([U]see here[/U]).
But if I remove the allowfullscreen and do this …

<div class="section-image">
    <iframe width="496" height="374" src="//www.youtube.com/embed/DNQPQ3DHeug" frameborder="0"></iframe>
</div>

… then the video can be played fullscreen as well. :slight_smile:


BTW: The links of the slider images are empty at the moment.

Hi Francky,

Thanks for the help. Question though about the <li> tags as I was hoping to have the entire block clicked in order to scroll down. I was also wondering how I could get the text to center vertically. Take a look at the following page if you can and let me know what I can edit in the css as well as in the <ul> <li> area.

http://www.vacationatsandals.ca/index.php

This is the code I currently am trying for the <li>

<li class="als-item">
<a href="#sandalsresorts" class="topLink"><div class="als-lista-url">Sandals Resorts</div></a>

Yes! I just saw it happen under my eyes: {display: table-cell;} with {vertical-align: middle;}. :slight_smile:

Yup that works but unfortunately bugs out in IE.