BleepingComputer.com: IE 8 vs Chrome Page

Hi Folks,

I was happily editing my web site in Chrome, a work still in progress, but on its way ( http://www.nrel.colostate.edu/~rboone/web/temp/NREL/ ).
I then opened it in Internet Explorer 8, and the columns are torn up. The pages are created from a few PHP include statements, but otherwise, nothing too fancy.

I 'viewed source' on another page where my template works fine in IE8 ( http://www.nrel.colostate.edu/projects/gnu/ ). I copied both files, then made a line-by-line comparison to try to figure out what might be wrong. I dropped out some sections using comments, and neight pathway worked.

Any insights would be appreciated. I edit pages by hand, which will probably cause some to flame, but it generally works for me. Given that, what pathways would people suggest I use to figure out what the problem might be? Maybe adjust widths in the style sheet? Could a pixel or two too wide cause this behavior?

Thanks,
Randy

Try validating your HTML first:
http://validator.w3.org/

Great, thanks. That was humbling ... many errors. But they are fixed up now, and the page validates well. Unfortunately, it still displays correctly in Chrome but squirrely in Internet Explorer. Any other thoughts?

Thanks again,
Randy

Happy to see that you took the time to make your page validate. That helps. You have a CSS error (there is a CSS validator also) but I don't think that is the problem. No need to be humbled either. Making pages look the same across browsers is something that tests all web developers.

So here is the thing. Browsers render things in different ways, so It could be your CSS; it could be the order of attributes within the HTML, etc. This is why competent web developers make a lot of money. They know how to troubleshoot problems like these. The procedure for fixing issues like this is to create test pages. Then you add elements one by one until you find an element that doesn't render the same between browsers.

If you are affiliated with an accredited High School or College (and I can direct you if necessary) within the US, there are tools freely available to you that can help. Specifically, I am thinking of Super Preview that is bundled with Expression Web, which is part of Expression Studio. Other than that, all it takes is methodical testing to figure out what is causing the problem.

Well, I went to the CSS checker, fixed the two problems it identified, and voila! It works in both browsers. Outstanding. Thank you Groovicus.