Need help with clean coding (site works in IE but not in netscape) 3

[CMD83]

Hi,

As the title says, I have a product site, using a template file and a seperate css. The site works like it should in IE, but when I run it in Mozilla it's messed up, plus there seems to be something wrong with the image scripts.

(don't mind the .php it's only used to fill out some {} and you won't notice in the output anyway)

http://caroline.mustbedreaming.com/EBT/index2.php

http://caroline.mustbedreaming.com/EBT/styles.css

any help would be much apreciated!

-----
I'm unique, just like everyone else...

 

[cLFlaVA]

[blue]int[/blue] is a JavaScript reserved word. Change it to init in all your JavaScript calls, as well as your id tag, or some other non-reserved word.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[CMD83]

Thank you! I changed it.

Though that seems to be the first of many clean coding errors.

It's still messed up in mozilla/netscape

-----
I'm unique, just like everyone else...

 

[LFI]

Something to clean things up would be to get rid of all those image OBJECTS. You only need the Strings which indicate their respective URLs.

example:

image1 = "/images/myImage1.jpg";

Then, fill the array with those:

Pic_360 = new Array(image1, ...)

Then, instead of making current_picture in slideshow() an Image object, just make it a String:

var picture_num = 0;
var current_picture = [b]Pic_360[picture_num][/b];
...
function slideshow() 
{
 picture_num++;
 if (picture_num == Pic_360.length) 
 {
  picture_num = 0;
 }

 [b]current_picture = Pic_360[picture_num];[/b]
 document["rotating_picture"].src = [b]current_picture[/b];
}

'hope this helps.

--Dave

 

[cLFlaVA]

Also, you're using the strict doctype. Yet, it's apparent you haven't run your code through a validator. Here, I've done it for you.

There are plenty of fixes needed, and I suggest you either perform these, or change the doc-type to transitional and then re-run it through the validator.

http://validator.w3.org/check?uri=http://caroline.mustbedreaming.com/EBT/index2.php

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[CMD83]

Dave,

I preloaded them, cause then the code wouldn't retrieve them each time it 'rotates'. I tried what you suggested, but then it stopped working for me:

http://caroline.mustbedreaming.com/EBT/index3.php

clFlava,

I did use the validator, fixed the things I could, but I didn't understand why some things where wrong, or how to fix these, I will try using doctype transitional now.
hold on.


-----
I'm unique, just like everyone else...

 

[LFI]

CMD83,

Thanks for trying my method. I think it will work if you change:

current_picture.src = Pic_360[picture_num];

...to:

current_picture = Pic_360[picture_num];

...(removing the .src from the left-hand-side). Remember, at this point, current_picture is a String, not an Image.

Also, I'm using IE6 and your original page was continuously downloading the images, even after a whole cycle through the 360 degrees.

--Dave

 

[CMD83]

Dave,

Thanks it is rotating now, but since it's not preloaded, it keeps loading them.

For you

http://caroline.mustbedreaming.com/EBT/index2.php

this one also keeps loading? That's weird.. for me it's not, it loads them all once, and then just 'rotates'.

clFlava,

I ran the validator, and I solved some errors, however there are a few I can't resolve, if you, or anyone could take a look I would really appreciate it.

for example, I use a javascript function to change the text for the sub-items of the bandagebox. (right below)
but it seems like I can't put it in this way:

Subnav.innerHTML="<span class=\"pos\"><em>Verband watten</em><br/><br/>Beschrijving van dit sub-<br/>produkt etc.</span>";

any way I can put those <br/> and <em> tags in there so that it is valid coding?

-----
I'm unique, just like everyone else...

 

[cLFlaVA]

Yup. What you'd want to do is the following:

<div>
  <div id="ital"></div>
  <div id="desc"></div>
</div>

And then your JavaScript could be:

var ital = document.getElementById('ital');
var desc = document.getElementById('desc');

ital.innerHTML = 'Verband watten';
desc.innerHTML = 'Beschrijving van dit sub-produkt etc.';

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[LFI]

CMD,

Yeah, the status bar keeps showing downloading is taking place and the spinning picture is very slow and very jerky.

However, I solved it for myself by changing the IMG tag in the HTML to this:

<script>
for(var i=0; i<Pic_360.length; i++)
{
 document.write('<img name="rotating_picture_'+i+'" src="'+Pic_360[i]+'" alt="Verbanddoos" width="200" height="176" style="display:none" />')
}
document["rotating_picture_0"].style.display='inline';
</script>

...and editing slideshow() to this:

function slideshow() 
{
 //before picture_num is incremented
 document["rotating_picture_"+picture_num].style.display='none';

 picture_num++;
 if (picture_num == Pic_360.length) 
 {
  picture_num = 0;
 }

 //after picture_num is incremented
 document["rotating_picture_"+picture_num].style.display='inline';
}

In either case, however, the ALT text of the IMG tags won't stay shown. I'm guessing you're less concerned about that, though.

--Dave

 

[CMD83]

Thank you both sooo much!!! It works great! ^__^
Also in Mozilla!

However I do keep 4 errors I can't seem to resolve in the validator:

http://validator.w3.org/check?uri=http://caroline.mustbedreaming.com/EBT/index2.php

any idea's on how to fix these, so I have clean code?

Thanks a bunch!!



-----
I'm unique, just like everyone else...

 

[LFI]

Well, I can't see what's wrong with the source code. The validator messages almost don't make sense.

The only thing that MIGHT possibly be affecting things is...

Try adding a space before the /> in:

<link rel = "stylesheet" type = "text/css" href = "styles.css"/>


...to:

<link rel = "stylesheet" type = "text/css" href = "styles.css" />

(Notice the new space toward the end).

The space is recommended because of a fluke in one of the browsers that has a problem with the close-tag symbol in singleton tags without that space. Perhaps the validator insists on it as well.

Let us know if you figure it out!

--Dave

 

[CMD83]

Thanks I added a space AND removed the closing /

I found this in their help:

Why doesn't the validator like my <link ... /> or <meta ... />?
HTML is based on SGML and uses an SGML feature (called SHORTTAG) (note that this is not the case with XHTML).

With this feature enabled, the "/" in <link ... /> or <meta ... /> already closes the link (or meta) tag, and the ">" becomes some regular text, which is not allowed in the <head> element. Since </head><body> is optional in HTML (again, not in XHTML), it is silently inserted, thus head-only elements like meta and style as well as "</head>" and "<body>", which may appear only once, become false.

(explanation courtesy of Christoph Päper)


2 down 2 to go ^^

I understand from what they say, that I can't place a DIV tag inside a SPAN?

Any idea's on how else to solve this?
(the span class pos, makes sure the text is shown right below (see the style sheet))

-----
I'm unique, just like everyone else...

 

[Vragabond]

You're right. XHTML documents have to be well formed and you cannot insert any element inside another. Div is a block level element, span, em and others are inline elements. You cannot wrap a box element inside and inline one.

 

[cLFlaVA]

Just to clarify what Vragabond was saying:

you cannot insert any element inside another

What he means by this is, you can't insert any random element inside another. Of course, nested elements are allowed, but in this particular case, you're trying to nest a block element <div> inside an in-line element <span>, and that is not allowed.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[CMD83]

Thanks for the confirmation!

I replaced span with div, and gave the ital div a class with the same effect as <em>

and guess what? All errors are gone ^________^ and the page looks just like I wanted (in both browsers )!!

Thanks a lot!

-----
I'm unique, just like everyone else...