Rendering Problem in IE

Zholl · #1 16-12-2008, 23:29

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.

Andrew Schreiber · #2 17-12-2008, 09:42

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?

Brandon Martus · #3 17-12-2008, 09:47

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 ..

Zholl · #4 17-12-2008, 17:38

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.

EricVicenti · #5 17-12-2008, 18:01

Are you in standards mode?

PHP Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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.

artdutra04 · #6 17-12-2008, 22:23

Quote:

Originally Posted by Andrew Schreiber

Validate your code and CSS, if you are using valid W3 standards your code should render about the same.

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.)

Zholl · #7 17-12-2008, 22:40

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.

DMetalKong · #8 17-12-2008, 23:14

Quote:

Originally Posted by Zholl

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.

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:

Code:

<!---[if ...]>
Do stuff
<![endif]-->

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.

Andrew Schreiber · #9 18-12-2008, 00:18

Quote:

Originally Posted by artdutra04

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.)

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.

daneelshof · #10 18-12-2008, 21:26

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

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

Zholl · #11 18-12-2008, 23:02

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

Blad3101 · #12 19-12-2008, 10:21

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).

Zholl · #13 19-12-2008, 16:49

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.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Bucket Rendering	pyr0b0y	3D Animation and Competition	5	14-02-2008 21:46
Rendering Time	LBK Rules	3D Animation and Competition	17	20-02-2004 23:39
Rendering on Unix	Alexander McGee	3D Animation and Competition	3	02-12-2003 15:05
Rendering Tips	Tyler Olds	3D Animation and Competition	27	16-10-2003 01:32
Rendering help	marlon_jbt	Website Design/Showcase	10	15-10-2003 21:07