Inline Style Possible for Firefox only?

[maximum]

I've encountered a small glitch on a site where a block of text displays differently in Firefox and IE. It's only on a few pages, so I don't want to go to the trouble of creating separate style sheets for IE and Mozilla. Is there a way to code an inline style that Firefox will pick up on?

This <div> tag looks fine in IE:

#shazam {padding: 0 20px 0 10px;}

But in Firefox, this <div> moves the text down about 10px for some reason (like there was 10px of padding at top, even though there isn't). So I came up with this to compensate:

#shazam {padding: 0 20px 0 10px; margin: -10px 0 0 0;}

But then the text is cut off at the top in IE. So I was hoping there was a way to code an inline style so that if its Firefox/Safari it would use the second <div>.

Or maybe someone could tell me why I'm getting phantom top padding in Firefox with this <div>?

[D_Blackwell]

Welcome maximum.

It's only on a few pages, so I don't want to go to the trouble of creating separate style sheets for IE and Mozilla.

Get it working correctly in FF and then add conditional comments for IE. No need for separate style sheets.
............................

[Or maybe someone could tell me why I'm getting phantom top padding in Firefox with this <div>?

Not enough information. I need enough markup to replicate the problem.

Ideally you could fix the problem rather than hack inline over-rides.
............................

It's only on a few pages,.....

Sounds like something is slightly different in the markup on pages where the problem occurs, and where it doesn't. An edit to 'main' container, or creation of a new class and declaration would both be better choices that hacking an inline fix. As the site grows, it will probably continue to occur. Deal with root of the issue now by finding out where, when, and why the issue occurs.

[rocknbil]

Welcome aboard maximum, first question: does the document validate [validator.w3.org]?

Validation insures (more or less) Standards Compliance Mode as opposed to Quirks Mode. In Quirks mode some CSS selectors misbehave or fail. This is your absolute first stop to cross browser issues.
If that doesn't fix it (probably will) next I'll answer no, not that I know of. But what you could do is create everything for a compliant, non troublesome browser (FF, Opera, Safari) and then fix it for IE- and there is a way to do that.

<!--[if IE]>

// do something for our favorite MS browser

<![endif]-->

Google IE conditional for details.

Fortunately using the correct doctype and validation, I've rarely been forced to do this, but it will work.

[SuzyUK]

Hi maximum, Welcome to WebmasterWorld!

I don't think you should need to write separate styles for this issue. I think it sounds like collapsing margins [w3.org]. There are a number of reasons why IE might handle this differently from Firefox; Doctype, Floats, IE version etc.

First to check if it is a collapsing margin try adding a 1px top border or 1px top padding to that div ...does that now make it look uniform across the browsers?

let us know if it is that we can explain more if you like, otherwise, the trick above is also a solution, no need for separate styles

or if it's not that can you recreate the effect with a short code sample separate from the rest of your page?