SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  2. #2
    SitePoint Enthusiast lieblick's Avatar
    Join Date
    Jun 2001
    Location
    Tallahassee, FL
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  3. #3
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?

  4. #4
    You talkin to me? Anarchos's Avatar
    Join Date
    Oct 2000
    Location
    Austin, TX
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the code that I use:
    PHP Code:
    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

  5. #5
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by shane; Jun 16, 2001 at 12:26.

  6. #6
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  10. #10
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol
    if anyone actually used font-face....it own't work in any browsers...it does in IE? grr...IE sucks
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  11. #11
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK so I meant font-family but you get the point!
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  12. #12
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  14. #14
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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]


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •