[UNSOLVED] Margin Problems for Unordered Lists in FireFox and IE7

I am having some problems with the margins on this page:

http://www.rmsnav.com/services.html

In Firefox, the margins for the unordered list render properly in the section for RM-Navigator. However, in IE 7, the bullets are getting hidden behind the image. Although in the specialty servicing section, IE 7 is obviously observing the margins as you can see. So is this a floating issue? I have played around with some other things and haven’t been successful. Any help would be appreciated!

EDIT: I finally found something on Google with a person trying to do the exact same thing. <ul> to the right of a floated <img> All I needed to do was add a float:left declaration to the <ul>. I tried this early, but added it to the <li> oops :-D

EDIT Part 2:

Ok when I made those edits it caused some more problems. So I am back to the original. Why is IE7 not observing the margin-left declaration for the unordered list? You would think it would be 15px from the img like I set in the margin declaration. If I add float:left to the <ul> and then give it a width, then it floats properly, but as you can see the img I use for bullets shrinks in IE7, but looks fine in FF. The normal bullet size is shown under the "Links" section in the left sidebar.

Cross-browser compatibility sucks. The page does validate, so that isn’t the problem.

There are many problems with floating images next to lists. I used following: display:table for the list generally and display:inline-block via a conditional comment for all IEs. Works fine for me in FF, IE, Opera.

That seems to do away with the overlap, but still encounters the same problem as if I just floated the list. The image I am using for the bullets seems to be shrunk by using either method.

Look at this:

http://www.rmsnav.com/services.html

Under "Links" the orange arrow is the appropriate size, but it gets smaller in the main section for both IE6 and IE7, stays fine in FF. I used this code:



I also have tried this code:



Both exhibit the the problem of the image used for the bullet being made smaller (or possibly cut off?)

This is driving me insane. It doesn’t make any sense to me that a float declaration would cause the rendering of the image for the bullets to change.

I bumped the margin up for the <li> element and it solved it. I imagine it was still overlapping somehow.

IE7 takes height and width declarations very literally (it does not expand if the content is larger than the container), so perhaps your arrows were being cut off.

There was no overlapping the list images. Firefox shows the images if they are outside the "defined area" of the list. IE doesn’t and cuts off the images. So you think there is an overlap of something. Solution is only playing with margins. If there are different subsets in FF and IE you should use conditional comments for different margins. You know what conditional comments are?

I was hoping to avoid conditional comments

Maybe a date with Bill Gates would help?