#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    List style isn't working


    I have a site I'm working on, UL is set to list-style: none. I over wrote the ul on #post to show circle in the post data
    #post ul{ list-style-type:circle; }, but it doesn't work. When I inspect the element, I don't see anything else interfering with it.

    Could I get some direction? What did I miss. I didn't build the site, I'm just modifying the stylesheet.



    Code:
    /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
    -------------------------------------------------------------- */
    
    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 {
    	background: transparent;
    	border: 0;
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    body {
    	font-family:Arial,Tahoma,Verdana;
    	font-size:14px;
    	line-height: 1;
    }
    a {
    	color:#000000;
    	text-decoration: none;
    }
    h1, h2, h3, h4, h5, h6 {
    	clear: both;
    	font-weight: normal;
    }
    ol, ul {
    	list-style: none ;
    }
    hr {
    	width:100%;
    	background:url('images/dash.png') bottom left repeat-x;
    	height:3px;
    	border:0;
    	padding:10px 0;
    }
    blockquote {
    	quotes: none;
    }
    blockquote:before, blockquote:after {
    	content: '';
    	content: none;
    }
    del {
    	text-decoration: line-through;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    a img {
    	border: none;
    }
    div {
    	overflow: hidden;
    }
    
    h3 {
    	font-size:26px;
    	font-family:Tahoma,Arial,Verdana;
    	text-transform:uppercase;
    	
    }
    
    /* Glboal styles */
    .clear {clear:both;}
    .floatl {float:left;}
    .floatr {float:right;}
    .red {color:#d82328;}
    .buyticketsnow {	width:423px;height:68px;margin-top:8px 0;clear:right;display:block;text-indent:-999999px;background:url('images/buyticketsbutton.png'); }
    
    #image img { width:100%; }
    .thumb{ float:left; margin:20px 20px 0 0;}
    
    /* =Layout
    -------------------------------------------------------------- */
    
    /*
    LAYOUT: Two columns
    DESCRIPTION: Two-column fixed layout with one sidebar right of content
    */
    
    div#wrapper {
    	clear:both;
    	width:1057px;
    	margin:0 auto;
    }
    
    /* Header */
    
    div#wrapper div#header {
    	clear:both;
    	width:100%;
    	height:234px;
    	position:relative;
    	margin-bottom:28px;
    }
    
    div#wrapper div#header .logo {
    	left:50%;
    	width:425px;
    	height:160px;
    	position:absolute;
    	margin-left:-212px;
    	margin-top:8px;
    	display:block;
    	overflow:hidden;
    	text-indent:-999999px;
    	background:url('images/logo.png');
    }
    
    div#wrapper div#header div#tickets {
    	float:right;
    	width:92px;
    	height:80px;
    	font-size:19px;
    	font-weight:bold;
    	padding:18px 0 0 8px;
    	line-height:22px;
    	color:#ffffff;
    	background:#484848;
    	text-transform:uppercase;
    }
    
    div#wrapper div#header div#tickets  a{
    	color:#ffffff;	
    }
    
    div#wrapper div#header div#content {
    	clear:both;
    	width:100%;
    	height:54px;
    	margin-top:125px;
    	background:#3cc0c9;
    }
    
    div#wrapper div#header div#content span.title {
    	font-size:26px;
    	padding:0 20px;
    	line-height:54px;
    	color:#ffffff;
    	text-transform:uppercase;
    }
    
    /* Navigation */ 
    div#wrapper div#header div#navigation-wrapper {
    	width:100%;
    	clear:both;
    	background:url('images/navigation-bg.png') repeat-x;
    	margin-top:7px;
    	padding:16px 0;	
    }
    
    div#wrapper div#header ul#navigation {
    	clear:both;
    	height:16px;
    	display:inline-block;
    }
    
    div#wrapper div#header ul#navigation li {
    	float:left;
    	height:18px;
    	border-right:2px solid #000000;
    }
    
    div#wrapper div#header ul#navigation li:last-child {
    	border:none;
    }
    
    div#wrapper div#header ul#navigation li a {
    	color:#000000;
    	padding:0 29px;
    	text-transform:uppercase;
    	font-size:15px;
    	font-weight:bold;
    	font-family:Tahoma,Arial,Verdana;
    }
    
    div#wrapper div#header ul#navigation li a:hover {
    	color:#d82328;
    }
    div#wrapper div#header ul#navigation li.current-menu-item a {
    	color:#3cc0c9;
    }
    
    /* Sidebar */ 
    
    div#wrapper div#sidebar {
    	float:right;
    	width:320px;
    }
    
    div#wrapper div#sidebar div#title {
    	clear:both;
    	width:100%;
    	background:#3cc0c9;
    	height:44px;
    	padding:0px 9px;
    	line-height:44px;
    	color:#ffffff;
    	text-transform:uppercase;
    	font-size:26px;
    	font-family:Tahoma,Arial,Verdana;
    }
    
    div#wrapper div#sidebar div#venue {
    	width:100%;
    	height:337px;
    	border:0px;
    	margin-bottom:38px;
    }
    
    div#wrapper div#sidebar ul#news {
    	clear:both;
    	width:100%;
    	margin-bottom:38px;
    }
    
    div#wrapper div#sidebar ul#news li {
    	background:url('images/dash.png') bottom left repeat-x;
    	line-height:20px;
    	padding-bottom:10px;
    }
    
    div#wrapper div#sidebar ul#news li  h3.red{
    	line-height:46px;
    }
    div#wrapper div#sidebar ul#news li  h3{
    	line-height:30px;
    }
    
    div#wrapper div#sidebar ul#news li div#readmore{
    	color:#3cc0c9; 
    	text-transform:uppercase; 
    	text-align:right; 
    	width:100%;
    }
    
    div#wrapper div#sidebar ul#news li div#readmore a{
    	color:#3cc0c9; 
    	font-weight:bold;
    	font-family:Tahoma,Arial,Verdana;
    }
    
    div#wrapper div#sidebar ul#sponsors {
    	width:100%;
    }
    
    div#wrapper div#sidebar ul#sponsors li{
    	padding:30px 0px;
    	clear:both;	
    	text-align:center;
    	display: none;
    }
    
    /* Footer */
    
    div#footer {
    	width:100%;
    	clear:both;
    	margin:136px auto 0;
    	background:#3cc0c9;
    	height:175px;
    	padding-top:28px;
    	background-size: cover;
    }
    
    @media screen and (max-device-width: 1024px) {
        div#footer {
    	width:104%;
        }
    }
    
    
    div#footer div#content {
    	width:825px;
    	margin:0 auto;
    	position:relative;
    	height:100%;
    }
    
    div#footer div#content div#navigation-wrapper {
    	width:100%;
    	clear:both;
    }
    
    div#footer div#content ul#navigation {
    	clear:both;
    	height:18px;
    	display:inline-block;
    }
    
    div#footer div#content ul#navigation li {
    	float:left;
    	height:18px;
    	border-right:2px solid #ffffff;
    	padding:0 18px;
    }
    
    div#footer div#content ul#navigation li:last-child {
    	border:none;
    	padding:0 0 0 23px ;
    }
    
    div#footer div#content ul#navigation li:first-child {
    	padding:0 23px 0 0 ;
    }
    
    div#footer div#content ul#navigation li a {
    	color:#ffffff;
    	text-transform:uppercase;
    	font-size:15px;
    	font-weight:bold;
    	font-family:Tahoma,Arial,Verdana;
    }
    
    div#footer div#content ul#navigation li a:hover {
    	color:#d82328;
    }
    
    div#footer div#content .logo {
    	left:50%;
    	width:250px;
    	height:95px;
    	position:absolute;
    	margin-left:-125px;
    	margin-top:23px;
    	display:block;
    	overflow:hidden;
    	text-indent:-999999px;
    	background:url('images/footer-logo.png');
    }
    
    div#footer div#content ul#networks {
    	margin-top:60px;
    	float:right;
    }
    
    div#footer div#content ul#networks li{
    	padding:0 15px;
    	float:left;
    }
    
    div#footer div#content ul#networks li:last-child{
    	padding:2px 0 15px 12px;
    }
    
    div#footer div#content .id {
    	float:left;
    	margin-top:60px;
    }
    
    /* Content */
    
    div#wrapper div#container {
    	float:left;
    	width:709px;
    	font-size:18px;
    	font-family:Verdana, Tahoma, Arial;
    	line-height:36px;
    }
    
    div#wrapper div#post {
    	clear:both;
    	width:100%;
    	font-size:18px;
    	font-family:Verdana, Tahoma, Arial;
    	line-height:36px;
    }
    
    div#wrapper div#post ul{
    list-style-type:circle;
    }
    
    
    div#wrapper div#post h1{
    	margin:0 0 20px 0;
    	color:#484848;
    	text-transform:uppercase;
    	font-size:45px;
    	font-family:Verdana, Tahoma, Arial;
    	font-weight:bold;
    }
    div#wrapper div#post h5{
    	margin:0 0 6px 0;
    	color:#3cc0c9;
    	text-transform:uppercase;
    	font-size:25px;
    	font-family:Verdana, Tahoma, Arial;
    	font-weight:bold;
    }
    .red {color:#d82328;}
    .connect {color:#3cc0c9;}
    div#wrapper div#post h6{
    	margin:0 0 4px 0;
    	color:#d82328;
    	text-transform:uppercase;
    	font-size:25px;
    	font-family:Verdana, Tahoma, Arial;
    	font-weight:bold;
    }
    div#wrapper div#post p{
    	padding:25px 0;
    }
    div#wrapper div#post p a{
    	text-decoration:underline;
    }
    
    
    
    div#wrapper div#post input {
    	padding:10px;
    	margin:0 20px 15px 0;
    	background:#d8d8d8;
    	border:0;
    	width:320px;
    }
    
    div#wrapper div#post input.last {
    	padding:10px;
    	margin:0 0 15px 0;
    	background:#d8d8d8;
    	border:0;
    	width:320px;
    }
    
    div#wrapper div#post input.first {
    	padding:10px;
    	margin-bottom:15px;
    	margin-left:0;
    	background:#d8d8d8;
    	border:0;
    	width:60px;
    }
    
    div#wrapper div#post input.second{
    	padding:10px;
    	margin-bottom:15px;
    	margin-left:0;
    	background:#d8d8d8;
    	border:0;
    	width:85px;
    }
    
    div#wrapper div#post input.third {
    	padding:10px;
    	margin-bottom:15px;
    	margin-left:0;
    	background:#d8d8d8;
    	border:0;
    	width:184px;
    }
    
    div#wrapper div#post input.submit {
    	width: 700px;
    	height: 54px;
    	margin-left:0;
    	background: url('images/button.jpg');
    	border:0;
    	text-transform:uppercase;
    	font-size:45px;
    	font-family:Arial, Verdana, Tahoma;
    	color:#ffffff;
    }
    
    div#wrapper div#post textarea {
    	border:0;
    	background:#d8d8d8;
    	padding:10px;
    	margin:0 0 15px 0;
    	width:680px;
    }
    
    
    
    /* TABLE CONTACT */
    div#wrapper div#post table {
    	margin:30px 0;
    	font-size:18px;
    	width:700px;
    }
    
    div#wrapper div#post table tr{
    	height:35px;
    }
    
    div#wrapper div#post table td{
    	text-transform:uppercase;
    }
    
    
    div#wrapper div#post ul#line-list {
    	width:100%;	
    }
    
    div#wrapper div#post ul#line-list li {
    	float:left;
    	padding:2px 30px 35px 30px;
    	text-transform:uppercase;
    	color:#222222;
    	font-size:15px;
    	font-family:Verdana, Tahoma, Arial ;
    	font-weight:bold;
    	text-align:center;	
    }
    
    div#wrapper div#post ul#line-list li.sponsors {
    	padding:35px 110px 35px 0;
    }
    
    
    div#wrapper div#post ul#vertical-list {
    	width:100%;	
    	padding: 0 25px 0 70px;
    	list-style-type: disc;
    }
    
    div#wrapper div#post ul#second-vertical-list {
    	float:left;
    	padding:0 40px 0 0;
    	text-transform:uppercase;
    }
    
    div#wrapper div#post div#topics {
    	width:100%;
    	background:#aaaaaa;
    }
    
    div#wrapper div#post div#topics h1{
    	color:#ffffff;	
    	text-transform:uppercase;
    	font-size:38px;
    	font-family:Arial, Verdana, Tahoma;
    	font-weight:bold;
    	float:left;
    	padding:12px 0 0 12px;
    	
    }
    
    div#wrapper div#post div#topics a.grey{
    	color:#484848;	
    	background:#3cc0c9;
    	margin:6px 10px;
    	text-transform:uppercase;
    	font-size:38px;
    	font-family:Arial, Verdana, Tahoma;
    	font-weight:bold;
    	float:left;
    	padding:12px 12px;
    }
    
    div#wrapper div#post div#topics a.blue{
    	color:#3cc0c9;	
    	background:#484848;
    	margin:6px 10px;
    	text-transform:uppercase;
    	font-size:38px;
    	font-family:Arial, Verdana, Tahoma;
    	font-weight:bold;
    	float:left;
    	padding:12px 12px;
    }
    
    div#wrapper div#post div#topics a.red{
    	color:#ffffff;
    	background:#d61e2d;
    	margin:6px 10px;
    	text-transform:uppercase;
    	font-size:38px;
    	font-family:Arial, Verdana, Tahoma;
    	font-weight:bold;
    	float:left;
    	padding:12px 12px;
    }
    
    div#wrapper div#post div#also {
    	width:100%;
    	padding:90px 0 0 0;
    
    }
    
    div#wrapper div#post ul#news {
    	clear:both;
    	width:100%;
    	margin-bottom:38px;
    }
    
    div#wrapper div#post ul#news li {
    	background:url('images/dash.png') bottom left repeat-x;
    	line-height:20px;
    	padding-bottom:20px;
    }
    
    div#wrapper div#post ul#news li  h3.red{
    	line-height:46px;
    }
    div#wrapper div#post ul#news li  h3{
    	line-height:30px;
    }
    
    div#wrapper div#post ul#news li div#readmore{
    	color:#3cc0c9; 
    	text-transform:uppercase; 
    	text-align:right; 
    	width:100%;
    }
    
    div#wrapper div#post ul#news li div#readmore.img{
    	color:#3cc0c9; 
    	text-transform:uppercase; 
    	float:right; 
    	width:200px;
    }
    
    div#wrapper div#post ul#news li div#readmore a{
    	color:#3cc0c9; 
    	font-weight:bold;
    	font-family:Tahoma,Arial,Verdana;
    }
    
    div#wrapper div#post ul#news li div#caption {
    	float:left;
    	width:315px;
    }
    
    div#wrapper div#post ul#news li  img{
    	padding-bottom:10px;
    }
    
    div#wrapper div#post div#speaker {
    	width:100%;
    	padding:38px 0;
    }
    div#wrapper div#post div#sponsor {
    	width:100%;
    	padding:38px 20px;
    }
    #speakerinfo {position: relative; left:240px; top: 150px; }
    .speakername { font-size:25px; color:#3cc0c9; text-transform:uppercase;font-family:Verdana, Tahoma, Arial; font-weight:bold;}
    .tagline {position:relative; top:-10px;}
    
    
    /* Speaker Post */
    div#wrapper div#speakerpost {
    	clear:both;
    	width:100%;
    	font-size:18px;
    	font-family:Verdana, Tahoma, Arial;
    	line-height:36px;
    }
    div#wrapper div#speakerpost a {
    	color:#3CC0C9;
    }
    
    div#wrapper div#speakerpost h1{
    	margin:0 0 20px 0;
    	color:#3cc0c9;
    	text-transform:uppercase;
    	font-size:35px;
    	font-family:Verdana, Tahoma, Arial;
    	font-weight:bold;
    }
    div#wrapper div#speakerpost h5{
    	margin:0 0 6px 0;
    	color:#3cc0c9;
    	text-transform:uppercase;
    	font-size:25px;
    	font-family:Verdana, Tahoma, Arial;
    	font-weight:bold;
    }
    .red {color:#d82328;}
    .connect {color:#3cc0c9;}
    div#wrapper div#speakerpost h6{
    	margin:0 0 4px 0;
    	color:#d82328;
    	text-transform:uppercase;
    	font-size:25px;
    	font-family:Verdana, Tahoma, Arial;
    	font-weight:bold;
    }
    div#wrapper div#speakerpost p{
    	padding:25px 0;
    }
    div#wrapper div#speakerpost p a{
    	text-decoration:underline;
    }
    
    
    
    div#wrapper div#speakerpost input {
    	padding:10px;
    	margin:0 20px 15px 0;
    	background:#d8d8d8;
    	border:0;
    	width:320px;
    }
    
    div#wrapper div#speakerpost input.last {
    	padding:10px;
    	margin:0 0 15px 0;
    	background:#d8d8d8;
    	border:0;
    	width:320px;
    }
    
    div#wrapper div#speakerpost input.first {
    	padding:10px;
    	margin-bottom:15px;
    	margin-left:0;
    	background:#d8d8d8;
    	border:0;
    	width:60px;
    }
    
    div#wrapper div#speakerpost input.second{
    	padding:10px;
    	margin-bottom:15px;
    	margin-left:0;
    	background:#d8d8d8;
    	border:0;
    	width:85px;
    }
    
    div#wrapper div#speakerpost input.third {
    	padding:10px;
    	margin-bottom:15px;
    	margin-left:0;
    	background:#d8d8d8;
    	border:0;
    	width:184px;
    }
    
    div#wrapper div#speakerpost input.submit {
    	width: 700px;
    	height: 54px;
    	margin-left:0;
    	background: url('images/button.jpg');
    	border:0;
    	text-transform:uppercase;
    	font-size:45px;
    	font-family:Arial, Verdana, Tahoma;
    	color:#ffffff;
    }
    
    div#wrapper div#speakerpost textarea {
    	border:0;
    	background:#d8d8d8;
    	padding:10px;
    	margin:0 0 15px 0;
    	width:680px;
    }
    /* =WordPress Core
    -------------------------------------------------------------- */
    .alignnone {
        margin: 5px 20px 20px 0;
    }
    
    .aligncenter,
    div.aligncenter {
        display: block;
        margin: 5px auto 5px auto;
    }
    
    .alignright {
        float:right;
        margin: 5px 0 20px 20px;
    }
    
    .alignleft {
        float: left;
        margin: 5px 20px 20px 0;
    }
    
    .aligncenter {
        display: block;
        margin: 5px auto 5px auto;
    }
    
    a img.alignright {
        float: right;
        margin: 5px 0 20px 20px;
    }
    
    a img.alignnone {
        margin: 5px 20px 20px 0;
    }
    
    a img.alignleft {
        float: left;
        margin: 5px 20px 20px 0;
    }
    
    a img.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
    
    .wp-caption {
        background: #fff;
        border: 1px solid #f0f0f0;
        max-width: 96%; /* Image does not overflow the content area */
        padding: 5px 3px 10px;
        text-align: center;
    }
    
    .wp-caption.alignnone {
        margin: 5px 20px 20px 0;
    }
    
    .wp-caption.alignleft {
        margin: 5px 20px 20px 0;
    }
    
    .wp-caption.alignright {
        margin: 5px 0 20px 20px;
    }
    
    .wp-caption img {
        border: 0 none;
        height: auto;
        margin: 0;
        max-width: 98.5%;
        padding: 0;
        width: auto;
    }
    
    .wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;
        margin: 0;
        padding: 0 4px 5px;
    }
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Try changing list-style-type: circle; to just list-style: circle; as that is what you are actually over-writing.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0
    I tried that. To me it looks like the style is being overwritten, but for some reason it's not showing on the site properly.

    I have a screenshot of my inspect: interactivitydigital dot com/hosted/inspect.png

    I'm not sure what the strike-through means, but I have a feeling that means it's overwritten and the non strike-through means it's the active style.

    If it's lower in the stylesheet, it should overwrite, correct?
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Welcome to DevShed Forums, Kahamri.

    The stylesheet for a web page is not very useful without being able to see the HTML for at least one of the pages it's used with.

    From the URL to your screenshot and the end of the heading shown in the screenshot I was able to find the page you're using as an example:
    http://interactivitydigital.com/the-...attend-id2013/

    The style is being applied to the list as intended. The problem lies elsewhere, in this case its the same thing applied to the ancestor elements (the <div>s). simplypixie, do you see what I'm hinting at?

    Originally Posted by Kahamri
    I'm not sure what the strike-through means, but I have a feeling that means it's overwritten and the non strike-through means it's the active style.
    Yes, but that's not completely reliable when you're dealing with shorthand properties. For example, when you have "background" in one rule but "background-repeat" in another, which is perfectly fine to do, but it can cause only some of the values given for the "background" property to actually be used.

    Originally Posted by Kahamri
    If it's lower in the stylesheet, it should overwrite, correct?
    Unless specificity comes into play.

    Get Specific with Your CSS Styles
    http://www.stuffandnonsense.co.uk/ar...city_wars.html
    http://juicystudio.com/displayarticl...pecificity.php
    http://nicolasgallagher.com/css-casc...y-inheritance/
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo