Need some quick CSS help.

Hello, I’m trying to get this CSS to work, and I don’t have time to play around with it, so I was hoping of posting this here, and checking back later hopefully to find a solution.

Here’s the image:

And this is the hover effect:

I hope you can assume what I am trying to get the hover effect to look like. I’ll paste the code below:

<div id="leftNav">
      <div class="dataTitle">Data &amp; Statistics</div>
      <ul>
        </ul><div class="divider"></div>
        <li><img src="images/icons/monitor.png" height="14" style="position:absolute; margin:1px 0 0 -24px;" width="16" />Bandwidth Usuage</li>
        <div class="divider"></div>
        <li><img src="images/icons/clock.png" height="15" style="position:absolute; margin:1px 0 0 -24px;" width="14" />Timestamps</li>
        <div class="divider"></div>
        <li><img src="images/icons/dashboard.png" height="13" style="position:absolute; margin:1px 0 0 -24px;" width="16" />Page Views</li>
        <div class="divider"></div>
        <li><img src="images/icons/globe.png" height="16" style="position:absolute; margin:1px 0 0 -24px;" width="15" />Traffic Sources</li>
        <div class="divider"></div>
        <li><img src="images/icons/map.png" height="16" style="position:absolute; margin:1px 0 0 -24px;" width="15" />Map Overlay</li>
        <div class="divider"></div>
        <li><img src="images/icons/flag.png" height="15" style="position:absolute; margin:1px 0 0 -24px;" width="16" />Goals</li>
        <div class="divider"></div>
        <li><img src="images/icons/report.png" height="16" style="position:absolute; margin:1px 0 0 -24px;" width="16" />Advanced Report</li>
        <div class="divider"></div>

    </div>

And the CSS :

#leftNav {
    padding:13px 0 0 16px;
    width:188px;
    background-color:#e4e4e4;
    float:left;
    font-size:12px;
    color:#3d464d;
    font-weight:bold;
    border:solid 1px #919191;
    border-top:none!important;
    text-shadow:#fafafa 0 1px;
}

.dataTitle {
    margin-bottom:11px;
}

#leftNav ul {
    padding-left:34px;
}

#leftNav li:hover {
    background:url(../images/left-sel.png) no-repeat;
    color:#FFF;
    text-shadow:#747474 0 -1px;
}

#leftNav li {
    list-style-type:none;
    padding:12px 0 12px 0;
}

.divider {
    margin-left:-49px;
    border-top:solid 1px #c8ccd1;
    border-bottom:solid 1px #ededed;
}

Any help would be greatly appreciated!! Thank you so much!

I don’t know if this is the problem, but you’re finishing the unsorted list before you’re adding any list items (see row 4 in the HTML ).

The UL padding left ?

I don’t know if this is the problem, but you’re finishing the unsorted list before you’re adding any list items (see row 4 in the HTML ).

Whoops that was my mistake, but still would be getting the same issue.

EDIT : Also, that’s not even in the code, must’ve been a mistake when I pasted the code in.

It’s easier to trouble shoot these things with live code so I can Firebug it but what happens when you change .divider to this:

.divider {
    margin-left: 0px;
    border-top:solid 1px #c8ccd1;
    border-bottom:solid 1px #ededed;
}

That just shifts the dividers over to the right more, and the hover background is still in the same spot.

Also, can’t you put .divider into the list instead of separate div’s each time you want the border?

• Bandwidth Usuage
• Timestamps

I could but once again, even if I did that, it still would not change anything

Actually the solution is quite easy:

<li><img src="images/icons/globe.png" height="16" width="15" style="position:absolute; margin:1px 0 0 -24px;" />Traffic Sources</li>

Instead of this, wrap it in an extra div!

<li><img src="images/icons/globe.png" height="16" width="15" style="position:absolute; margin:1px 0 0 -24px;" /><div style="margin-left: 30px;">Traffic Sources</div></li>

and remove the padding from the li or put the image tag in the div, too and…