the image is a line which should be at a particular position.if i keep top:22px chrome is showing the expected thing. but in firefox the line is getting little up and it is looking ugly. so is there any option to specify the top or margin-top depending on the browser... i.e like if it is firefox 20px and if it is chrome 10px....

2 answers

danwellman 5600
1
point

CSS itself does not contain conditional logic.

What you probably need to do is review the CSS in use so far to see if it is something else which is causing the positions to differ. Are you using a reset stylesheet to neutralise differences between browser defaults?

If you really do need to set different positions in the different browsers, you probably need to detect the browser using JavaScript and set a class on the body of either firefox or chrome (or probably webkit as I suspect the problem also occurs in Safari?). You could then do:

.firefox { top:20px; }
.webkit { top:10px; }

If the site already uses jQuery, you could use its deprecated browser sniffing feature for basic detection of the browser, something like this:

if ($.browser.mozilla) {
    $("body").addClass("firefox");
 else if ($.browser.webkit) {
    $("body").addClass("webkit");
}

Although this really is just a quick and dirty solution to get you started...

Answered over 7 years ago by danwellman
0
points

Try adding img {vertical-align: bottom;} to your stylesheet to see if it fixes firefox's rendering.

Also are you referring to margin-top or are you setting top: ?

Answered over 7 years ago by Tony Crockford