All geek questions in one place

List-style not showing for list items, despite importance?

Ok, I have a Wordpress theme installed here (www.sullivansuccesscoaching.com/home ... we need / home because index.html still exists that hides the wordpress installation. This is intentional).

On the homepage, I have run jquery cycle.lite for the .animCont class, which basically reduces slides with transparency changes. The ol, ul elements are reset, using the reset stylesheet similar to Eric Meyer's, as such, all ol, ul elements are individually decorated.

Inside each .animCont li there is a div.teaser. Some div.teaser have unordered lists, and I just can't get the list style!

Currently, four lines of CSS code that seem relevant are as follows:

.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 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: The following 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;
}
+3
source share
2 answers

I managed to show the bullets by removing the display properties for 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 helps you on the right track.

+3
source

Add margin-leftto <li>, and it should work.

.animCont .teaser ul li { margin-left: 20px; }
+3
source

Source: https://habr.com/ru/post/1722488/

More articles:


All Articles