Css style <ul> not working properly

Question

Hi guys I really cant figure out why the images on my <ul> wont work.

I need to style the ul with a class but the <li> keeps looking the same. Here is my css code:

body{padding:0;margin:0;  background:#39424b; font-family: verdana;}
h1, h2{padding:0;margin:10px 0 10px 0;}
h1 {font-size: 150%;}
h2 {font-size: 110%;}
p{padding:0; margin:0 0 5px 0;}
a {color:#176092; text-decoration:none;}
a:hover {text-decoration:underline;}
#wrap {width:960px; margin: 0 auto; background:#999;}
#header, #footer {background: #0f1923; color:#fff; padding:10px 40px;}
#footer p {font-size:80%; text-align:right;}
#content {background:#ccc; padding:10px 40px;}
pre {font-size:85%; background:#fff; border:1px #ccc solid; padding:5px}
#checkjul ul {
list-style-image: url('http://dorchdanola-netbutik.dk/Resources/Files/general/checkbox-jul.png');
padding-left: 25px;
margin-bottom: 10px;
height: 19px;
}

#slide-out-div-jule-holder {
width: 600px;
height: 270px;
margin: 20px;
margin-top: 10px;

Here is my html code:

 <div class="slide-out-div">
        <a class="handle" href="http://link-for-non-js-users">Julehandel</a>
        <div style="float:left" class="slide-out-div-jule-holder">
       <b>K&oslash;b julegaver hos Dorch & Danola<br /> - Nemt, Sikkert og billigt!</b>
       <ul class="checkjul"><li>E-m&aelig;rket kontrolleret webshop for sikker handel</li>
      <li>Vi bytter alle ordre k&oslash;bt fra 20. oktober frem til og med den 15. januar 2015</li> 
        <li>Gratis ombytning af Julegaver - Vi sender returlabel </li>
       <li> Sidste bestillingsdato for julegaver er den 22. december.</li>
       <li> Hurtig levering - Fragt fra Kr. 39,-</li> 
      <b>Dorch & Danola &oslash;nsker alle en gl&aelig;delig jul og et rigtig godt nyt&aring;</b></ul>
    </div></div>

Answer 1

So it doesn't work because you are styling #checkjul ul but you don't have such an element. So to work you need to add those styles to your ul class .checkjul and it will work :)

  body { padding: 0; margin: 0; background: #39424b; font-family: verdana; } h1, h2 { padding: 0; margin: 10px 0 10px 0; } h1 { font-size: 150%; } h2 { font-size: 110%; } p { padding: 0; margin: 0 0 5px 0; } a { color: #176092; text-decoration: none; } a:hover { text-decoration: underline; } #wrap { width: 960px; margin: 0 auto; background: #999; } #header, #footer { background: #0f1923; color: #fff; padding: 10px 40px; } #footer p { font-size: 80%; text-align: right; } #content { background: #ccc; padding: 10px 40px; } pre { font-size: 85%; background: #fff; border: 1px #ccc solid; padding: 5px } .checkjul{ list-style-image: url('http://dorchdanola-netbutik.dk/Resources/Files/general/checkbox-jul.png'); padding-left: 25px; margin-bottom: 10px; height: 19px; } #slide-out-div-jule-holder { width: 600px; height: 270px; margin: 20px; margin-top: 10px; } 

 <div class="slide-out-div"> <a class="handle" href="http://link-for-non-js-users">Julehandel</a> <div style="float:left" class="slide-out-div-jule-holder"> <b>K&oslash;b julegaver hos Dorch & Danola<br /> - Nemt, Sikkert og billigt!</b> <ul class="checkjul"> <li>Em&aelig;rket kontrolleret webshop for sikker handel</li> <li>Vi bytter alle ordre k&oslash;bt fra 20. oktober frem til og med den 15. januar 2015</li> <li>Gratis ombytning af Julegaver - Vi sender returlabel</li> <li>Sidste bestillingsdato for julegaver er den 22. december.</li> <li>Hurtig levering - Fragt fra Kr. 39,-</li> <b>Dorch & Danola &oslash;nsker alle en gl&aelig;delig jul og et rigtig godt nyt&aring;</b> </ul> </div> </div> 

Answer 2

You have

<ul class="checkjul">

but you are defining your style as an ID, and applying it to the wrong element:

#checkjul ul

For this to work, you will need:

.checkjul li