Now, should be NOT in the subject

Now IE 6 & 7 seem to be ignoring my margins/padding...

This is the page I am having trouble with

this is the only CSS I changed:

li.sixphaseapproach{
list-style: url(images/bullet.gif);
text-align: justify;
margin: 0px 25px 20px 25px;
padding: 0px 25px 0px 0px;
}

and the html:

<ul>
<li class="sixphaseapproach"><span class="sixphase">Meet </span>and listen to your management team and department managers to develop a comprehensive program with suggested solutions that are achievable within your timelines</li>

<li class="sixphaseapproach"><span class="sixphase">Develop </span>a design solution utilizing our CAD specialists to create a complete under-standing of your  equipment and floor space requirements within a precise integration plan</li>

<li class="sixphaseapproach"><span class="sixphase">Present </span>and review a design solution with all key team members from each department to ensure all programming needs have been met</li>

<li class="sixphaseapproach"><span class="sixphase">Review </span>and acknowledge the order process and confirm critical time lines for project management schedules</li>

<li class="sixphaseapproach"><span class="sixphase">Install </span>product and systems solution in accordance with customer&rsquo;s time line</li>

<li class="sixphaseapproach"><span class="sixphase">Complete </span>project and conduct personnel training program as specified</li>
</ul>

Please help

I find it's easier just to use padding and no margins. Browsers behave more consistently with padding.

Something like this:

padding: 0px 50px 20px 25px;
margin: 0;

See what happens when you do that.

The other alternative is that your sixphase text is a different size, although I don't think it's really playing in.

Mind you, it's not really IE in this case that's responsible...you're clearly using Dr*amw*av*r. Using editors like that will get you into these types of situations more often than not.

Well I am using Dreamweaver, but I am also editing the html and wrote the CSS myself.

The problem is when I use padding, it only adds space between the bullet image, and the text. It does not add space before the bullet...

I need there to be a fair amount of space before the bullet, and a small space between the bullet and the text, and then an even amount of space between the text and the right object.

25px (bullet image) 5px (text) 25px

If it wasn't IE causing the problem, then why does it work fine in FF and Opera?

Have you tried putting a left margin on the UL to push the whole thing over ?
I'd also make the suggestion that you put a width on your UL equal to the white space you have on the left side.

OK, here is what I have now:

ul{
margin: 10px 0px 20px 20px;
width: 540px;
}
li.sixphaseapproach{
list-style: url(images/bullet.gif);
text-align: justify;
margin: 0px 0px 20px 25px;
padding: 0px 25px 0px 0px;
}

Looks great in IE7 and FF... weird thing is... in IE6 my bullet images are chopped off on the left side??? see here in IE6



Margins look great though LOL