views:

124

answers:

2

Ok, I have a wordpress theme installed here (www.sullivansuccesscoaching.com/home ...we need the /home because there is still an index.html hiding the wordpress install. This is intentional).

On the /home page I have a jquery cycle.lite running for the .animCont class which basically fades the slides using opacity changes. The ol, ul elements are reset using a reset stylesheet similar to Eric Meyer's, as such, all the ol, ul elements are styled individually.

Inside each .animCont li exists a div.teaser. In some of the div.teaser's there are unordered lists and I simply cannot get the list-style to take!

Currently, the four lines of css code that are seemingly relevant are:

.featured .animCont .alignleft {margin:0 36px 0 0;}
.featured .animCont .alignright {margin:0 0 0 36px;}
.featured .animCont .teaser ul, .featured .animCont .teaser ul li {display:block;list-style-type:disc !important;}
.featured .animCont .teaser ul li {line-height:18px;margin:6px 0 6px 20px;list-style-position:outside !important;}

For demonstration purposes here is a basic layout for the ul.animCont

<ul class="animCont">
    <li class="clearfix">
        <a href="linkurl"><img src="imageurl" /></a>
        <div class="teaser">
            <h2>The title</h2>
            <ul>
                <li>something1</li>
                <li>something2</li>
                <li>something3</li>
            </ul>
        </div><!-- // .teaser -->
    </li><!-- slide1 -->
    <li class="clearfix">
        <a href="linkurl"><img src="imageurl" /></a>
        <div class="teaser">
            <h2>The title</h2>
            <ul>
                <li>something1</li>
                <li>something2</li>
                <li>something3</li>
            </ul>
        </div><!-- // .teaser -->
    </li><!-- slide2 -->
</ul><!-- // .animCont

Edit: Below are the computed styles copied from Firebug

.featured .animCont .teaser ul li {
line-height:18px;
list-style-position:outside !important;
margin:6px 0 6px 20px;
}
style.css (line 238)
.featured .animCont .teaser ul, .featured .animCont .teaser ul li {
display:block;
list-style-type:disc !important;
}
style.css (line 237)
.featured .animCont li {
display:none;
width:100%;
}
style.css (line 232)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:0 none;
font-size:100%;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
vertical-align:baseline;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromul
.featured .animCont .teaser ul, .featured .animCont .teaser ul li {
list-style-type:disc !important;
}
style.css (line 237)
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
reset.css (line 32)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv.teaser
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromli.clearfix
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromul.animCont
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
reset.css (line 32)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv.featured_container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv.featured
.featured {
color:#E6E6E6;
}
style.css (line 213)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv#floatswrap.smallftfl
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv#pg_wrap
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited frombody.home
html > body {
font-size:14px;
}
basic.css (line 6)
body {
color:#273746;
font-family:Tahoma;
}
style.css (line 76)
body {
font-family:"Helvetica Neue","Lucida Grande",Helvetica,"microsoft sans serif",Arial,Verdana,sans-serif;
font-size:75%;
}
basic.css (line 1)
body {
line-height:1;
}
reset.css (line 29)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
A: 

Add some margin-left to your <li>s and it should work.

.animCont .teaser ul li { margin-left: 20px; }
Greg
no dice... .featured .animCont .teaser ul li {line-height:18px;margin:6px 0 6px 20px;list-style-position:outside !important;} doesn't let the bullets show.
ivannovak
I've tried this solution and edited the question reflecting as such. This made no change to the way the page renders.
ivannovak
Hmmm worked when I tried it
Greg
I added your line directly into the css and, as you can see at sullivansuccesscoaching.com, nothing changed... at least in FF, Safari, and Chrome)
ivannovak
+2  A: 

I was able to show the bullets by removing the display properties for the CSS rules as shown below:

.featured .animCont .teaser ul, .featured .animCont .teaser ul li { /* display: block; */ }

and

.featured .animCont li { /* display: none; */ }

I'm not sure if this is exactly what you need, but hopefully it will help get you on the right track.

jennyfofenny
You are amazing my friend. Thanks heaps!
ivannovak
Yeah, list style does not show up on block level elements, if the list item had the display of 'list-item', it would show list style, but list items are display: list-item by default.
Sir David of Lee