962 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
webdesigndeluxe says

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!

253 posts
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Located in Sweden
+2 more
graphic_dev says

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 ).

1039 posts
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+9 more
Pixelworkshop says

The UL padding left ?

962 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
webdesigndeluxe says
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.

1950 posts Do the Needful
  • Has sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
+10 more
JamiGibbs says

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;
}

962 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
webdesigndeluxe says
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.

1950 posts Do the Needful
  • Has sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
+10 more
JamiGibbs says

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

      <ul>
        <li class="divider"><img src="images/icons/monitor.png" height="14" width="16" style="position:absolute; margin:1px 0 0 -24px;" />Bandwidth Usuage</li>
        <li class="divider"><img src="images/icons/clock.png" height="15" width="14" style="position:absolute; margin:1px 0 0 -24px;" />Timestamps</li>
      </ul>
962 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
webdesigndeluxe says
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 :D

577 posts Themes and Graphics
  • Has been part of the Envato Community for over 5 years
  • Has referred 50+ members
  • Has sold $250,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+9 more
Bebel says

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… :)

by
by
by
by
by
by