Firefox CSS Hack
Below is an example of how you would hack FireFox because of the margin verse position problems they both have. Basically, Firefox 2 and Firefox 3 have different engines that render CSS differently.
(Note: I hope you understand Order of Operation. Basically, CSS will override the previous CSS if you write another revision after it.)
An example:
.header {height:300px;}
.header {height:250px;}
.header {height:250px;}
Based upon Order of Operation you browser will assume the height of 250 pixels and ignore the 300 pixels.)
Code Example:
<html>
<head>
<style type="text/css">
.header, x:-moz-any-link {width:200px;height:100px;background:#000;margin:20px 0 0 20px;}
.header, x:-moz-any-link, x:default {width:200px;height:100px;background:#000;margin:30px 0 0 20px;}
</style>
</head>
<body>
<div class="header"></div>
</body>
<head>
<style type="text/css">
.header, x:-moz-any-link {width:200px;height:100px;background:#000;margin:20px 0 0 20px;}
.header, x:-moz-any-link, x:default {width:200px;height:100px;background:#000;margin:30px 0 0 20px;}
</style>
</head>
<body>
<div class="header"></div>
</body>
Explanation:
Basically what is going on is that you are setting what you need for FireFox2 to do in line 1, then over-ride that with what you want for wnat FireFox3 to do below.
Note: If you only want to declare it in FireFox3 use line 3
- .header, x:-moz-any-link { } /* FireFox 2 */
- .header, x:-moz-any-link, x:default { } /* FireFox 3 */
- html>/**/body .header, x:-moz-any-link, x:default { } /* Only FireFox 3 */