CSS Differences between IE and Netscape

[Marc A.]

First, if you have both IE and Netscape (or equivalent) installed on your machine, please look at this page in both browsers http://www.endlessss.com/test/ and you'll see that in IE, the right side looks fairly normal.

The same isn't true when viewed in Netscape (or equivalent).

I am asking any of you out there to look at the .css file (posted below and inside your temp files folder) and the html page to see what I need to change to make it look at least "better" in netscape.

I'm ok at this stuff, but not educated enough to know exactly what to change...

P.S. Ignore the calculator image, I know it's part of the Gant icon pack and I'll be changing it soon.

[Wildcard]

Looks the same in Mozilla, what version of Netscape are you using to test ?

[Marc A.]

The latest Netscape, I just downloaded it from their website, I believe it's v.7.1

Should I be instead testing "other browers" with Mozilla, Firefox etc?

I was under the impression that Netscape used the same techniques to render a page as Mozilla, Firefox etc...

[Jessterw]

The latest Netscape release is actually a little older (core wise) than the current release of Mozilla.

[Marc A.]

I just downloaded firefox, and just like netscape, things look all jumbled up in it... I'm a bit confused.

It looks like I forgot to attach the files earlier, here they are. If anyone can take a look at my .css, please let me know if something is wrong...

Thanks!

[the evn show]

This one is an easy fix - kind of...

The problem is a combination of IE being broken with respect to certain things, and you're using IE as your only test bed while creating the CSS layout. I've had the same problem but going the other way: I design so the page looks good in everything available to me, then I go to check on IE and it's horribly mangled because of some stupid quirk. This particular issue is one I'm familar with:

It's like painting a picture to look clear while you're wearing somebody else's glasses: They'll look fine as long as what you see is being distorted, but anyone who can see clearly will have a blurry/distorted image.

solution

Delete the XML prolog from your HTML file and visit the site in IE. Notice how it looks exactly the same as firefox/safari. This is because IE 6 (and previous versions to IIRC) will drop into a "broken" non-standards compliant render model if it detects an XML prolog - thats a major pain in the butt. If you design the page to look right in IE using broken render mode, then it will look busted every else that is rendering the page correctly. I think she goes back to using the old broken box-model where width:750 makes the box 750 pixels no matter what, the standard says width:750 makes the box 750 + margins + padding + border.

Now that you have IE rendering things correctly, you can fix your CSS to make the page look the way you want it, and then try again in other browsers.

There's no real way to keep the XML prolog and have IE render correctly so the best choice is to just drop it: it's not a required item anyway.

[Marc A.]

the evn show, I love you. ;)

Kidding, but now things work and you're the man.

[moloko]

you css looks good in Mozilla. Your middle box does not have a border like the other 3 sides and its a little distracting. but other than that I like the layout.