PDA

View Full Version : CHARSET BIG PROBLEM:eek::mad:

itsme
02-13-2008, 04:32 AM
HI ! I open a new thread for a new question :
By validating my html code yesterday with W3C validator, I bumped into the following :. The problem started when I modified my
<meta http-equiv= from "Content-Type" to "Content-Script-Type". The validator first told me that because I had JS in my code, I had to change it to "Content-Script-Type".
After this first modif it came up that then my Charset was not correct anymore and so that instead of having charset=iso-8859-1
I should have charset=utf-8
BUT today I revalidated my code and a HTML code checker reports that I should have the iso 8859-1 instead.
Well, I seriously need help, because I do not understand what I really have to do .
Thanks very very muchh fpor your precious help !
Jazajay
02-13-2008, 07:28 PM
Stick your js in an external file, which is good practise, then use content-type charset iso......
That will fix the issue
Did you use the w3c validator the second time?
itsme
02-14-2008, 02:00 AM
Yes I did, So I put the js on an external file ok. But I have a few question to be sure :
The js by the way concerns jpgs and js scripts are disseminated here and there in the code. The Js was automatically generated by PSD and Image Ready. Is there a tutorial or a link to do what you advise ? I am afraid to mess up with the all thing. I can load js external files with AS ( Yes I should have started to learn the opposite way ) but not from HTML...
Thanks :-))
Jazajay
02-14-2008, 02:45 AM
I cant see it being a problem.
Just copy the page as in save it as file2, so you have to copies of the orginal page. Take the JS out of the new file2 and put that JS in to a blank file call it
itsme.js and link it in via -
<script type="text/javascript" src="file/to/itsme.js"></script>
It should work fine as it is still on the page, as such, does that make sense?

Load file2 to the server and the new js see if it works, obviisly put the right file path in and if it does, sorry when it does, remane file2 to file1, the orginal page name anyway. Change the content type job done.

Thats long winded but I said split it just incase for some unkonwn reason it doesn't work you still have your orginal one as a back up.

jaza
itsme
02-14-2008, 03:37 AM
Ok I'll do that right now. I apologize at first because I realize that I am really a very newbie on that matter.
Can you tell me please if I catch well where my JS is located:
HERE I THINK NO PROBLEM, IT LOOKS ALL JS:
<script type="text/javascript">
//<![CDATA[
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
agency_over = newImage("images/agency-over.jpg");
Hotel_photography_over = newImage("images/Hotel-photography-over.jpg");
Lifestyle_photography_over = newImage("images/Lifestyle-photography-over.jpg");
Photography_book_over = newImage("images/Photography-book-o.jpg");
Calendar_over = newImage("images/Calendar-over.jpg");
photography_over = newImage("images/photography-over.jpg");
travel_photography_over = newImage("images/travel-photography-over.jpg");
Enter_Site_over = newImage("images/Enter-Site-over.jpg");
preloadFlag = true;
}
}
</script><!-- End Preload Script -->

BUT HERE IS WHAT IS IN THE BODY OF MY CODE : //IS THIS ALL HTML ?? OR THE onmouseover IS ALSO JS ??
// -->
//]]>
<body onload="preloadImages();">
<!-- ImageReady Slices (index.psd) -->
<table width="100%" border="0" align="right" cellpadding="0" cellspacing="0" bgcolor="#000000" id="Table_01">
<tr>
<td height="5%" colspan="38" bgcolor="#000000"> </td>
</tr>
<tr>
<td height="5%" colspan="18" bgcolor="#000000"> </td>
<td colspan="2" rowspan="2"><img src="images/jetty.jpg" alt="hotel photography 1" name="Jetty" id="Jetty" title="hotel photography 1.jpg " width="112" height="76" /></td>
<td width="0%"><img src="images/spacer.gif" width="1" height="37" alt="" /></td>
</tr>
<tr>
<td colspan="11" rowspan="4" bgcolor="#000000"> </td>
<td colspan="4" rowspan="3" bgcolor="#000000"><img src="images/2-waiters.jpg" alt="lifestyle photography" name="waiters" id="waiters" title="lifestyle photography 2.jpg" width="110" height="76" /></td>
<td colspan="3" rowspan="2"> </td>
<td colspan="4" rowspan="11" bgcolor="#000000"> </td>
<td colspan="4" rowspan="3"><img src="images/S-island.jpg" alt="S photography 1" name="Sisland" id="Sisland" title="Sisland photography" width="112" height="76" /></td>
<td colspan="10" rowspan="5"> </td>
<td height="6%"><img src="images/spacer.gif" width="1" height="39" alt="" /></td>
</tr>
<tr>
<td height="0%" colspan="2"><img src="images/index_11.gif" width="112" height="2" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="9"> </td>
<td colspan="2" rowspan="4"><a href="/services.swf" onmouseover="changeImages('photo_stock_agency', 'images/photo-stock-agency-over.jpg'); return true;" onmouseout="changeImages('photo_stock_agency', 'images/photo-stock-agency.jpg'); return true;" onmousedown="changeImages('photo_stock_agency', 'images/photo-stock-agency-over.jpg'); return true;" onmouseup="changeImages('photo_stock_agency', 'images/photo-stock-agency-over.jpg'); return true;"><img src="images/photo-stock-agency.jpg" alt="Photo Stock enter Services " name="photo_stock_agency" width="111" height="75" border="0" id="photo_stock_agency" /></a></td>
<td width="0%" rowspan="9"><img src="images/index_14.gif" width="2" height="160" alt=""/></td>
<td height="4%"><img src="images/spacer.gif" width="1" height="35" alt="" /></td>
</tr>
</body>
Jazajay
02-14-2008, 03:45 AM
Right I'll try to give you a better reason as why it's not validating. This is because as I said it's processing the page and it's coming across characters that shouldn't be their/not aloud in XHTML - : ; & for example.

They should be in their encoded form ie "& = &amp;" for them to validate. If you did that your JS would not work as it would process the code incorrectly. It's saying it needs to be UTF-8 as UTf-8 is a international way of displaying special characters. So as those characters shouldn't be there the validater is telling you UTF-8 needs to be on the page so the browser knows how to handle them when it parses them.

Ideally you want to put your JS in a separate sheet for it 2 validate.

But you can comment it out.
the old way of

<script language="javascript">
<!--
js code
-->
</script>

will not work in XHTML.
For you to get inline JS to work in a XHTML document
you need to do this

<script type="text/javascript">
<!--//--><![CDATA[//><!-
your javascript goes here
//--><]]>
</script>

Long winded I know but hay thats the new proper way.

Ok I 'll take a guess and say you need the new html tag way of doing things. - no offence is meant by that :)
the old way

<html>
....
....
....
</html>

the new way

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
...
...
...
</html>

Ok this basically says
1. Any XML code is w3c complaint/processed how they recommend. I think I use very little XML and what I use is AJAX related.
2. Any XML code should be processed in English not Frence or Spanish etc...
3. The language for this page is English again not Frence or Spanish etc...
4. and the text for this page is read from left to right not right to left as in Arabic\Asians texts.

Congrats on moving over to the new spec and I hope this will be able to help you keep working through those errors.

Jaza
Jazajay
02-14-2008, 03:57 AM
Ok itsme
no worries we all start some where it's totally fine don't worry.
Inline javascript looks like this
<script type="text/javascript">
javascript goes here
</script>
ok now the mouseover is a javascript event handler that activates the right Javascript function when the link is hovered over.

XHTML does not allow on any thing - onmouseover, onclick etc... in the actual HTML.
What you have to do is learn DOM scripting. This allows the JS to do the onmouseover stuff w/o needing to specify the actual event handler - onclick, onmouseover, onchange etc..

This is done via a sperate page and modifying the DOM - via addEventListenter and AddEvent - The Dom is what the browser uses to do it's stuff. simplified but thats what it does.

I would suggest you learn HTML sacrifce validation or use the html transnational doctype, which allows onmouseover etc.. in the HTML until you have learnt DOM scripting.

change your current doctype to this and leave onmouseover in the HTML-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

I'm good, granted, but not good enough to go through all DOM 1 and 2 in 1 post
I know that seems a lot of work but I tought myself it's very easy just pick up a few books.

I would start with html and css
the head frsit XHTML and CSS is a great begginners book. I used it.
Follow that up with beggining Javascript with DOM scripting and AJax - I knew no Javascript before I read that book and you will be laughing

Also

// -->
//]]>

needs to be on this side of the

</script>

If you need programming help I would recommend you sign up to the
devshed dot com You never know I might pop over and give you a hand as I'm a member - I get every where.
They deal with all things coding and answers are around 2 mins to your questions.

Jaza
itsme
02-14-2008, 04:44 AM
Before going on with the DOM thingy, I just changed
<html xmlns="http://www.w3.org/1999/xhtml"
to <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> and d8 outlines it in red mentionning that the xml lang is not supported by many browsers...
Is it really necessary to put it ?
itsme
02-14-2008, 04:51 AM
DOM...no, I can not study that now...I think I am just gonna take these DOM scripting. Pityfull, but necessary for now I guess.
So, to sum up I use
1//<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en" dir="ltr">
2//put the JS in an external file and link it in via -
<script type="text/javascript" src="file/to/itsme.js"></script> in the HTML
Shall I let this in my HTML HEAD ?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
Jazajay
02-14-2008, 10:20 AM
1. d8?
Sorry I'm being thick.
I copied that straight from my home page as I was working on my site at the same time. I don't have issues. Let me know what the D8 is.

2. Yeah you don't have to call it itsme.js through anything can do as long as it is .js at the end :D
Just make sure that it is Javascript and not the event handlers - onmouseover

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

No that needs to be just

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

What this tag does is it tells the browser to parse the document as it is a html document. And that characters should be interpreted in Latin1 form. Basically don't worry about that.

You can change a document to be parsed as utf-8 from the off but that requires the knowledge to use it properly. I'm not fully sure about how to do that :D

I will soon but it entails a lot more than just changing a tag.

As the Javascript is now either commented out or external you wont need

<meta http-equiv="Content-Script-Type" content="text/javascript" />

Bare in mind in the external Js sheet because the file has a .js extension you don't need the script tags or the comment tags. Just write the Js straight in the file.

I would honestly check out the programming forum I mentioned.

Hope that helps.
It's good to see you are validating your code from the off. its a good practise to get in

Jaza
itsme
02-14-2008, 10:34 AM
hi again :-)
1- hm d8, sorry, so long to write it Dreamweaver 8
2- yes yes for the name of the js doc ( I am not that newbie :-)))))I guessed...
3-the utf-8 really stress me as it is now offi.validated. may'be if I take out the java script and everything related to it, the Charset iso-8859-1 will be ok..i will see.
By the js tags you mean
<script type="text/javascript">
//<![CDATA[
<!--
</script>
around my java script ?
So I start directly with
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
etc...
Yes I am gonna see further in JS :-((
I was not expecting this as this code mixed with js and html was automaticallt generated by Image Ready and Dreamweaver..
I thank you very much for all this great help and your time meanwhile you work ;-)
Jazajay
02-14-2008, 10:57 AM
O Dreamweaver :D
I use to use it before I switched to a free editor - coffeecup
They offer a paid one as well as a SEO friendly site map creater - paid version of $35. not $600

Dreamweaver is far superior if you are starting out though.

2. Sorry :)

3. By the tags I mean

<script type="text/javascript">
<!--//--><![CDATA[//><!-
your javascript goes here
//--><]]>
</script>

I imagine that was just a typo not to worry.

4. Automatically generated by Image Ready and Dreamweaver
O don't start D8's Js is by no means user-friendly haven't used image ready but I reckon the same is the case. Best bet learn it your self that's always my mentality. It's not hard as you think, as long as you don't jump to far ahead all at once. D8 puts a lot of bloat in the code. Don't get me wrong until you have coding under your belt it is a really good tool.

If the Js in in the external sheet you don't need any tags or commenting just JS.

If it's onpage you need scripts and commenting. The example above.

Take a look at
http://www.w3schools.com/js/default.asp
especially the left nav.

I thank you very much for all this great help and your time meanwhile you work ;-)

Dont worry I have 3 monitors and 4 hands. :D


Hope that helps
Jaza