CSS website layout issues between firefox and IE ? HELP!?

Question

My webpage appears properly in IE 7 but has a few differences in firefox two regarding images and margins. I know there are differences between the browsers but I don't know how to find them or what to change.

The images are absolute positioned with this code:

The other problem is that I am missing bottom margin space on two of my pages between form buttons and the cf include lower nav bar. Do I need to add padding?

What do you think and where can I go to learn how to adjust for things in firefox when they work in IE. I test mostly in IE as over 90% of my viewers use it (version 6 and 7).

Answer 1

Everyone here has some great answers, but the answer that is going to help you the most is...

Stop designing in IE. Design in Firefox.

This way, you can make sure everything is in place, then check it in IE6 & IE7 after. The parts of the site that are not where they should be in versions of IE, you can use a CONDITIONAL COMMENT.



Read about conditional commenting here: http://brucelawson.co.uk/2005/future-proof-your-css-with-conditional-comments/

Conditional commenting lets you directly use a separate stylesheet for versions of IE and fix the problems without using the main stylesheet and have to go back and forth between all browsers. It cuts down on all the pain and agony of having to deal with IE6's problems and CSS bugs and IE7's continued problems and CSS bugs.

It has made a difference to me and cut down on my workload immensly and made my design and development life a lot better.

Answer 2

Chances are it actually appears correctly in Firefox because it is more standards compliant than IE. CSS is a fiddly language and browser incompatibilities are a tricky subject. There is no simple magic bullet. Often you need to compromise on a layout that looks almost what you wanted, but not identical, in both. When I have a problem like this I usually strip the html back to the bare essentials and experiment with changing CSS properties till I get what I want.

A List Apart has a lot of good articles about CSS:
http://www.alistapart.com/

Answer 3

... you're code does not appear.

I generally try to stick to standard CSS (http://www.w3.org/Style/CSS/) and test on browsers that support it (mainly Firefox; one of these days I'll install Opera). I only do final QA with IE and only fix serious problems.

IE6 is not standards compliant and you should only bother to fix something if it affect usability or comprehension. Do not bother with aesthetics for an obsolete piece of software.

(I also put a "best viewed with Firefox" with a link to download it in an out-of-the way place to encourage people to try it out.)

Answer 4

Firefox and Safari (so you can see what it looks like on, for example, the iPhone) are the ones to code for, and only adjust for IE afterwards.

The quick and dirty way to put in code specific to IE in your style sheet is to prefix it with * because standards-compliant browsers will ignore it, but IE will just gobble it up.

I also recommend A List Apart mentioned above by irongut.

Answer 5

If you're using 'width' then be aware that Firefox (and Opera and others) measure 'width' as the area outside margins plus border and IE measures width as stuff *minus* margins, so that'll blow you away. Often the safest way is to manage with a containing div and place the INNER stuff with margin 0 padding 0 and handle ITS width the way you want it, (THAT's where you place the width measure, remember) then set an outer div with the padding (the padding will be INSIDE the outer div, so REMEMBER that the width overall will will be the width plus what you set for the inner thingie). IE does the same eating with your height, but you don't often need to deal with height in the flow of things...