Problem with margins in Firefox

[RichardAFCB]

Hi there,

I'm redesigning my homepage, and I have it looking how I want in Internet Explorer, but not in Firefox.

In Firefox, basically, my "margin-tops" aren't displaying, mainly on the middle column (div.two) and the form fields.

The site: http://www.rich-media.co.uk/index3.html

The CSS: http://www.rich-media.co.uk/style4.css

Any help would be appreciated.

Cheers!

Rich

 

[aaronfalloon]

It always works fine for me in Firefox um..........

 

[RaptorRex]

It would help if your source was nicely formatted so we could see how all your <div> tags line up. Try some tabs and indents.

Without looking too hard (due to the formatting problem), maybe the problem is your line-height in the body tag. line-height ignores margin settings:

From the spec:
"Note that any padding, border or margin above and below non-replaced inline elements does not influence the height of the line. In other words: if the 'line-height' is too small for the chosen padding or border, it will overlap with text on other lines."

That may be off base though for your current problem.


Another possibility is your are trusting IE. Don't. IE is wrong. FireFox is right (at least more often). IE includes padding and border sizes in its application of the "width" element. This is counter to the spec. FF is correct. This also applies to the height element. So if your vertical alignment is off check that you are not using top padding and top borders. Margins work fine in IE as far as I know.

If you still can't find the problem, fix your formatting and I'll look at it harder. My website also has a how-to page describing how to align DIV sections so they are consistent between IE and FF.

Good luck.