Problems opening in IE

[JohnDAnims]

I'm making a site for someone and I'm using CSS for the first time. Everything;s went well and I've got the site in a test directory on the server. I've tested it in Firefox, Chrome and IE. Everything works fine in the first two but I'm having problems opening it in IE.

When I go to it in IE through the address bar it opens up fine but whenever I click on any links in the pages it doesn't load the whole page. Sometimes it only loads the title, sometimes it only loads the title and the links. Sometimes it loads everything except a couple of images. It always has the little ! triangle in the status bar when this happens. Everytime this happens though and I click on refresh in the browser it loads up perfectly fine with no problems, but then I'll click on a link and the problem occurs again. Like I said all works well in the other two browsers I've tried it in but the problems only occuring with IE. Each version I've tried it in is the most up to date.

Are there any known issues in the code that I can use to help this problem?

EDIT: Tested it on Safari and Opera now too and it works on them perfectly. Still got the IE problems though.

[drhowarddrfine]

IE is, by far, the worst browser on the planet so it's not at all unusual for one to have problems with it but, without a link, any advice we would give would just be a wild guess.

[JohnDAnims]

Am I allowed to post a link here? I read on one of the stickies that I'm not.

[drhowarddrfine]

You might be right. In that case, you'll have to post the entire markup.

[JohnDAnims]

One other problem is that I can't be 100% sure if it's the CSS or the HTML that the problem lies. I'll PM you the address so that you can have a look at it if you think you can help. If you need any code then let me know.

[StoutFiles]

I would use the w3 validator and get your code validated. That usually solves most of the problems.

[JohnDAnims]

I've already tried that. Had a few minor issues that I fixed but still having the same problem.

[JohnDAnims]

I'll PM you the address so that you can have a look at it if you think you can help.

Let me know if you got it OK. I'm not sure if it sent right or not.

[rocknbil]

It always has the little ! triangle in the status bar when this happens.

If the pages validate, examine this a little more closely. What Javascript are you using on the page? If it's designed to show/hide content or load content dynamically, this is your problem.

IE is not very helpful in debugging JS, so turn to FF for this, examine the Error Control panel. If it's fine in FF (no JS errors) often it's just "where" you're calling the JS on the page that causes IE to misbehave.

[JohnDAnims]

I'll post the code that has the js declaration parts in it and you can have a look at it and maybe help me. I'm not home right now so I'll post it when I get in if you can have a look over it for me.

How do I "examine the Error Control panel"?

I tested it on the PC I'm on just now which has an older version of IE. The first page opened alright at first but when I clicked on some links it loaded part of the page then came up with an error message saying it can't open the page. Then it opens a generic IE can't open web page page. From then on the first page wasn't opening just like the others.

[Fotiman]

Typically, the little triangle in the status bar in IE indicates a JavaScript problem. Usually, double clicking on this will popup the dialog where you can get more info about the error, including line number. It's possible that there is a JavaScript error that only affects IE, or that other browsers simply handle the error better.

When this happens and the page appears broken, if you View Source, does it show the entire markup of the page in the source? If so, that probably means a client side error, but if you View Source and it's not a complete HTML document, that might indicate some server problem (is this using any server side languages like PHP or ASP?).

For more help debugging scripts in IE, make sure you go to Internet Options and in the Advanced tab look for 2 checkboxes:
Disable script debugging (Internet Explorer)
Disable script debugging (Other)
Make sure those checkboxes are NOT checked.

[rocknbil]

How do I "examine the Error Control panel"?

This may be a "red herring", so don't put much time into it. If it's displaying properly in FF it may not show an error, it is only to verify there are no errors in FF, which will not display an error alert by default. And sorry, I mis-quoted it, it is "Error Console", not error control panel; it should be located under the tools menu in FF.

FireFox Error Console [developer.mozilla.org]

[JohnDAnims]

I'll just go through the differnt suggestions that you've all made and you can have a look and see what you think of my results. Thanks for the help so far by the way guys. Much appreciated.

The Error Console had nothing in it on FF for this site. It came up with one warning but it was for something in Gogle. I cleared the list and refreshed the page and there was no new warnings.

Disable script debugging (Internet Explorer)
Disable script debugging (Other)

The "other" was already unchecked but I tried unchecking the "IE" one and it's not making any difference to the page.

if you View Source, does it show the entire markup of the page in the source?

Sometimes it does and sometimes it doesn't. It seems to cut it off at line 46 or so the few times that it has been cut off. Othertimes when I refresh it shows it all when I view code but I'm still not able to view the whole page in the browser.

Usually, double clicking on this will popup the dialog where you can get more info about the error

Here's what it says when I do this.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SIMBAR={F3F78FBF-F411-49B0-80B4-D8828AB65FDD}; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 2.0.50727; .NET CLR 1.1.4322)
Timestamp: Mon, 15 Mar 2010 22:41:46 UTC


Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0
URI: [page address]

Not really sure what to do with that info.

What Javascript are you using on the page?

Here's the parts of the HTML that mention the java scripts, as well as declaring the css scripts.

<script type="text/javascript" src="banners.min.js"></script>
<script src="Menu.js" type="text/javascript"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link href="css/sitelayout.css" rel="stylesheet" type="text/css" />
</head>

The Menu one is for my Flash content and is a bit of code that I've used a number of times on other sites I've made with no problems so I don't think that's the problem.

The others are for two things I've not used before. One's lightbox for displaying pictures in a gallery, which you're probably familiar with as I've seen it used a lot, and the other is for displaying a random rotating banner ad at the top of the page. Both of these were pretty much downloaded and used straight from the net with the odd changes here and there where need be, but the basic working structure kept the same.

Here's examples of where I've used them on pages.

<div id="banner"><p>ADVERTISEMENT</p>
<script type="text/javascript">
show_banners('top');
</script></div>
<div id="nav"><script type="text/javascript">RunMenu();</script></div>

<a href="gallery/construction1.jpg" rel="lightbox[construction]" title="Construction"><img src="gallery/constructionthumb1.jpg" width="100" height="40" alt="construction" /></a>

I think possibly the problems would be with the lightbox part more than the others as I had test pages up before with the random rotating ad and it seemed to be working fine. The lightbox stuff is the newest.

I'll try messing around taking the lightbox script out and seeing how it opens then. But if it is the problem I'd obviously like to work out a way of getting it to work right.

If anyone has any ideas in the mean time then let me know.

[JohnDAnims]

YEP! It's the lightbox java like I though. Thanks for suggesting it could be js based. I took out the following code from two of the pages from the section I posted above.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

After that I could jump back and forth between they two pages with no problems but still obviously had the same problem with the pages I didn't edit.

Problem is though I still want to use lightbox to open up the gallery images so how do I get this to work now?

[JohnDAnims]

Problem averted!

I did some searching around online and found that if I put the 4 lines of lightbox code at the bottom just before the

</body>

tag instead of in the head everything loads up the way it's meant to in IE. I did it and all is well. Tested it in the other browsers and it's working in them too. The lightbox code works fine in the gallery and everything. I've not had a chance to try it in the older IE yet but I'm sure it'll be fine...

Probably not the best bit of coding moving it from the head but at least it works now in all browsers.

Thanks for the help from everyone that gave sugestions. I just needed to know it was a problem with where the java script was possitioned and I was able to troubleshoot myself. Sometimes you just need that push. I guess this thread's in the wrong section of the site now though, but I never knew at the time.

[JohnDAnims]

Just as a side note, I tried the w3c validator again and it didn't like the

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

being all the way down there so I moved that part back up top and left the 3 js lines down bottom and all still works well and is validating nicely.

[drhowarddrfine]

That always belongs in the <head>

[Fotiman]

CSS belongs in the head. Scripts belong at the very and of the document just before the closing </body> tag.