Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Author Topic: How to overide CSS style for <ul> <li>???  (Read 702 times)

Tominator

  • Newbie
  • *
  • Karma: 2
  • Posts: 45
How to overide CSS style for <ul> <li>???
« on: April 18, 2012, 11:17:27 PM »

OK this is in the master stylesheet for my sNews 1.7 site.

ul li {
   list-style-type: square;
   list-style-position: inside;
}

It looks great for normal body content, but it also overrides the styles for Category listings in the sidebar menu. I do not want the sNews categories to have bullets in front.

So I've tried to put list-style: none; into the blocks that I THINK control how categories look but nothing changes.

I am working off an old template that was designed by liquidsilver and updated by Fred for me (who I can't seem to contact any more).

Here's the code for Sidebar items. Note where I tried to set the list style to none. Also tried a couple other spots. I always thought lower level CSS overrides globla CSS. Help

Code: [Select]
/* *** Sidebar items *** */
#sidebar {
width: 200px;
height:auto;
position: relative;
padding: 0;
background: #000066;
color: #fff;
}

#headerpic {
width:200px;
height:220px;
margin:0;
padding:0;
}

* html #headerpic {margin-bottom: -5px;}

#right_content {
margin:10px;
padding:10px;
}

.navcontainer {
position:relative;
margin:0;
padding:0;
}

.navcontainer ul {
margin: 0 0 10px 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
}

.navcontainer a {
display: block;
background-color: #000066;
border-top: 1px dashed #aaa;
padding: 6px 9px;
}

.navcontainer .subcat a {
border: none;
padding-top: 0px;
text-indent: 8px;
padding-bottom: 0;
font-size: 70%;
letter-spacing: 0;
}
.navcontainer .button {
border:none;
}

.navcontainer a:link, .navcontainer a:visited {
color: #ddd;
text-decoration: none;
}

.navcontainer a:hover {
background-color: #222266;
color: Yellow;
}
.navcontainer .category {
font-size: 125%;
letter-spacing: 1px;
}
Logged

mosh

  • Hero Member
  • *****
  • Karma: 77
  • Posts: 510
  • Awesome day :)
    • cms-zen
Re: How to overide CSS style for <ul> <li>???
« Reply #1 on: April 19, 2012, 04:25:31 PM »

in your case you can try:

<ul class="navcontainer ">
     <li>bla bla 1</li>
     <li>bla bla 2</li>
     <li>bla bla 3</li>
     <li>bla bla 4</li>
</ul>

without style
Code: [Select]
ul.navcontainer {
margin: 0 0 10px 0;
padding: 0;
list-style: none;
}

with style
Code: [Select]
ul.navcontainer {
margin: 0 0 10px 0;
padding: 0;
        list-style-type: square;
        list-style-position: inside;
}
« Last Edit: April 19, 2012, 04:39:06 PM by mosh »
Logged

Tominator

  • Newbie
  • *
  • Karma: 2
  • Posts: 45
Re: How to overide CSS style for <ul> <li>???
« Reply #2 on: April 20, 2012, 12:52:16 AM »

After fooling around, this worked:

Code: [Select]
.navcontainer li {
list-style-type: none;
}

But oddly, putting it into .navcontainer ul did not. I assume ".navcontainer ul" = "ul.navcontainer". I'm no CSS expert.
Logged