Unordered list remove bullet points

[DJ]

Howdy!
Ok this should be so straight forward but it's not working and I can't see why. I'm trying to edit a page on my Tumblr so I'm not sure if it's the theme css dicking things up but it shouldn't do.
As you can see in the code, I have two unordered lists and have icon images before the text. The thing is bullet points are showing over the top of the little icon images and I want to remove them. I thought it'd be straight forward but I can't shift them. Can someone look at the below please and tell me where the heck I'm getting this simple thing wrong please? Thanks.

In the page html I have this:

Code: Select all

<div id="skillsliststyle">
<ul class="skillslist">
<li><img alt="After Effects" src="http://media.tumblr.com/tumblr_lymv1yLlhz1qiyetr.png" />After Effects</li>
<li><img alt="Dreamweaver" src="http://media.tumblr.com/tumblr_lymv48BczY1qiyetr.png" />Dreamweaver</li>
<li><img alt="Fireworks" src="http://media.tumblr.com/tumblr_lymv4fT2qp1qiyetr.png" />Fireworks</li>
<li><img alt="Illustrator" src="http://media.tumblr.com/tumblr_lymv4lkXju1qiyetr.png" />Illustrator</li>
<li><img alt="Photoshop" src="http://media.tumblr.com/tumblr_lymv4viKRg1qiyetr.png" />Photoshop</li>
<li><img alt="Premiere Pro" src="http://media.tumblr.com/tumblr_lymv51TsdZ1qiyetr.png" />Premiere Pro</li>
<li><img alt="Soundbooth" src="http://media.tumblr.com/tumblr_lymv5eWCUK1qiyetr.png" />Soundbooth</li>
</ul>
<ul class="skillslist">
<li><img alt="Can I do it?" src="http://media.tumblr.com/tumblr_lymv8cvnh51qiyetr.png" />I make great spreadsheets</li>
</ul>
</div>

In the CSS box in Tumblr I have this:

Code: Select all

/* Lists */

# skillsliststyle ul {
list-style-type: none;
}

ul.skillslist{
   float:left;
   width:48%;
   margin:5px 1% 20px 1%;
font: 12px/20px 'Courier New', Courier, monospace;
}
ul.skillslist li{
   border-top:1px dotted;
   padding:5px 10px 5px 6px;
   font-weight:bold;
font: 12px/20px 'Courier New', Courier, monospace;
}
ul.skillslist li img{
   display:inline;
   padding:1px;
   float:left;
   clear:both;
   margin:-4px 6px 0 0;
font: 12px/20px 'Courier New', Courier, monospace;
}
ul.aboutlist{
   float:left;
   width:48%;
   margin:0 1% 20px 1%;
font: 12px/20px 'Courier New', Courier, monospace;
}
ul.aboutlist li{
   border-top:1px;
   padding:0 0 0 6px;
   font-weight:bold;
font: 12px/20px 'Courier New', Courier, monospace;
}

[siteguru]

Put the list-style-type: none; definition into the ul.skillslist li declaration?

[DJ]

That does work in a straight HTML test if you paste the code into an editor and see the result.
However, on my Tumblr is does nothing. I've currently got that line in all the classes and it doesn't work, but in a test page it does. It's a bit weird.
So what do I do now? The code works, just not on Tumblr. :/

[Blak]

Sounds like you've got a more specific rule elsewhere that is turning the list-style-type back on again. Whip out Chome's web inspector / Firebug and see if you can spot it. Then either make your rule more specific or cheat and use !important.

[DJ]

Yeah that thought occured to me as well, that the main theme CSS is over-riding my custom style sheet. I shall have a study later, thanks for the tip. I like the idea of cheating too, just cos I'm in to quick n dirty wins. Thanks mate.