PDA

View Full Version : Problem with IE 7 & JavaScript code



andernew
08-11-2007, 06:31 PM
I am assisting a friend who is a photographer to build her website and we are using a code from one of her professor's sites as the basis for her menu. The problem I am having is that the menu is not displaying properly using IE 7. I have not noticed any problems with Mozilla or IE 6. The problem is that the names do not line up with the drop down area when using IE 7 and I am unsure where the error might be.

Can anyone help me?

The site is http://www.photosbyjlynn.com/test/main.html

Just take a look at the source code there and if you have any ideas I would love the help.

jscheuer1
08-12-2007, 05:56 AM
The easiest road home would be to throw all browsers into quirks mode by removing your DOCTYPE, as it looks like that is (for the most part) how the markup and code was intended to be rendered.

In other words, get rid of this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Replace it with:


<html>

There are other ways, probably even (though not necessarily) better ways, but that is most likely the easiest.

Twey
08-12-2007, 06:30 AM
Doing so, unfortunately, should remove any hopes of having future-proof or cross-browser code you may entertain.

tech_support
08-12-2007, 07:20 AM
Or, you could add a comment tag right before the doctype, so it forces IE into Quirks Mode. (Though I'm not sure if this works in IE7)



<!-- Quirks Mode for IE - Dump IE now! -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

jscheuer1
08-12-2007, 03:43 PM
Doing so, unfortunately, should remove any hopes of having future-proof or cross-browser code you may entertain.

Did you see the code? It's all tag soup and outdated javascript. 'Abandon all hope, Ye who enter here'.


Or, you could add a comment tag right before the doctype, so it forces IE into Quirks Mode. (Though I'm not sure if this works in IE7)



<!-- Quirks Mode for IE - Dump IE now! -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

That does appear to (in limited testing here, just now) still do it in IE 7.

andernew
08-12-2007, 07:47 PM
I can't lie. I am not suprised it is tag soup. I am by far and wide an amatuer at coding. Thank you all for the ideas and if you think of anything else please dont hesitate to let me know. I will try the ideas as soon as I am back at my testing setup. Again, I appreciate the help alot.

Twey
08-12-2007, 08:39 PM
The validator (http://validator.w3.org/) would be a good starting point to fixing your pages. Aim for HTML 4.01 Strict.

jscheuer1
08-13-2007, 02:57 PM
The validator (http://validator.w3.org/) would be a good starting point to fixing your pages. Aim for HTML 4.01 Strict.

That is one very good way to get started toward understanding and implementing good standards compliant cross browser code. But, it isn't a simple process, no matter how one goes about it.

That fact is no reason not to pursue such a goal. I think Twey and I, as well as others would be willing to help along the way by answering specific questions toward that end.

I would like to add that I had my tongue in my cheek when I typed:


'Abandon all hope, Ye who enter here'.

For two reasons - code like that, or at least not too dissimilar than that could stand the test of time, and (somewhat conversely) no matter how bad the code is, there is no reason why it couldn't be made standards compliant, should you choose to do so and applied yourself to that objective.

andernew
08-27-2007, 07:42 AM
Ok so I chose HTML 4.01 Transitional and have gone through the code to fix it up a bit. I have tested it on Firefox and so far it looks fine in IE to me. Will you guys please give it a run through and see if you find anything? I would really appreciate the help.

Ok I did some more editing to clean up a bit of code and found that if I remove the doctype I get the results I want from the top. The rest of the document is html 4.01 transitional validated except that part. Any ideas?

Newt

jscheuer1
08-27-2007, 02:07 PM
DOCTYPE Override in effect!

The DOCTYPE Declaration for "HTML 4.01 Transitional" has been inserted at the start of the document, but even if no errors are shown below the document will not be Valid until you add the new DOCTYPE Declaration.

With that, it would be valid HTML 4.01 Transitional. There are some problems. In FF use:

tools > error console

to see some suggestions.

You can also view this page (css validator):

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.photosbyjlynn.com%2Ftest%2Fmain.html

andernew
08-27-2007, 04:07 PM
I noticed that when I included the code that states that it is HTML 4.01 Transitional in the header it is stopping IE 7 from reading the code correctly and is causing the original error again. If I leave it off it seems to be doing fine.

jscheuer1
08-27-2007, 04:56 PM
That was already covered in this thread, you can use:


<!-- This comment throws IE into Quirks Mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head> . . .

However, the more forward looking solution would be to learn how to use IE version specific conditional comments with tailor made additional styles. Or better still, though not always possible, find an alternate way to write your markup and/or styles so that you don't need a separate track for IE 7.

andernew
08-29-2007, 12:18 AM
Hey thanks a ton for the help. I got the site setup to work the way we wanted and it is in much better shape I would say because of your guys help. Thanks again for taking the time to guide me through this.

Newt