cross platform css positioning

liunx

Guest
In setting an absolute positioned div with css, (i.e., left: 100px; top: 100px; ) I am required to create different css rules depending on the browser. (n4.79 needs top set at 103 px to line up) Does anyone have a list of how these figures differ across multiple platforms (MAC/IE) and browsers?

Thanks,
SeanAlthough I couldn't find exactly what you were looking for, I did come across these links which should be helpful:

<!-- m --><a class="postlink" href="http://devedge.netscape.com/library/xref/2003/css-support/css1/mastergrid.html">http://devedge.netscape.com/library/xre ... rgrid.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.htmlhelp.com/reference/css/">http://www.htmlhelp.com/reference/css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.mako4css.com/Issues.htm">http://www.mako4css.com/Issues.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.yourhtmlsource.com/stylesheets/csslayout.html">http://www.yourhtmlsource.com/styleshee ... ayout.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.blooberry.com/indexdot/css/index.html">http://www.blooberry.com/indexdot/css/index.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://css.nu/pointers/bugs-nn.html">http://css.nu/pointers/bugs-nn.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://devedge.netscape.com/library/xref/2003/css-support/css1/mastergrid.html">http://devedge.netscape.com/library/xre ... rgrid.html</a><!-- m -->

HavikYou mean... if the browser is, for instance, Netscape4.7, document.getElementById("theDIV").style.top="103px" ?Thanks for the list Havik, I did actually go through most of those, and about a dozen others. No one seems to have amassed the information so far:
Here's an example:
For most DOM browsers, setting a div at: left: 100 px, top: 100px places it at exactly that point from top-left of the window.
Netscape 4.79 would have to be set at: left: 100 px, top: 103px
Netscape 4.79 for the Mac would need: left: 100 px, top: 95px, and so on.
It appears that most browsers disagree, among a hundred other things, as to exactly where the left and top of the document window is...
I had hoped that someone, somewhere, had a more extensive list regarding the exact differences of where the top-left of the window is among as many browsers and OS'es as possible. (MacIE4, 5, Net6Mac, PC, etc, etc.)I'm sure there is a list out there but I haven't come across it. All I can say is that your going to have to go through a trial and error to position for each browser. A hassle I know :D

HavikActually I don't mind the hassle - we always learn more when we do our own research - it's the cost of purchasing a Mac, multiple monitors, and installing an extensive list of browsers - that's the tough part :(When it comes to CSS positioning, I've gone the way many other designers have in the last two years: dropping support for Netscape 4.x.

The holy grail of web design has always been backwards support, but with the number of people using NS4.x dwindling, my suggestion is to drop support for it, but provide a workaround. Enough browsers out there are standards compliant, to quasi-standards compliant that it makes scripting and coding for old browsers (i.e. 4.0 and older) just a bunch of extra work to support a limited number of users.

Of course, if your audience mostly uses Netscape 4.x, then by all means, dig in to the NS 4.x DOM and CSS support. The articles listed below are great reading on the subject of CSS positioning and old browsers:

<!-- m --><a class="postlink" href="http://www.alistapart.com/stories/tohell/helltest.html">http://www.alistapart.com/stories/tohell/helltest.html</a><!-- m -->

<!-- m --><a class="postlink" href="http://www.alistapart.com/stories/journey/">http://www.alistapart.com/stories/journey/</a><!-- m -->

<!-- m --><a class="postlink" href="http://www.alistapart.com/stories/dao/">http://www.alistapart.com/stories/dao/</a><!-- m -->

Unfortunately, all I can contribute to this discussion is a reason to stop support for Netscape 4.x.
 
Back
Top