Well, this designing with CSS is great... just run into a few odd things here and there. I have been able to solve most of them, but this one has me lost...

I have an image bulleted list. So when I am previewing it DW, it looks fine except the problem I am having is when the list text wraps to the next line, it doesn't want to line up flush with the line above it (see screen shot)

Now, when I upload the files and test it live, in FF the padding and margins applied to the list do not seem to be working right. In IE it is actually working better (!) However, in neither of them is the style working that is applied to the first word of each list item...

Here is what is going on:
http://www.systemsnspace.com/new2007.../sixphase.html

and here are the relevant styles:

.6phase {
    color: #CC0000;
    font-size: 13px;
    font-weight: bold;
}
.6phasetext {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
li {
    list-style-image: url(images/bullet.gif);
    padding-left: 20px;
    padding-right: 20px;
}
#content {
    background: #FFFFFF;
    position: absolute;
    padding: 10px 10px 10px 10px;
    height: 354px;
    width: 552px;
    left: 0px;
    top: 179px;
}

and the relevant html:

<div id="content">
  
<img src="../images/title-sixpahse.gif" width="282" height="38" />
<br />
<span class="6phasetext">
<ul>
<li><span class="6phase">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>
<br />
<br />
<li><span class="6phase">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>
<br />
<br />
<li><span class="6phase">Present </span>and review a design solution with all key team members from each department to ensure all programming needs have been met</li>
<br />
<br />
<li><span class="6phase">Review </span>and acknowledge the order process and confirm critical time lines for project management schedules</li>
<br />
<br />
<li><span class="6phase">Install </span>product and systems solution in accordance with customer&rsquo;s time line</li>
<br />
<br />
<li><span class="6phase">Complete </span>project and conduct personnel training program as specifie</li>
</ul></span>
</div>

Thanks again for your help!!

The easier solution here is to NOT use the bullet feature at all. Instead, put the bullet image you have in as a BACKGROUND to the <li> and then you can use padding and margins in both browsers consistently for the spacing you want to achieve.

So, you'd have something like this:
li{
background: url(images/bullet.gif) no-repeat left center;
padding: 0 20px;
}

Get rid of all the unnecessary <br />s and use margins on your <li> to space out the items.

Thanks for the suggestion LadynRed

I did what you said, and it works better without all the

<br />

s

I am still having the problem of the .6phase style not taking for the first word of each list item. Any ideas?

Also, when i put the background: left center, the bullet image does not line up with the first line, and if I set it as left top, it is too high...

Once I have these "special layout" pages done, the ones that are just created from templates will be much easier

Thanks for your help

I didn't include the html or styles cause they really haven't changed much from the first post, other than the changes you suggested. Let me know if you need the updated ones.

I can't think of the reason why the first word isn't taking the style but as for the bullet. This could probably be fixed by adding some transparent lines of pixels to the top of the image therefore essentially creating a margin-top for you. This way, you could change it to top left and it would line up for you.

Thanks zincoxide, I don't know why I didn't think of that...

So does anyone have any idea why the first word of my list text is not taking the style???

Page link: http://www.systemsnspace.com/new2007.../sixphase.html

Here is the code for the page

<div id="content">
  
<img src="../images/title-sixpahse.gif" width="282" height="38" />
<br />
<span class="6phasetext">
<ul>
<li><span class="6phase">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><br /><br />

<li><span class="6phase">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><br /><br />

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

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

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

<li><span class="6phase">Complete </span>project and conduct personnel training program as specified</li><br /><br />
</ul></span>
</div>

The styles:

.6phase {
    color: #CC0000;
    font-size: 13px;
    font-weight: bold;
    margin-left: 15px;
}
.6phasetext {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    margin-left: 15px;
}
li{
    list-style: none; 
    background: url(images/bullet.gif) no-repeat left top;
    margin: 0px 15px 5px 20px;
    padding: 0 20px;
}
#content {
    background: #FFFFFF;
    position: absolute;
    padding: 10px 10px 10px 10px;
    height: 354px;
    width: 552px;
    left: 0px;
    top: 179px;
}

Thanks for your help!!

As I suspected, the problem lies with your class naming for 6phase. Here's what the validator says:

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units)To make ".6phaseapproach" a valid class, CSS2 requires the first digit to be escaped (".\36phaseapproach")

You also have some other errors:
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2F www.systemsnspace.com%2Fnew2007%2Fabout%2Fsixphase .html

Instead of 6phase, make it "sixphase" and the style gets applied as you wanted.

Thanks LadynRed!

That solved the problem... but now I have a problem with my bulleted paragraphs not aligning with the first word...

Any thoughts?

http://www.systemsnspace.com/new2007.../sixphase.html

Take the margin-left off of .sixphase will do it