Unordered list remove bullet points

For help and advice about coding

Moderator: Tech Moderators

User avatar
DJ
Posts: 2329
Joined: Sun Mar 18, 2007 8:48 pm
Tag: Cured
Contact:

Unordered list remove bullet points

Postby DJ » Sat Feb 11, 2012 1:25 am

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

User avatar
siteguru
Posts: 2124
Joined: Mon Apr 23, 2007 7:07 pm
Tag: SIR CUNTALOT
Location: Out of view ... but I AM watching you! MWUHAHAHAHA!!
Contact:

Re: Unordered list remove bullet points

Postby siteguru » Sat Feb 11, 2012 5:02 pm

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

User avatar
DJ
Posts: 2329
Joined: Sun Mar 18, 2007 8:48 pm
Tag: Cured
Contact:

Re: Unordered list remove bullet points

Postby DJ » Sun Feb 12, 2012 1:41 am

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. :/

User avatar
Blak
Tech Moderator
Posts: 1759
Joined: Mon Mar 19, 2007 12:07 pm
Tag: Hasn't realised that there are custom ranks yet
Contact:

Re: Unordered list remove bullet points

Postby Blak » Sun Feb 12, 2012 2:16 pm

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.

User avatar
DJ
Posts: 2329
Joined: Sun Mar 18, 2007 8:48 pm
Tag: Cured
Contact:

Re: Unordered list remove bullet points

Postby DJ » Mon Feb 13, 2012 10:51 am

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.


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 1 guest

cron