Fair enough.
If you are trying to add functionality (such as a responsive design) to the site, then it is doubly important to get the page validating first, otherwise you simply don’t have a decent foundation to build on.
Let me know how you get on.
Hi Pullo.
Got it down to 38!
The rest of them is about obsolete tags but I’m not sure how to replace them, and some of them I don’t understand.
Hey,
Well done!
I’m still at work right now, but can help you with the rest of the errors over the weekend.
Regarding these kind of errors:
The width attribute on the table element is obsolete. Use CSS instead.
Try taking the attributes off of the elements and setting them in CSS instead.
e.g.
<table width="343" border="0">
becomes:
.myTable{
width: 343px;
border-collapse:collapse;
}
<table class="myTable">
These links might help:
I see, thanks a lot. Will work on that meanwhile waiting for saturday. Cheers!
Ok down to 2 errors (can’t believe it)
These I seriously don’t have a clue about what’s wrong
If this is the only page using
<!-- Begin MailChimp Signup Form -->
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:208px;}
</style>
try moving that block out of the body tags and up into the head tags. If more than one page (and even if not) better to put it into a seperate CSS file.
Hi,
If you are going to declare an HTML5 doctype, you can do:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
This error:
Line 327, Column 23: Element style is missing required attribute scoped.
means that you cannot have a <style> tag in that position. Just move it to the head of the document.
The error:
Bad value x-ua-compatible for attribute http-equiv on element meta.
can be solved by wrapping it in a <!–[if IE]> tag.
<!--[if IE]>meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" /><![endif]-->
Et voilà, you have a valid HTML5 document.
Now for the next step.
I’ll move the CSS to the head of the document and the JS to the bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta tags>
// STYLESHEETS HERE
</head>
<body>
//CONTENT HERE
// JAVASCRIPT HERE
</body>
</html>
I’ve also removed the commented out code. You don’t need this. this is what version control is for.
And I’ve made a brief attempt to indent things correctly, as this will save us headaches, too.
You can find the code here.
So, the next thing is to disable any plugins you can via the CMS (temporarily of course).
These sometimes add inline styles or JS to a page which we are now going to try to remove.
With that done, let’s start with the CSS.
Make yourself a sheet called styles.css or something and add it to your page.
<link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/ssi/styles.css" media="screen"/>
Then whenever you see an inline style attribute you need to remove it:
<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>
and add it to styles.css instead:
<div class="login-button">
Travel Club Login
<span onclick="$('loginsection').hide();">X</span>
</div>
.login-button{
background-color: #C85A17;
color: #FFFFFF;
text-align: left;
font-weight: bold;
padding: 2px;
}
.login-button span{
position: relative;
left: 150px;
cursor:pointer
}
I know this might seem a mission, but separating the components of your web page like this, really increase maintainability and also ease debugging when things go wrong.
Let me know how you get on.
Hi Pullo, thanks for the tips.
I opened your page with IE and it is broken.
At the moment it works for me on the website with all the browsers so I’m not really gonna touch it if it’s not safely going to work on every browser.
How do you suggest going forward?
I don’t have IE, so cannot test so easily, but if you can define “broken” that would help.
I didn’t really do anything in the final step that would have broken it (although you could try removing the conditional tags around the x-ua-compatible meta tag).
Did you check it after you had made your changes yesterday (so before you made post#105)?
I checked it before changing anything and it looks like this
https://imagizer.imageshack.us/v2/70x70q90/c/673/YnAT7y.png
I cant really see the screenshot (on the ipad at least), as the resolution is poor.
But you’re saying the initial changes I made broke things?
(Which is entirely possible).
No on chrome it looks fine Pullo, it’s just IE and firefox not displaying the page correctly.
Ok, well I’ve got FF.
When did you notice it was broken?
Was it after my initial changes, your changes, or my final changes?
So, after you started making changes, did you check if the site previewed ok?
The fact that it is broken is not in dispute. It’s just moderately helpful to establish when it happened.
Hi Pullo. Like ai said I’m just clicking on the link you provided and it ain’t working on firefox/IE. I didn’t change anything and I wouldn’t be able to anyway.
Regarding my site, no I didn’t check while validating but it’s only Firefox that it’s not working on it for some reason! IE works, Chrome works and safari I don’t know.
What I would probably do now is to ask in the CSS forum if someone can help fix it.
It might be a simple (or at least simple-ish) fix.
If that doesn’t work, I guess we can go back and find out exactly where it broke and see what can be done.
Yeah I’ve done that meanwhile and will wait on them for an answer, thanks for the tips. It helped a lot correcting the load of errors.
Just one thing left now, the searchbox.
I can see there’s an iframe and a script controlling its size, but it won’t resize correctly in my opinion it’s better off without it.
Other pages are without iframe, the searchbox design is directly on the page.
this page for example has the searchbox without iframe http://www.sntravel.co.uk/location/735/north-america/caribbean/jamaica