IE margin doubling problem

Question

I am working on a site. I have a floated horizontal list of items at the very top of the header. It looks fine in Firefox and Safari but in IE 8 it forces the last item on to a second line. I have read about the margin doubling problem with IE and I've tried all sorts of ways to keep this from happening but can't seem to figure it out.
http://www.prospectrealty1.fatcow.com/index.html
any help on how I can keep the floated list all on one line in IE will be very much appreciate.
thanks!

Answer 1

markf12 wrote
The problem is with the line of text (address, phone, etc) at the very top of the header, not the nav. It looks fine in Firefox and Safari but not in IE. I believe it's because of the IE margin doubling that I have learned about. I've got the string of text/ bullet list so it fills the space with 20 px space on each end. When IE adds extra margin it forces the last item (email address) down onto a second line. 
I'm thinking of replacing all but the email address with a jpg image. Leaving the email address as a link that can be clicked. I was hoping to find a fix for this IE problem so I could keep it all as text which is a better practice as I understand it.
Oh ok I didnt see that because in Adobe Browser lab the text is showing all on one line in IE7, IE8 and IE9 so it would be difficult for me to diagnose.
I can tell you though it has nothing to do with double margin bug as IE8 and IE9 corrected that. It was only present in IE7 maybe and certainly in IE6. However having said that the IE double margin bug only occurred when you had a floated element which had a margin applied to it in the same direction as the float, i.e. if you floated an element left and then attached a left margin to that element also the margin would double. The solution was to add display: inline; to the elements css selector BUT you have no left margin set on the <li> tag.
It is most likely as Nancy points out an engine difference in the way IE browsers size the text. Does this occur if you use px instead of em? If not use px....I never use em myself as I've found it does cause issues ocassionally. Also its not good practice to fill a whole horizontal line with text information where you want its visual appearence maintained, very bad. Horizontal menus never work and lines of text never do either. The art of designing a webpage is allowing enough space so the text can 'grow' into in the case when a browser interprets the text size slightly differently. Obviously that's difficult if you are re-creating this webpage build for some designer who has little knowledge of good web design practices.
In cases where a client is absolutely definitive that they want too many links in a horizontal menu or a line of text, which must remain on one line, I would have no hestitaion about using an image. Just give the image an 'alt' and if the image is surrounded by an anchor tag give that a 'title' tag. That will keep your page 'user' friendly for those who have a disabilities.