• Hey guys, I’ve been working on a site using a WordPress template, and I’m pretty far into development and have only just now begun checking compatibility in IE…big mistake. For some reason, IE does not display the margins of the main body of my page correctly, though Safari, Firefox, and Chrome all have no problem. The site is http://www.campbellscustoms.com/test/. Any help in debugging this (major) problem will be so much appreciated. Thanks

Viewing 15 replies - 1 through 15 (of 21 total)
  • I wonder if some of these issues could be causing some of your issues?

    Thread Starter himynameisjoe

    (@himynameisjoe)

    Hm…perhaps. Seems strange, despite those issues, that IE would render the site incorrectly, though the others would have no problem.

    Secondarily, is there a way to determine which file each line of code being referenced in the w3 validator is found in?

    IE is notorious for being picky about errors. The other browsers are always more forgiving. But, for cross-browser compatibility, you’ve gotta get the errors gone, or your site will not display reliably (at least on IE) Once the code is valid, if there are still cross browser issues, you can implement a browser specific stylesheet, but its best to get the errors gone first, so you know exactly what you are working with.

    Towards the bottom of the page in the validator should be all the source code. You can click the errors to see the line of code throwing the error. Just gotta be a bit familiar with your theme, and the workings of WP to figure out what exactly is causing the issue. Sometimes something a few lines up causes the actual problem. Missing closing tag, or bracket or " or something

    RVoodoo is right, you probably got an end tag omitted and causing the whole code cascading issue.
    I would recommend you use a firefox plug in called html validator, it validates the page for you right inside firefox window, very handy

    Thread Starter himynameisjoe

    (@himynameisjoe)

    Thanks for the help, guys. I’ll work on getting that code cleaned up, and see if that fixes my problems…

    Thread Starter himynameisjoe

    (@himynameisjoe)

    Well, I got most of the problematic code cleaned up, but I’m still having troubles in IE. In fact, fixing the invalid code didn’t seem to affect the compatibility with IE at all. Anyone else have any idea why the margins of my site (http://www.campbellscustoms.com/test/) will not render correctly in IE?

    Which IE version are you talking about ?

    I am too lazy to check, but consider that IE6 has a bug that doubles margins on elements that float. Adding display: inline to these elements helps.

    Also, when aligning text and using “center” IE may actually start counting placements of certain element from the center.

    I see the entire site in IE7 and in IE8. I have to maximize the browser as your site is apparently fixed width.

    Now I see the difference.

    Your top image has a margin that the one below it doesn’t. It is also 301 px high while the type sheet is containing it to 200px.

    You are working on it as I am trying to find errors :^)

    Right now, ok IE8 and FF. Not ok IE7. Problem somewhere in the header?

    Thread Starter himynameisjoe

    (@himynameisjoe)

    I don’t know! Any ideas about what kind of problem in the header might cause the trouble? I’ve been checking it in IE8 – that’s what I have installed on Parallels on my machine, so I’m not sure how to check it’s compatibility with IE6 or 7. Ideas?

    In your style sheet go to Body. Set margin 0 0 0 0. Then it looks fine in IE8 and 7. I haven’t checked FF yet.

    Thread Starter himynameisjoe

    (@himynameisjoe)

    Changed it. How would I be able to see how my sites function in IE7, since I’ve got IE8 installed? Thanks so much for your help, by the way!

    You can sign up for Adobe Labs at https://browserlab.adobe.com/index.html#url=;showDelay=true;view=0;delay=0;zoom=100
    to check different browsers. We used to go to browsershot.org but it looks as though they are gone.

    In IE7 I am showing your Body still at 260 0 0 210.

    The Compatibility icon (a torn piece of paper) in the IE8 toolbar is supposed to make IE8 display things the way that IE7 would have.

    From what I’ve seen, it appears to work correctly.

Viewing 15 replies - 1 through 15 (of 21 total)

The topic ‘Trouble with IE compatibility’ is closed to new replies.