Question

In laying out a page with absolute positioning, I realized that it rendered differently from browser to browser. I’ve been looking online about css selectors to see if there was some way to change the positioning based on which browser the user was using, but I haven’t been able to find anything very helpful. Any ideas?

Answer 1

That looks like a bad strategy to me… I wouldn’t want to switch from absolute to, say, relative or some other kind of positioning based on the kind of browser. They all should implement positioning fairly similar. You’d probably need to add some extra styles to make a particular element behave properly on certain browser, but changing the global positioning method based on browser is not a good idea, IMO.

UPDATE:

On CSS alone, there isn’t any standard mechanism to detect a browser. You can use tricks like the one below to detect a particular version of IE, for example:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

or something like:

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

For a more complete list of options see here.

Another alternative is to use jQuery (if it’s an option for you) and adjust the element’s style using javascript depending on the browser. Something like:

if ( $.browser.msie ) {
    $("#div ul li").css( "display","inline" );
 } else {
    $("#div ul li").css( "display","inline-table" );
 }

More examples here.

A word of caution: none of the above methods is infallible. One, for example, can make Firefox identify itself as Internet Explorer.