[PROBLEM] Display issues on Internet Explorer only

Get Started
1

Hello,
I have display issues on Internet Explorer but not on Firefox or Chrome.

I really looked into it and can’t find the source of the problem.

I have two sites based on the same design, one in english and one in french, both have the same problem.

I’ll give you example pages only on the english site:

As you see on the front page the design is correct, notice the logo on top left and notice the width of the design, the two column, left and right are aligned with the header:

Now in all other pages, the design is broken, the logo doesn’t display anymore and the width of the content area (just after the header) takes 100% of the page width. It only happens (for me) on internet explorer, when viewing on firefox or chrome, everything displays fine:
http://shetoldme.com/Technology

I really don’t know where this problem comes from, I tried to check opening/closing html tags and can’t find anything wrong, but I do it by hand, I don’t know of any automated tool which could tell me if all my tags are closed properly, do you have any such useful tool to propose?

If you could have a look that would be very nice because I don’t think I can do anything more by myself, I’m really lost about why internet explorer is behaving like this.

Cheers,
James

2

Have a look at http://validator.w3.org/check?uri=http://shetoldme.com/Technology, which is picking up over 50 errors.

3

Thank you, I have fixed several typo errors which I thought could have been the reason, like a < \ / div> in a javascript code, and a double “” instead of a single one at another place.

But then it’s even worse, oveer 500 errors on http://validator.w3.org/check?uri=http://shetoldme.com/Games

I think it is the use of google’s mod page speed (http://code.google.com/speed/page-speed/) which removes a lot of double quotes in attributes, and I activated on my web host (dreamhost) I have them in my code but when the page is served a lot of them are removed.

Maybe I don’t use the proper doctype, I should use something less strict to avoid all those errors?

The thing is that I started noticed this behavior a few weeks ago, I looked for a reason but couldn’t find it. This tool you provided allowed me to notice and fix several errors, but as far as I can see the behavior is still happening.

Maybe the behavior comes from this mod page speed, at least it could be because I also activated it a few weeks ago, I don’t remember now if it was before or after noticing the behavior, but I guess if I had noticed it BEFORE activating mod page speed I would have looked to know if page speed corrected the problem, and I don’t remember thinking about that, so most probably I activated mod page speed before noticing the behavior…

So that could come from that, I should switch it off and check.

4

At the present moment many of the errors are due to on the page javascript being treated as html. You can ignore these “errors”.
Also lines like this
<img src=“http://www.shrinktheweb.com/xino.php?embed=1&STWAccessKeyId=759a5497ff51041&Size=lg&stwUrl=http://hubpages.com/hub/No-Smoking-Law-in-Spain” style=“border: 1px solid #eef;” width=“200” height=“150” alt=“No Smoking Law In Spain” border=“0” /> confuse the validator, but are not errors.

Display errors are not related to the above errors.

but I don’t see any display errors when using IE7 or IE8 compared to FF

5

Google’s mod; is not suitable for XHTML grammar it destroys things and it is basically designed for HTML5 or people who don’t give a damn about markup.

That mod strips things such as required attributes and tends to convert images to base64. I have seen it cause a lot of damage to various websites and really mangle syntax.

6

I’m not seeing quite as many errors as that - have you fixed something since you posted that?

Most of the errors that I can see are:

  1. inline Javascript

  2. unencoded ampersands

  3. illegal attributes.

  4. Unless you have a very good reason, you shouldn’t be using inline Javascript, and certainly not to the extent that you have here. Save it as a separate file, which can then be cached, or ignored by non-supporting agents.

  5. Any ‘&’ you have in a URL (or anywhere else, but it’s in hyperlinks that tends to be the problem) needs to be encoded as &amp;. Why, you might ask? Because browsers are supposed to treat it as the start of a character entity. And while it might work at the moment, in most browsers, given the parameters you’re referring to at the moment, it’s easy to see how it could go horribly wrong. If you forget to encode the ampersands in
    website.com/page?print=all&sect=kitchen&prod=freezer&copy=1&image=large,
    the browser would have to try to parse it as
    website.com/page?print=all§=kitchen∏=freezer©=1ℑ=large,
    which isn’t going to work.

  6. If you’re using attributes that aren’t part of the spec (usually presentational rubbish), that’s going to throw up errors. Get rid of them, and style the page with CSS instead.

7

Thank you for your feedback,
I’m using internet explorer 9 beta and I am guilty in that I thought it was internet explorer 8 so that lot of people will use it and will witness the same problem as me.

Today I don’t see this behaviour anymore, I haven’t yet disabled mod page speed, I tried several times and pages, but still can’t see the behavior happening anymore, so perhaps it got fixed thanks to the w3c tool you have provided me with when I fixed a couple of typo mistakes, I’m not so sure because I’ve checked that the typo were corrected in the source and they were and still the behavior was happening.

So it stays a mystery to me.

I hear the remarks you’ve made to me about standards compliance, about markup, etc. I must admit that it has never been a real interest of me, I was always more into making sure the sites displays “fine” in major browsers and hoping the browsers do the job of correcting mistakes on the fly by being tolerant, which I feel they do well to a certain extend. I know it’s not a good behavior/professional from me, so I won’t argue about that and I can say you’re right when defending standard compliance, it’s just that I don’t do it myself but I admit you’re right.

As for the javascript inside the html I also admit it is stupid of me and due to lazyness, I should also put them in external files for speed/caching purpose.

My only excuse for all that is that I don’t work anymore for bosses and/or customers, so I allow myself to be lazy about w3c rules. But sometimes it causes me problem such as this case, but usually I can always correct the problem myself, it was one of the rare cases where I couldn’t. Now I hope the problem is really corrected and I thank you all for your help. Many thanks for the support!