Beefy Boxes and Bandwidth Generously Provided by pair Networks
"be consistent"
 
PerlMonks  

HTML rendering differences among browsers

by rodry (Beadle)
on Sep 15, 2000 at 01:42 UTC ( #32572=perlquestion: print w/replies, xml ) Need Help??

rodry has asked for the wisdom of the Perl Monks concerning the following question:

I know some of you have had to deal with this issue: different results when rendering a page in Netscape and Explorer.

I am looking for resources where I can inform myself of the known peculiarities about how each browser renders a tag different from the others. For example, I know that in Netscape you cannot do the single pixel image (of any color) and then alter the width (in percentage points) to make it mimic a straight line.

Also, if there is information that specifically talks about IE 5.0 for the Macintosh it would be of great help. That browser seems to break almost every page I design.

Thanks.

  • Comment on HTML rendering differences among browsers

Replies are listed 'Best First'.
Re: HTML rendering differences among browsers
by jreades (Friar) on Sep 15, 2000 at 02:12 UTC

    For a quick overview of browser compatability, Webmonkey has one of the best things going with the Browser compatability chart.

    Generally, you have to look at what you're trying to accomplish and cut it off at the point of diminishing returns:

    HTML 3 is pretty well covered by most browsers: this is up to tables, frames (usually), and basic JavaScript (1.0).

    Netscape 4 and IE 4 use widely divergent DOMs for CSS and DHTML. There are some useful tricks such as:

    This code is from HTML::Mason, but you can run the checks just as easily in JavaScript using Navigator.appName.indexOf('microsoft') to catch IE vs. NS.

    % % if ($browser =~ /microsoft/) { % var doc = window.document.all; var style = '.style'; var px = 'px'; % % } else { % var doc = window.document.layers; var style = ''; var px = ''; var origWidth = innerWidth; var origHeight = innerHeight; function reDo() { if (innerWidth != origWidth || innerHeight != origHeight) { location.reload(); } } onresize = reDo; % % } %

    The onresize function is necessary in Netscape because resizing the browser breaks the CSS attributes unless you reload.

    At its heart, the primary difference between Netscape and almost any other browser out there is that Netscape is completely unable to handle the dynamic alteration of certain attributes -- colour, characters, height, width... you can move things around in Netscape 4.0 but not a whole lot more.

    If you keep this in mind you can develop strategies for delivering a dynamic experience for those able to view it. In an ideal world, you can use a tool such as HTML::Mason to deliver completely different Web sites based on little more than browser-type and version. Mason won me over when I was able to write a Lynx component (for disabled and old-skool users) in under an hour for my company's Web site.

Re: HTML rendering differences among browsers
by lhoward (Vicar) on Sep 15, 2000 at 01:50 UTC
    Web Design in a Nutshell has a good appdix which details browser support for particular tags.

    Just remember : HTML is not a typesetting language. You will never get completely identical page rendering between browsers.

Re: HTML rendering differences among browsers
by merlyn (Sage) on Sep 15, 2000 at 01:47 UTC
    The best source is the W3, who can tell you how to write real HTML that can be rendered on any standards-compliant browser. If you want "look" instead of "feel", look to Adobe for their PDF products.

    -- Randal L. Schwartz, Perl hacker

Re (tilly) 1: HTML rendering differences among browsers
by tilly (Archbishop) on Sep 15, 2000 at 01:57 UTC
    For the "official" version check out the Amaya browser. It validates HTML so it is not really usable as a browser, but it literally defines the standard.

    Opera does pretty well as well.

    IE 5.0 on the Mac I know nothing about though. But 5.5 is supposed to be very good. (I have heard, "Not important enough to break.")

    Beyond that, keep your html basic and it will work anywhere. Try to play a lot of games and make HTML be what it was not originally intended for, and it will break everything. Also while designing constantly test. Trying to design then fix afterwards is a nightmare. Moving forward in small steps that you verify as you go works much better.

RE: HTML rendering differences among browsers
by jlawrenc (Scribe) on Sep 15, 2000 at 23:39 UTC
    A bit of a tangent but maybe of some use...

    Me, not wanting to get too involved in pixel adjustments, I have taken the stance of letting designers adjust pixels all they want in products like Frontpage, Dreamweaver, whatever.

    When they hand me funky-browser-sensitive HTML it is their decision and not mine. HOWEVER, I still need to take their stuff and make it work in final system...which is primarily template driven.

    So the first time around I'll templatize their design. Then a series of subtle changes will follow - pixel moved here or there. You know, the usual stuff. Tag Compare might help you spot these little changes.

    So, although this may not be of much use on identifying, and avoiding browser idiosyncracies it may assist in accomodating some of the designer's needs quickly and accurately.

Re: HTML rendering differences among browsers
by ScottSaddison (Initiate) on Sep 15, 2000 at 23:30 UTC
    I'm a big fan of the HTML COMPENDIUM myself. All tags/information have compatibility icons next to them and there is an abundance of information.

    Scott Saddison, initiate
      It's too bad they don't know enough about standard HTML to write it. I don't trust any authority on HTML that can't write valid HTML. Here's the errors iCab just reported:
      Warning (1/1): <!DOCTYPE> is missing. Warning (14/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (15/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (16/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (17/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (18/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (19/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (20/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (21/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (22/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (23/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (24/3): The attribute "SRC" is not allowed for the tag <LINK>. Warning (25/3): The attribute "SRC" is not allowed for the tag <LINK>. Error (37/1): The color name "ff0000" is not valid. Warning (41/1): The tag <CENTER> should no longer be used since HTML 4 +.0. Error (69/3): In tag <IMG> the value "centre" is not valid for attribu +te "ALIGN". Error (70/3): In tag <IMG> the value "centre" is not valid for attribu +te "ALIGN". Warning (72/23): The tag <FONT> should no longer be used since HTML 4. +0. Error (72/94): The start tag for </A> can't be found. Warning (76/2): The tag <CENTER> should no longer be used since HTML 4 +.0.

      -- Randal L. Schwartz, Perl hacker

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: perlquestion [id://32572]
Approved by root
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others rifling through the Monastery: (6)
As of 2020-11-27 15:15 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    No recent polls found

    Notices?