How do you design for both IE5 and Mozilla? Separate versions of your page? JScript?

[prowsej]

I've been working on http://rideau.prowsej.com/RHS/main/index.php?page=200 for the past couple of weeks. My design is now complete with the exception that it only works in Internet Explorer and not Netscape. I'm wondering what the best way is to bridge the gulf between these two platforms. For example, they each render font sizes differently, they render widths differently, etc, etc. One stylesheet will not serve for both platforms.

Do you suggest that I direct IE users to one stylesheet and Netscape users to another and Opera users to another, etc., etc. (actually, I'd probably end up ignoring Opera users =)? It'll be very nice when things are all standards compliant and I don't have to make two versions of the page.

With my JavaScript, it doesn't work on both platforms. I'm thinking of checking for the appname and giving users with IE a working set of menus and all other users a JavaScript-less version of the page. I'm not sure why the page doesn't work on Netscape6 so thats why I can't check for a specific attribute in my scripts, only the appname. I'm not very good with JavaScript (my menu script was created by someone else)

Any suggestions you may have about bridging the gulf between the browsers would be appreciated. With IE6 I'm not going to turn on standards compliant mode because it's too buggy with it on. However, from my initial tests, it appears to function almost exactly like Netscape6.

[lieblick]

prowsej - Personally, if I write/find a good javascript, I make sure that it's cross-browser compatible ... if it isn't, there's always one out there that is ...

Only once in my experience have I HAD to direct IE to one page and Netscape to another ... the reason was because the image and table spacing in Netscape is a hair different than IE ... but now, with PHP or even javascript, I realize that I could have made the spacing dynamic, based on the browser ...

Also, if Netscape really stops making browsers, eventually the software will be phased out, and people won't design for Netscape compliance (keyword: eventually) ...

It's safe to ignore people with opera, web tv, etc ... you can't please everyone!

What about people at 640x460 with 256 colors ... we all know they're still out there ... but they're a minority now. If you're designing for high tech people, give them what they want! Design for 800x600 and up ... as most designers I know have been above 1024 for years ...

Restaurants don't carry all types of food to please everyone, that's why there are so many different kinds! Identify your target audience and move upward and onward from there!

[prowsej]

Thanks. I've been able to do rather well with using Javascript to direct users to different stylesheets.

<script type="text/javascript">
if (navigator.userAgent.indexOf("MSIE") != -1 &&
navigator.userAgent.indexOf("Windows") != -1 &&
navigator.appVersion.indexOf("5.") != -1) {
document.write('<link rel="stylesheet" href="../main-ie.css" type="text/css">');
}
else {
document.write('<link rel="stylesheet" href="../main-nav.css" type="text/css">');
}
</script>

My page is using PHP. I guess I should be doing the browser check server-side and then going from there. However, if the user doesn't have a recent browser that conforms to CSS1 my page won't be tolerable, so I guess it's not a huge issue.

Could you post PHP code that you've used to detect the user agent?

[Anarchos]

This is the code that I use:

if (eregi("msie.[4|5|6]",$HTTP_USER_AGENT))
    $browser = "IE";
else if (preg_match("/Netscape6/",$HTTP_USER_AGENT))
    $browser = "NS6";
else if(eregi("nav",$HTTP_USER_AGENT))
    $browser = "NS";
else 
    $browser = "Other"; 

I highly recommend that you not create separate versions. The combination of Javascript and PHP should be more than enough to dynamically modify your page to work with Netscape. Maintaining multiple versions of a page is almost never a good idea. Finally, it's usually better to check against DOM attributes/properties than the appName. For example:

if (document.getElementById) // IE 5, 6, NS6, future browsers

[shane]

prowsej,

The link below shows how you can use the same stylesheet for multi browsers and get around the font-size differences. (I tried to post the link a couple of days ago for you but SPF was spitting out 'Server Busy' constantly).
http://www.alistapart.com/stories/sizematters/

There's a similar method to get around the way browsers apply the border and padding widths to elements as well.
http://www.tantek.com/CSS/Examples/boxmodelhack.html

Stylesheets can end up pretty messy with these hacks but you may prefer it to using multiple stylesheets.

[lynlimz]

Depending on the styles you use.
I can have netscpae and IE using the same style sheet.

When using separate style sheets...here's how a typical style sheet would work.

style.css
works for IE, Mozilla and Opera
ns.css
as filename goes, only for netscpae 4

[creole]

prowsej...

I noticed a fairly substantial bug on your site when viewing it in IE 5.5 for the PC. Your dropdown menus are totally visible while loading [screenshot].

You should be able to change the default visibility of the menu to off to start with. That should solve it.

[duckie]

Actually it seems pretty easy to make a site look good in IE5 and Mozilla. My latest project looks like a Yahoo! property without the CSS (i.e. black text on white background) but it looks perfectly fine in both IE5 and Mozilla using the same CSS with very minimal workarounds.

Netscape 4 is a problem though. I usually put the CSS which really screws with Netscape 4 into a seperate file and use the @import rule for that.

The advice given so far are probably more important than this one though, so pay attention to them.

[weirdbeardmt]

I would add to this discussion that you have to be absolutely spot on with your stylesheets for NS to display them - it does not tolerate mistakes (that IE does...)

for example if you said:

BODY {

font-face: Verdana;
font-size: ;

}

IE would display in Verdana at default size. NS would display in default text and size (and any other styles in the sheet would display in IE and not in NS).

[lynlimz]

lol
if anyone actually used font-face....it own't work in any browsers...it does in IE? grr...IE sucks

[weirdbeardmt]

OK so I meant font-family but you get the point!

[prowsej]

Originally posted by duckie
Actually it seems pretty easy to make a site look good in IE5 and Mozilla. My latest project looks like a Yahoo! property without the CSS (i.e. black text on white background) but it looks perfectly fine in both IE5 and Mozilla using the same CSS with very minimal workarounds.

Netscape 4 is a problem though. I usually put the CSS which really screws with Netscape 4 into a seperate file and use the @import rule for that.

The advice given so far are probably more important than this one though, so pay attention to them.

If you try to make a page completly out of stylesheets rather than using table hacks with gif spacers, etc. then you'll probably encounter some of the stylesheet issues between Netscape and IE. Netscape6 interprets stylesheets in a standards-compliant manner while IE5 interprets them in a manner that is consistent with IE4 for the puporses of backwards compatibility. However, IE4s implementation is very bizarre and has many bugs. Something as simple as a width attribute will display as different sizes in the two browsers.

Internet Explorer 6 fixes this whole problem by supporting the standards - if you turn on standards compliant mode then everything will appear the same in Netscape6 and IE.

[prowsej]

Originally posted by creole
prowsej...

I noticed a fairly substantial bug on your site when viewing it in IE 5.5 for the PC. Your dropdown menus are totally visible while loading [screenshot].

You should be able to change the default visibility of the menu to off to start with. That should solve it.

Thanks for pointing that it. Because of the implementation of the script it doesn't seem to be as easy to change as altering the visibility attribute. I've never found a good menu script. I've tried three and all of them have had issues (www.n-sider.com only works in IE, another that I wrote by hand was far too bulky and required too many manual changes whent he script was updated - I never used it, and now this script has problems in Opera and this weird menus visible while leading issue). Can you recommend a good, easy-to-use prebuilt free cross-platform menu script?

[duckie]

Originally posted by prowsej
If you try to make a page completly out of stylesheets rather than using table hacks with gif spacers, etc. then you'll probably encounter some of the stylesheet issues between Netscape and IE.

Of course, but the CSS I use is generally nothing too fancy. No CSS positioning for example.

I still use tables for lay out. I have managed to do almost completely away with GIF spacers and still have the webpages look good in Netscape 4.x, IE4 and 5 as well as Mozilla though.

[prowsej]

Originally posted by duckie


Of course, but the CSS I use is generally nothing too fancy. No CSS positioning for example.

I still use tables for lay out. I have managed to do almost completely away with GIF spacers and still have the webpages look good in Netscape 4.x, IE4 and 5 as well as Mozilla though.

Eventually I've always had to go that route as well. Usually when I start working on a page I aim for complete standards compliance, and then I move downwards from there until I get something that is a reasonable balance of both approaches.

Standards compliance != Browser compliance
[unfortunately]