Need a simple popup (modal, on-page-load with time-delay, fast & clean)

Hi Pullo, I forgot to mention you have to use http://www.sntravel.co.uk/switchview.pl?list=1 and click on main blocks

Ok, so now I’m seeing something similar.
It also occurs to me that some of the errors in the screenshot I posted last night were being caused by a browser extension I have enabled. These can be discarded.

Anyway, now we’re back to the state of post#35

I ran the page through the W3C Validator. It produced 177 errors
You have commented out code scattered through your page. This makes it hard to read.
You still have a fair amount of inline CSS / JS. This is also a maintainability nightmare.
You are also including libraries multiple times (e.g. pluit-carousel.js on line 325 and on line 326)

What you really need to do, is to tidy all of this up:

  • Correct the validation errors
  • Arrange your code properly (as detailed in post#53)
  • Remove the inline styles.
  • Remove the inline JS
  • Remove the commented out code.
  • Preferably use a more modern slider (one which doesn’t rely on the prototype library).

Then we will be in a position to see why your search function isn’t working.
My current best guess is that it has something to do with the aforementioned prototype library and jQuery being (or not being) in noConflict mode.

HTH

Thanks, will do :slight_smile:

Hi Pullo, I got it down to around 130 but they are errors I don’t really understand. Is there a better explanation than that? It has lots of similar errors so maybe finding one cause could clear lot more.

Ok then, let’s start off with this error:

No Character encoding declared at document level

Could you fix this please, then we’ll have a look at the next ones.

uhm the reason for that is it fixes IE10+ style. If I remove that it will break IE10

You don’t have to remove anything, you have to add a character encoding.
That shouldn’t break anything.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Declaring Character Encoding

This should be the line to edit

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" />

to this?

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9; charset=utf-8" />

Nope.
Just add the line I posted as the first thing inside your section.

The X-UA-Compatible meta tag you mention above, just allows web authors to choose what version of Internet Explorer the page should be rendered as.

I would also advise you to at least look at the link I posted.

Ok I added that now, by the way my style sheet sn.css has that encoding declared too

I don’t know, by validating it seems I made it worse, now firefox displays badly and IE10+ display some elements without some values.

I’m in between things right now, but you definitely need to declare a character encoding.
I’ll have a look at this this evening.

No worries, thanks

Ok then,

Let’s reduce the page to its bare minimum:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" />
    <meta name="description" content="SN Travel was born in September 1973, specialising in flights to the Caribbean. Book with confidence with our specialised Team!"/>
    <meta name="keywords" content="SN Travel, Caribbean Holidays, Antigua Holidays, Barbados Holidays, Cancun Holidays, Disney Holidays, Saint Lucia Holidays"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>

    <title>SN Travel (Stoke Newington Travel) - Caribbean Holidays and More...</title>

    <link rel="icon" href="http://static0.traveltek.net/images/www.sntravel.co.uk/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="http://static1.traveltek.net/images/www.sntravel.co.uk/favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/ssi/lightbox.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/ssi/lightwindow.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/pluit-carousel.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/sn.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/viewmybooking.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static0.traveltek.net/images/www.sntravel.co.uk/css/new_sn.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/sn-medium.css" media="screen and (min-width: 1600px)" />
    <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/sn-large.css" media="screen and (min-width: 1900px)" />
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/colorbox.css" media="screen"/>

    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/sn-ie.css"/>
            <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/new_sn-ie.css"/>
           <link rel="stylesheet" type="text/css" href="http://static0.traveltek.net/images/www.sntravel.co.uk/css/pluit-carousel-ie.css"/>
    <![endif]-->

    <style type="text/css">
      #navNew ul li ul {
        display: none;
        visibility: hidden;
      }
      #navNew ul li ul li:hover { background: #666; }
      #navNew ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
      }
    </style>
  </head>
  <body id="body">

  </body>
</html>

If we run that through the validator, it will validate as as XHTML 1.0 Strict!
Is there any reason you are using a Strict doctype?

Now let’s add a bit of content back:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" />
    <meta name="description" content="SN Travel was born in September 1973, specialising in flights to the Caribbean. Book with confidence with our specialised Team!"/>
    <meta name="keywords" content="SN Travel, Caribbean Holidays, Antigua Holidays, Barbados Holidays, Cancun Holidays, Disney Holidays, Saint Lucia Holidays"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>

    <title>SN Travel (Stoke Newington Travel) - Caribbean Holidays and More...</title>

    <link rel="icon" href="http://static0.traveltek.net/images/www.sntravel.co.uk/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="http://static1.traveltek.net/images/www.sntravel.co.uk/favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/ssi/lightbox.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/ssi/lightwindow.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/pluit-carousel.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/sn.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/viewmybooking.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static0.traveltek.net/images/www.sntravel.co.uk/css/new_sn.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/sn-medium.css" media="screen and (min-width: 1600px)" />
    <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/sn-large.css" media="screen and (min-width: 1900px)" />
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/colorbox.css" media="screen"/>

    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/sn-ie.css"/>
            <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/new_sn-ie.css"/>
           <link rel="stylesheet" type="text/css" href="http://static0.traveltek.net/images/www.sntravel.co.uk/css/pluit-carousel-ie.css"/>
    <![endif]-->

    <style type="text/css">
      #navNew ul li ul {
        display: none;
        visibility: hidden;
      }
      #navNew ul li ul li:hover { background: #666; }
      #navNew ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
      }
    </style>
  </head>

  <body id="body">
    <div id="header2">
      <div id="dvtoplinks">
        <strong>
          <div id="openinghours" class="toplinks openinghours">
            <b>Call Centre Opening Times:</b><br />
            Monday 9:30-17:30<br />
            Tuesday to Friday 09:30-17:30<br />
            Saturday 10:00-16:30<br />
            Sunday/Bank Holidays online only
          </div>

          <div class="toplinks" onmouseover="$('openinghours').setStyle({ display: 'block' });" onmouseout="$('openinghours').setStyle({ display: 'none' });">
            <a href="">Opening hours</a></div>
            <span class="toplinks"> | </span>
            <div class="toplinks"><a href="http://www.sntravel.co.uk/fusion/signup.pl">Register</a></div>
            <span class="toplinks"> | </span>
            <div class="toplinks"><a href="#" onclick="$('loginsection').slideDown();$('newsletterlink').hide();">SN Travel Club Login</a></div>
            <span class="toplinks"> | </span>
            <div id="loginsection" style="display: none;"><div id="login" align="center">
              <div style="background-color: #C85A17; color: #FFFFFF; text-align: left; font-weight: bold; padding: 2px;">Travel Club Login
                <span style="position: relative; left: 150px;cursor:pointer" onclick="$('loginsection').hide();">X</span>
              </div>
              <form method="post" action="https://secure.traveltek.net/fusion/login.pl" style="margin:0">
                <table width="25%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2">
                      <table width="100%" cellpadding="0" cellspacing="0" style="display:none">
                        <tr>
                          <td height="30" width="100%" valign="top" align="center"><p class="error"></p></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td width="50%"><input type="text" name="username" value="Username" onfocus="this.value='';" class="field"/></td>
                    <td width="50%"><input type="password" name="password" value="Password" onfocus="this.value='';" class="field"/></td>
                  </tr>
                  <tr>
                    <td colspan="2" align="right" style="padding: 0 5px 0 0;"><input type="hidden" name="action" value="login"/><input type="hidden" name="sessionkey" value=""/><input type="hidden" name="returnto" value="/"/><input type="submit" name="submit" value="log in &raquo;" class="btnLg"/></td>
                  </tr>
                  <tr>
                    <td colspan="2" align="right" style="padding: 10px 5px 0 0;"><a href="/fusion/signup.pl?sid=&sessionkey=&returnto=/" target="_top" class="btnSilver">Sign Up</a>&nbsp;<a href="/fusion/forgottenpassword.pl?sid=&sessionkey=&returnto=/" target="_top" class="btnSilver">Forgotten Password?</a></td>
                  </tr>
                </table>

                <input type="hidden" name="redirect" value="/homepage.phtml"/>
              </form>
            </div>
          </div>
          <div class="toplinks"><a href="http://sntravelblog.wordpress.com/" target="new">Travel Blog</a></div>
          <span class="toplinks"> | </span>
          <div class="toplinks"><a href="/contact-us.phtml">Contact us</a></div>
          <span class="toplinks"> | </span>
          <div class="toplinks"><a href="/about_us.phtml">About us</a></div></strong>
        </div>

        <div id="newsletterlink" style="display: none;">
          <div style="background-color: #C85A17; color: #FFFFFF; text-align: left; font-weight: bold; padding: 2px;">
            Newsletter Sign Up <span style="position: absolute; right: 10px;cursor:pointer" onclick="$('newsletterlink').hide();">X</span>
          </div>
          <div style="padding:10px;">
            <form onsubmit="return checkform();" action="/email_addnew.phtml" method="get" id="newsletter">
              <input type="hidden" name="listident" value="web-signups"/>
              <input type="hidden" name="createcustomer" value="Y"/>
              <table width="343" border="0">
                <tr>
                  <td><span style="font-weight:bold">Email Address:</span></td>
                  <td><input id="email" name="email" value="enter email" onClick="this.value=''"/></td>
                </tr>
                <tr>
                  <td><span style="font-weight:bold">First Name::</span></td>
                  <td><input id="firstname" name="firstname" value="enter first name" onClick="this.value=''"/></td>
                </tr>
                <tr>
                  <td><span style="font-weight:bold">Surname:</span></td>
                  <td><input id="surname" name="surname" value="enter last name" onClick="this.value=''"/></td>
                </tr>
              </table>
              <br /><input type="submit" name="signup" value="Sign Up Now" class="btnLg right"/>
              <div class="clear"></div>
            </form>
          </div>
        </div>

        <a class="headerImg" href="http://www.sntravel.co.uk/">
          <img src="http://static1.traveltek.net/images/www.sntravel.co.uk/logo.png" title="SN Travel Homepage" alt="SN Travel"/>
        </a>

        <div class="contact">
          <span class="callexpert">Call one of our experts:</span><br/>
          <span class="rTapNumber155757 tel" style="color:#ed9107;">020 7254 0136</span>
        </div>

        <div id="navNew">
          <ul>
            <li class="none"><a href="http://www.sntravel.co.uk/"><center>Home</center></a></li>
            <li class="none">
              <a href="http://www.sntravel.co.uk/flight.phtml"><center>Flight Only</center></a>
              <ul>
                <div id="flight" class="menu_dropdown2" style="width:180px;background-color:#AAAAAA;height:100px;position:absolute;z-index:9999;">
                  <div style="text-align:justify;padding-left:3px;padding-right:3px">
                    Join SN Travel Flight Club to get the cheapest Virgin &amp; BA flight only fares to the Caribbean.
                    <div class="box3">
                      <span style="color:#ffffff;">
                        <span style="font-size:16px;">
                          <a href="http://www.sntravel.co.uk/fusion/signup.pl">
                            <span style="color:#ffffff;">Click Here to Register</span>
                          </a>
                        </span>
                      </span>
                    </div>
                    Register to enjoy our exclusive Airlines Members Rates.
                  </div>
                </div>
              </ul>
            </li>
          <li class="none"><a href="http://www.sntravel.co.uk/holiday_executive_music_cruise.phtml">Music Cruises</a></li>
          <li class="none" id="menuDestinations">
            <a href=""><center>Destinations</center></a>
            <ul>
              <div id="main_destinations" class="menu_dropdown" style="width:800px;background-color:#AAAAAA;height:200px;position:absolute;margin-left: -303px;z-index:9999;">
                <div class="clear"></div>
                <div class="destination_box">
                <div class="destination_heading"><strong>Caribbean Holidays</strong></div>
                <div class="destination_box_content"><a href="/location/352/north-america/caribbean/barbados">Barbados</a></div>
                <div class="destination_box_content"><a href="/location/735/north-america/caribbean/jamaica">Jamaica</a></div>
                <div class="destination_box_content"><a href="/location/1475/north-america/caribbean/st-lucia">St. Lucia</a></div>
                <div class="destination_box_content"><a href="/location/9668/north-america/caribbean/antigua-and-barbuda">Antigua</a></div>
                <div class="destination_box_content"><a href="/location/9411/north-america/caribbean/trinidad-tobago">Tobago</a></div>
                <div class="destination_box_content"><a href="/location/5899/north-america/caribbean/grenada">Grenada</a></div>
                <div class="destination_box_content"><a href="/location/7832/north-america/caribbean/bahamas">Bahamas</a></div>
                <div class="destination_box_content"><a href="/location/5871/north-america/caribbean/dominica">Dominica</a></div>
              </div>

              <div class="destination_box">
                <div class="destination_heading"><strong>Florida Holidays</strong></div>
                <div class="destination_box_content"><a href="/location/1106/north-america/united-states/florida/orlando">Orlando</a></div>
                <div class="destination_box_content"><a href="/location/720/north-america/united-states/florida/international-drive">International Drive</a></div>
                <div class="destination_box_content"><a href="/location/8250/north-america/united-states/florida/florida-keys">Florida Keys</a></div>
                <div class="destination_box_content"><a href="/location/984/north-america/united-states/florida/miami">Miami</a></div>
                <div class="destination_box_content"><a href="http://www.sntravel.co.uk/holiday_walt_disney_world.phtml">Walt Disney World Resort</a></div>
                <div class="destination_box_content"><a href="/location/629/north-america/united-states/florida/fort-lauderdale">Fort Lauderdale</a></div>
                <div class="destination_box_content"><a href="/location/1560/north-america/united-states/florida/universal-orlando-resort">Universal Orlando</a></div>
                <div class="destination_box_content"><a href="/holiday_villas_condos.phtml">Florida Villas & Condos</a></div>
                <div class="destination_box_content"><a href="/location/782/north-america/united-states/florida/kissimmee">Kissimmee</a></div>
              </div>

              <div class="destination_box">
                <div class="destination_heading"><strong>USA Holidays</strong></div>
                <div class="destination_box_content"><a href="/location/1055/north-america/united-states/new-york-state/new-york">New York</a></div>
                <div class="destination_box_content"><a href="/location/854/north-america/united-states/nevada/las-vegas">Las Vegas</a></div>
                <div class="destination_box_content"><a href="/location/29207/north-america/united-states/massachusetts/boston">Boston</a></div>
                <div class="destination_box_content"><a href="/location/890/north-america/united-states/california/los-angeles">Los Angeles</a></div>
                <div class="destination_box_content"><a href="/location/1361/north-america/united-states/california/san-francisco">San Francisco</a></div>
                <div class="destination_box_content"><a href="/location/502/north-america/united-states/illinois/chicago">Chicago</a></div>
              </div>

              <div class="destination_box">
                <div class="destination_heading"><strong>Cuba Holidays</strong></div>
                <div class="destination_box_content"><a href="/location/689/north-america/caribbean/cuba/havana">Havana</a></div>
                <div class="destination_heading"><strong>Mexico Holidays</strong></div>
                <div class="destination_box_content"><a href="/location/12330/north-america/mexico/cancun">Cancun</a></div>
              </div>
              <div class="clear"></div>
            </div>
          </ul>
        </li>
        <li class="none">
          <a href="http://www.sntravel.co.uk/extras.phtml">Holiday Extras</a>
          <ul>
            <div id="holiday_extras" class="menu_dropdown" style="width:155px;background-color:#AAAAAA;height:90px;position:absolute;z-index:9999;">
              <div class="destination_box">
                <div class="destination_box_content" style="margin-bottom:5px">
                  <a href="http://app.holidayextras.co.uk/?agent=wc924" target="_blank">Airport Hotels &amp; Parking</a>
                </div>
                <div class="destination_box_content" style="margin-bottom:5px">
                  <a href="/extras_airport_lounges.phtml" target="_blank">Airport Lounges</a>
                </div>
                <div class="destination_box_content" style="margin-bottom:5px">
                  <a href="http://www.onlineticketstore.co.uk/?affiliate_id=stokenewingtontravel" target="_blank">Attraction Tickets</a>
                </div>
                <div class="destination_box_content" style="margin-bottom:5px">
                  <a href="http://sntravel.goldcover.net/" target="_blank">Holiday Insurance</a>
                </div>
              </div>
            </div>
          </ul>
        </li>
        <li class="none"><a href="http://www.sntravel.co.uk/contact-us.phtml">Callback Request</a></li>
        <li class="none"><a href="http://www.sntravel.co.uk/special-offers.phtml">Special Offers</a></li>
        <li class="none"><a href="https://secure.traveltek.net/SNT/fusion/viewmybooking.pl">Manage My Booking</a></li>
        <li class="none"><a  href="http://www.sntravel.co.uk/reviews.phtml">Our Reviews</a></li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
  </body>
</html>

When we validate that, we get 33 Errors, 11 warning(s).

The first one reads:

Line 49, Column 63: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag

This refers to this:

    <strong>
      <div id="openinghours" class="toplinks openinghours">

The document type you declared, doesn’t allow you to nest a div inside a <strong> tag.

We can fix this by getting rid of the tag and adding the following to the CSS:

#dvtoplinks{ font-weight: bold; }

Now revalidating only yields 25 errors.

The next one is:

Line 65, Column 81: there is no attribute "align"
…  <div id="loginsection" style="display: none;"><div id="login" align="center">

Let’s fix that by removing it.

Now we have 24 errors. The next two:

Line 75, Column 38: there is no attribute "height"
    <td height="30" width="100%" valign="top" align="cent…
Line 75, Column 49: there is no attribute "width"
…                <td height="30" width="100%" valign="top" align="center"><p cl…

Are fixed by removing the offending attributes.

There are now quite a lot of this kind of error:

Line 88, Column 114: cannot generate system identifier for general entity "sessionkey"
…0 0;"><a href="/fusion/signup.pl?sid=&sessionkey=&returnto=/" target="_top" cl…

These are being caused by you using the ampersand in urls. To solve, use &amp; in place of &.

Now we have:

Line 88, Column 153: there is no attribute "target"
…mp;sessionkey=&amp;returnto=/" target="_top" class="btnSilver">Sign Up</a>&nbs…

Again, because of the doctype. Removing it solves the problem.

The next (and several others):

Line 98, Column 96: document type does not allow element "input" here
…                 <input type="hidden" name="redirect" value="/homepage.phtml"/>

This is cause strict doctype not allowing input elements to be direct descendants of a form element.
This can be fixed by wrapping them in divs.

Doing so brings us down to 13 errors. The next:

Line 102, Column 87: there is no attribute "target"
…<a href="http://sntravelblog.wordpress.com/" target="new">Travel Blog</a></div>

Can be fixed by removing the target element.

The next:

Line 120, Column 84: there is no attribute "onClick"
…nput id="email" name="email" value="enter email" onClick="this.value=''"/></td>

Can be fixed by turning onClick into onclick.

The next:

Line 131, Column 22: document type does not allow element "br" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
                <br /><input type="submit" name="signup" value="Sign Up Now" cl…

Error Line 131, Column 98: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
… /><input type="submit" name="signup" value="Sign Up Now" class="btnLg right"/>

Can be fixed by removing the <br /> element and wrapping the input in <p> tags.

The next:

 Line 148, Column 76: element "center" undefined

Can be fixed using CSS:

  .center{ text-align: center; }

and removing the <center> tag.

The next:

Line 154, Column 148: document type does not allow element "div" here; assuming missing "li" start-tag
…h:180px;background-color:#AAAAAA;height:100px;position:absolute;z-index:9999;">

Can be fixed by adding a <li> tag:

<ul>
  <li>
     <div id="flight" class="menu_dropdown2">

Then we have another “center” error.

Then we have:

Line 177, Column 176: document type does not allow element "div" here; assuming missing "li" start-tag
…olor:#AAAAAA;height:200px;position:absolute;margin-left: -303px;z-index:9999;">

Which can be fixed by adding a <li> element

<ul>
  <li>
    <div id="main_destinations"

Then we have:

Line 201, Column 112: character "&" is the first character of a delimiter but occurred as data
…ntent"><a href="/holiday_villas_condos.phtml">Florida Villas & Condos</a></div>

Ampersand needs encoding.

Then you have another two missing <li> tag errors and four “no attribute ‘target’” error, which we now know how to fix.

Once we have done that, the document is valid!

Ha! I had to make a second post, as my previous reply was too long:


Here’s the complete code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" />
    <meta name="description" content="SN Travel was born in September 1973, specialising in flights to the Caribbean. Book with confidence with our specialised Team!"/>
    <meta name="keywords" content="SN Travel, Caribbean Holidays, Antigua Holidays, Barbados Holidays, Cancun Holidays, Disney Holidays, Saint Lucia Holidays"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>

    <title>SN Travel (Stoke Newington Travel) - Caribbean Holidays and More...</title>

    <link rel="icon" href="http://static0.traveltek.net/images/www.sntravel.co.uk/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="http://static1.traveltek.net/images/www.sntravel.co.uk/favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/ssi/lightbox.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/ssi/lightwindow.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/pluit-carousel.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/sn.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/viewmybooking.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static0.traveltek.net/images/www.sntravel.co.uk/css/new_sn.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/sn-medium.css" media="screen and (min-width: 1600px)" />
    <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/sn-large.css" media="screen and (min-width: 1900px)" />
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/colorbox.css" media="screen"/>

    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/sn-ie.css"/>
            <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/new_sn-ie.css"/>
           <link rel="stylesheet" type="text/css" href="http://static0.traveltek.net/images/www.sntravel.co.uk/css/pluit-carousel-ie.css"/>
    <![endif]-->

    <style type="text/css">
      #navNew ul li ul {
        display: none;
        visibility: hidden;
      }
      #navNew ul li ul li:hover { background: #666; }
      #navNew ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
      }

      #dvtoplinks{ font-weight: bold; }
      .center{ text-align: center; }
      }
    </style>
  </head>

  <body id="body">
    <div id="header2">
      <div id="dvtoplinks">
          <div id="openinghours" class="toplinks openinghours">
            <b>Call Centre Opening Times:</b><br />
            Monday 9:30-17:30<br />
            Tuesday to Friday 09:30-17:30<br />
            Saturday 10:00-16:30<br />
            Sunday/Bank Holidays online only
          </div>

          <div class="toplinks" onmouseover="$('openinghours').setStyle({ display: 'block' });" onmouseout="$('openinghours').setStyle({ display: 'none' });">
            <a href="">Opening hours</a></div>
            <span class="toplinks"> | </span>
            <div class="toplinks"><a href="http://www.sntravel.co.uk/fusion/signup.pl">Register</a></div>
            <span class="toplinks"> | </span>
            <div class="toplinks"><a href="#" onclick="$('loginsection').slideDown();$('newsletterlink').hide();">SN Travel Club Login</a></div>
            <span class="toplinks"> | </span>
            <div id="loginsection" style="display: none;">
              <div style="background-color: #C85A17; color: #FFFFFF; text-align: left; font-weight: bold; padding: 2px;">Travel Club Login
                <span style="position: relative; left: 150px;cursor:pointer" onclick="$('loginsection').hide();">X</span>
              </div>
              <form method="post" action="https://secure.traveltek.net/fusion/login.pl" style="margin:0">
                <table width="25%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2">
                      <table width="100%" cellpadding="0" cellspacing="0" style="display:none">
                        <tr>
                          <td valign="top" align="center"><p class="error"></p></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td><input type="text" name="username" value="Username" onfocus="this.value='';" class="field"/></td>
                    <td><input type="password" name="password" value="Password" onfocus="this.value='';" class="field"/></td>
                  </tr>
                  <tr>
                    <td colspan="2" align="right" style="padding: 0 5px 0 0;">
                      <input type="hidden" name="action" value="login"/>
                      <input type="hidden" name="sessionkey" value=""/>
                      <input type="hidden" name="returnto" value="/"/>
                      <input type="submit" name="submit" value="log in &raquo;" class="btnLg"/>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" align="right" style="padding: 10px 5px 0 0;">
                      <a href="/fusion/signup.pl?sid=&amp;sessionkey=&amp;returnto=/" class="btnSilver">Sign Up</a>
                      &nbsp;<a href="/fusion/forgottenpassword.pl?sid=&amp;sessionkey=&amp;returnto=/" class="btnSilver">Forgotten Password?</a>
                    </td>
                  </tr>
                </table>
                <div><input type="hidden" name="redirect" value="/homepage.phtml"/></div>
              </form>
            </div>
            <div class="toplinks"><a href="http://sntravelblog.wordpress.com/">Travel Blog</a></div>
            <span class="toplinks"> | </span>
            <div class="toplinks"><a href="/contact-us.phtml">Contact us</a></div>
            <span class="toplinks"> | </span>
            <div class="toplinks"><a href="/about_us.phtml">About us</a></div>
          </div>

          <div id="newsletterlink" style="display: none;">
            <div style="background-color: #C85A17; color: #FFFFFF; text-align: left; font-weight: bold; padding: 2px;">
              Newsletter Sign Up <span style="position: absolute; right: 10px;cursor:pointer" onclick="$('newsletterlink').hide();">X</span>
            </div>
            <div style="padding:10px;">
              <form onsubmit="return checkform();" action="/email_addnew.phtml" method="get" id="newsletter">
                <div><input type="hidden" name="listident" value="web-signups"/></div>
                <div><input type="hidden" name="createcustomer" value="Y"/></div>
                <table width="343" border="0">
                  <tr>
                    <td><span style="font-weight:bold">Email Address:</span></td>
                    <td><input id="email" name="email" value="enter email" onclick="this.value=''"/></td>
                  </tr>
                  <tr>
                    <td><span style="font-weight:bold">First Name::</span></td>
                    <td><input id="firstname" name="firstname" value="enter first name" onclick="this.value=''"/></td>
                  </tr>
                  <tr>
                    <td><span style="font-weight:bold">Surname:</span></td>
                    <td><input id="surname" name="surname" value="enter last name" onclick="this.value=''"/></td>
                  </tr>
                </table>
                <p><input type="submit" name="signup" value="Sign Up Now" class="btnLg right"/></p>
                <div class="clear"></div>
              </form>
            </div>
          </div>

          <a class="headerImg" href="http://www.sntravel.co.uk/">
            <img src="http://static1.traveltek.net/images/www.sntravel.co.uk/logo.png" title="SN Travel Homepage" alt="SN Travel"/>
          </a>

          <div class="contact">
            <span class="callexpert">Call one of our experts:</span><br/>
            <span class="rTapNumber155757 tel" style="color:#ed9107;">020 7254 0136</span>
          </div>

          <div id="navNew">
            <ul>
              <li class="none"><a href="http://www.sntravel.co.uk/" class="center">Home</a></li>
              <li class="none">
                <a href="http://www.sntravel.co.uk/flight.phtml" class="center">Flight Only</a>
                <ul>
                  <li>
                    <div id="flight" class="menu_dropdown2" style="width:180px;background-color:#AAAAAA;height:100px;position:absolute;z-index:9999;">
                      <div style="text-align:justify;padding-left:3px;padding-right:3px">
                        Join SN Travel Flight Club to get the cheapest Virgin &amp; BA flight only fares to the Caribbean.
                        <div class="box3">
                          <span style="color:#ffffff;">
                            <span style="font-size:16px;">
                              <a href="http://www.sntravel.co.uk/fusion/signup.pl">
                                <span style="color:#ffffff;">Click Here to Register</span>
                              </a>
                            </span>
                          </span>
                        </div>
                        Register to enjoy our exclusive Airlines Members Rates.
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            <li class="none"><a href="http://www.sntravel.co.uk/holiday_executive_music_cruise.phtml">Music Cruises</a></li>
            <li class="none" id="menuDestinations">
              <a href="" class="center">Destinations</a>
              <ul>
                <li>
                  <div id="main_destinations" class="menu_dropdown" style="width:800px;background-color:#AAAAAA;height:200px;position:absolute;margin-left: -303px;z-index:9999;">
                    <div class="clear"></div>
                    <div class="destination_box">
                    <div class="destination_heading"><strong>Caribbean Holidays</strong></div>
                    <div class="destination_box_content"><a href="/location/352/north-america/caribbean/barbados">Barbados</a></div>
                    <div class="destination_box_content"><a href="/location/735/north-america/caribbean/jamaica">Jamaica</a></div>
                    <div class="destination_box_content"><a href="/location/1475/north-america/caribbean/st-lucia">St. Lucia</a></div>
                    <div class="destination_box_content"><a href="/location/9668/north-america/caribbean/antigua-and-barbuda">Antigua</a></div>
                    <div class="destination_box_content"><a href="/location/9411/north-america/caribbean/trinidad-tobago">Tobago</a></div>
                    <div class="destination_box_content"><a href="/location/5899/north-america/caribbean/grenada">Grenada</a></div>
                    <div class="destination_box_content"><a href="/location/7832/north-america/caribbean/bahamas">Bahamas</a></div>
                    <div class="destination_box_content"><a href="/location/5871/north-america/caribbean/dominica">Dominica</a></div>
                  </div>

                  <div class="destination_box">
                    <div class="destination_heading"><strong>Florida Holidays</strong></div>
                    <div class="destination_box_content"><a href="/location/1106/north-america/united-states/florida/orlando">Orlando</a></div>
                    <div class="destination_box_content"><a href="/location/720/north-america/united-states/florida/international-drive">International Drive</a></div>
                    <div class="destination_box_content"><a href="/location/8250/north-america/united-states/florida/florida-keys">Florida Keys</a></div>
                    <div class="destination_box_content"><a href="/location/984/north-america/united-states/florida/miami">Miami</a></div>
                    <div class="destination_box_content"><a href="http://www.sntravel.co.uk/holiday_walt_disney_world.phtml">Walt Disney World Resort</a></div>
                    <div class="destination_box_content"><a href="/location/629/north-america/united-states/florida/fort-lauderdale">Fort Lauderdale</a></div>
                    <div class="destination_box_content"><a href="/location/1560/north-america/united-states/florida/universal-orlando-resort">Universal Orlando</a></div>
                    <div class="destination_box_content"><a href="/holiday_villas_condos.phtml">Florida Villas &amp; Condos</a></div>
                    <div class="destination_box_content"><a href="/location/782/north-america/united-states/florida/kissimmee">Kissimmee</a></div>
                  </div>

                  <div class="destination_box">
                    <div class="destination_heading"><strong>USA Holidays</strong></div>
                    <div class="destination_box_content"><a href="/location/1055/north-america/united-states/new-york-state/new-york">New York</a></div>
                    <div class="destination_box_content"><a href="/location/854/north-america/united-states/nevada/las-vegas">Las Vegas</a></div>
                    <div class="destination_box_content"><a href="/location/29207/north-america/united-states/massachusetts/boston">Boston</a></div>
                    <div class="destination_box_content"><a href="/location/890/north-america/united-states/california/los-angeles">Los Angeles</a></div>
                    <div class="destination_box_content"><a href="/location/1361/north-america/united-states/california/san-francisco">San Francisco</a></div>
                    <div class="destination_box_content"><a href="/location/502/north-america/united-states/illinois/chicago">Chicago</a></div>
                  </div>

                  <div class="destination_box">
                    <div class="destination_heading"><strong>Cuba Holidays</strong></div>
                    <div class="destination_box_content"><a href="/location/689/north-america/caribbean/cuba/havana">Havana</a></div>
                    <div class="destination_heading"><strong>Mexico Holidays</strong></div>
                    <div class="destination_box_content"><a href="/location/12330/north-america/mexico/cancun">Cancun</a></div>
                  </div>
                  <div class="clear"></div>
                </div>
              </li>
            </ul>
          </li>
          <li class="none">
            <a href="http://www.sntravel.co.uk/extras.phtml">Holiday Extras</a>
            <ul>
              <li>
                <div id="holiday_extras" class="menu_dropdown" style="width:155px;background-color:#AAAAAA;height:90px;position:absolute;z-index:9999;">
                  <div class="destination_box">
                    <div class="destination_box_content" style="margin-bottom:5px">
                      <a href="http://app.holidayextras.co.uk/?agent=wc924">Airport Hotels &amp; Parking</a>
                    </div>
                    <div class="destination_box_content" style="margin-bottom:5px">
                      <a href="/extras_airport_lounges.phtml">Airport Lounges</a>
                    </div>
                    <div class="destination_box_content" style="margin-bottom:5px">
                      <a href="http://www.onlineticketstore.co.uk/?affiliate_id=stokenewingtontravel">Attraction Tickets</a>
                    </div>
                    <div class="destination_box_content" style="margin-bottom:5px">
                      <a href="http://sntravel.goldcover.net/">Holiday Insurance</a>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li class="none"><a href="http://www.sntravel.co.uk/contact-us.phtml">Callback Request</a></li>
          <li class="none"><a href="http://www.sntravel.co.uk/special-offers.phtml">Special Offers</a></li>
          <li class="none"><a href="https://secure.traveltek.net/SNT/fusion/viewmybooking.pl">Manage My Booking</a></li>
          <li class="none"><a  href="http://www.sntravel.co.uk/reviews.phtml">Our Reviews</a></li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

There will be a couple of minor changes in your page as we did things like removing the target attribute. If you want to avoid this, it might be worth looking at using a more lenient doctype.

Now this is only the header of your site, but hopefully I have demonstrated how you will need to proceed.

I would suggest that you carry on with this, as a good first step towards getting things working.

Good luck!

Ok I’ve adapted the code to the blocks and understood about those errors, thanks a lot Pullo.

I will try and see what else happens but the java error is still there regarding the searchbox “Uncaught ReferenceError: jQuery is not defined”

Also in the validation there are lots of these errors:

Warning Line 294, Column 147: cannot generate system identifier for general entity "destair"
…e', '/tab_hotel_flight.phtml?country=&destair=', 'Holidays');"  checked="check…
✉
An entity reference was found in the document, but there is no reference by that name defined. Often this is caused by misspelling the reference name, unencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".

Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&amp;" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following text. Also keep in mind that named entity references are case-sensitive; &Aelig; and &aelig; are different characters.

If this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.

Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.

I don’t get this at all

I would imagine that it is the ampersand problem again.
http://www.htmlhelp.com/tools/validator/problems.html#amp

I know you’re keen to get the JavaScript (not Java!!) working, but we will get to that in time.
Let’s get the other errors sorted out first.

I would also recommend the approach I outlined - adding the markup piece by piece, initially leaving the Javascript out of the equation altogether.

is that &destair supposed to be & ? I think it’s a value, that’s what the CMS company told me

You need to change it to &amp;

Might I ask what your role is regarding this website?
Are you the website owner or did you make the website?
Or maybe both?

Hi Pullo, will do.

I manage the website for the company, but it was created by the CMS company they chose to use before I was employed in here, therefore I arrived with the website in a bad condition and trying since then to modify it and make it user friendly/responsive.