Rendering Problem in IE
 

OK, so I fired up the website today, and realized that I should probably check for compatibility with browsers other than Firefox, and it turns out that IE renders the webpage incorrectly. The little arrows on the sidebar items move about half an inch over, and the sub menu items in the sidebar become double spaced. When I opened it in IE7, half the content was missing. Here's the webpage. Any ideas would be great.

Re: Rendering Problem in IE
 

Validate your code and CSS, if you are using valid W3 standards your code should render about the same. If you used Dreamweaver or a similar WYSIWYG editor don't assume they generate valid code.

Also, I cannot replicate the error in ie7, what version are you using?

Re: Rendering Problem in IE
 

I've used this CSS on some sites to make IE7 behave a standards-compliant browser.

http://code.google.com/p/ie7-js/

That may help ya out ..

Re: Rendering Problem in IE
 

On my system, I'm running IE version 7.0.6001.18000 on Vista. I'm not sure what the systems at school are running, but it's some version of IE6. The problems with things moving I'm only having on school systems, but I don't own a system running IE6. I believe it also renders correctly in Safari, but I'm getting that from the media VP, not from my own system.

Re: Rendering Problem in IE
 

Are you in standards mode?

IE doesn't have a strict standards mode, (they call it 'Almost Standards Mode') This doctype should get you as close as possible. If it still doesn't work, you will need to write some browser specific code, which a pain, but doable.

Re: Rendering Problem in IE
 

Don't ever assume that for Internet Explorer 7 or lower.

(Although for every other browser, that's a valid statement. Firefox, Opera, Safari, and Chrome all render everything pretty much exactly the same.)

Re: Rendering Problem in IE
 

Ok, so I've validated my code through the W3 Markup Validation Service, and I'm in the process of fixing the 48 errors and 21 warnings it gave me. Hopefully that will fix the problem....

Oh, and art, could you elaborate? I'd like to know what I'm getting in to here.

Re: Rendering Problem in IE
 

What he meant was that IE is infamous for its compliance with W3 standards. Just because something validates with W3 does not mean that it will render correctly in IE. Conditional comments are a great example. Conditional comments do not exists in W3 specs, yet IE supports them:

Ironically, this abnormal behavior is what allows workarounds to IE's non-compliance. Sticking IE-only CSS inside a conditional comment allows for a webpage designer to "fix" some problems that crop up in IE.

Re: Rendering Problem in IE
 

Art is correct of course, IE7 is notoriously non compliant. However, valid markup would at least minimize your chance that it is your code. Validation should always be a first step in trouble shooting rendering (Second if you view cursing at IE as a step, you should hear some of the vile things I have heard/said about IE) If you have valid html and css you know that it will work in every COMPLIANT browser, now you need to add your tweaks to get it to work in the rest.

Re: Rendering Problem in IE
 

Firstly, make sure your code is valid. This involves using a Doctype declaration in the main html. Send the whole site through the W3C validator, the errors are verbose enough to be useful to make good changes.

Also, I would suggest separating out your CSS an JS from your HTML and rather reference them. This makes the raw code easier to read and maintain and, believe it or not, can actually solve some of the inconsistencies.

After all of these changes, then you can start making fixes for IE. The Google IE7 JS is pretty good, but I would hesitate using JS to fix what proper conditionals and good CSS can fix.

I would also suggest having an arsenal of web browsers to test in. Even if you don't use them for browsing, testing with them is crucial. I suggest IE6 and IE7, Firefox, WebKit (or Safari), and Opera. I've had completely valid sites fail in Firefox, while be fine in all other browsers including IE.

At least browsers are getting better :D

Oh, and here is a great site to brush up your skills: http://www.alistapart.com

Re: Rendering Problem in IE
 

daneel, how exactly do I get IE 6 and 7 on my pc at the same time? The only thing I've ever been able to do is update it

Re: Rendering Problem in IE
 

There are several programs available, but I recommend using MultipleIE by Tredosoft. It'll give you everything from IE 6.0 to IE 3.0 (Anything below 5.5 shouldn't render correctly anyway). :)

Re: Rendering Problem in IE
 

Thanks for the suggestions. I'll get right on them this weekend. We just finished taking finals, and we're on break until the 7th, so I've got a LOT of free time right now.