problem with child.css, some style declarations not used

Can you provide a simple example of setting the style for a textwidget ul li element in the home page sidebar? I'm a newbie at actually making styles work; this is my first production website.

I tried a lot of combinations but I get only some of the declarations. I can observe and confirm in firefox (via web developer view style information) exactly which declarations are used and which are not. For example, if I specify in child.css:

#sidebar li {
display: block;
list-style-type: disc;
margin: 2px 0 2px 0;
padding: 0 0 0 15px;
border-left-width-value: 7px;
border-left-style-value: solid;
border-left-color-value: #cccccc;
}

Firefox reports:

http://test.greenstems.org/wordpress/wp-content/themes/bp-scholar-child/_inc/css/child.css
#sidebar li (line 25)
{
display: block;
list-style-type: disc;
margin-top: 2px;
margin-right: 0pt;
margin-bottom: 2px;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 15px;
}

The border declarations are missing. Why would that be? Furthermore, Firefox also reports:

http://test.greenstems.org/wordpress/wp-content/themes/bp-scholar/_inc/css/typography.css
#sidebar li, #footer li (line 152)
{
list-style-type: none;
list-style-image: none;
list-style-position: outside;
text-align: left;
}

Why would typography.css override child.css? Both are imported from the same style.css file (which I have not changed.

Thanks in advance.

  • linuxarchitect

    Ok, I see in a css validator the errors regarding the border declaratations; I don't understand it yet but I have something to track down.

    Why so many validation errors in the stock css files? I assume because of non standard attempts to support different browsers? It sure makes finding a "real" error hard. For example, is this something to worry about?:

    URI : http://test.greenstems.org/wordpress/wp-content/themes/bp-scholar/_inc/css/comments.css
    52 Parse Error }

    Looks like an extra brace to me.

  • linuxarchitect

    Ok, I see in a css validator the errors regarding the border declaratations; I don't understand it yet but I have something to track down.

    Why so many validation errors in the stock css files? I assume because of non standard attempts to support different browsers? It sure makes finding a "real" error hard. For example, is this something to worry about?:

    URI : http://test.greenstems.org/wordpress/wp-content/themes/bp-scholar/_inc/css/comments.css
    52 Parse Error }

    Looks like an extra brace to me.

  • Tammie

    @linuxarchitect: I'm sorry but you seem to be saying a few things here. Let me try and deal with each one as I may need clarification to answer you exactly.

    Firstly, there is no duplicate brace you will get warnings not errors as we're using rounding css style and some are not used by certain browsers. Unfortunately in a perfect world all browsers would use the same call for rounded corners sadly as they don't we have to use them all to make sure all are covered. That being said you about a parse error well there is no extra brace in that file also that file is nothing to do with the area you mentioned in your first post.

    Can you just tell me clearly what you want to do then I will do my best to respond. I think you are trying to change the text widget style in the side bar but do you want to change ALL lists in the side bar or just the text widget one? Currently the styling is set to effect ALL sidebar lists:

    styling.css:

    ul.widget-wrapper, ul#footer{<br />
    	padding: 10px 0px 0px 0px;<br />
    }</p>
    <p>.widget-wrapper li, #footer li<br />
    {<br />
    	padding-left: 30px;<br />
    	padding-bottom: 5px;<br />
    }

    typography.css:

    #sidebar li, #footer li<br />
    {<br />
    	list-style: none;<br />
    	text-align: left;<br />
    }

    the various colour options - for instance from sage.css

    .widget-wrapper li{<br />
    	color: #557766;<br />
    }

    Now, you mention why would sidebar li be overwritten.. it all depends on what you are referencing and if there is a style that is 'above' it in the calling. For instance a list-style: none would over-ride any list style if that file is called AFTER the other one.

    If you can take a look at this then tell me exactly what you are trying to do I will do my best to respond with an answer.

    With reference to this:

    I can see why you are getting multiple posts of the same content. Your comment submission is timing out and if the person reloads the page it of course posts the same message a second time.

    Do you mean this forum if so it is a known issue so we apologise for you experiencing it but it is being dealt with.

  • linuxarchitect

    Sorry for multiple issues in one message. I know that can be confusing since you can't read my mind.

    Problem 1: I fixed my border declarations and they work ok now. It is a law that posting a question will solve days of missing the obvious error.

    What I was doing was cutting and pasting from the firefox css style display sidebar to my child.css file, thinking that it was showing me legal css. E.g. I copied

    border-left-width-value: 7px;

    rather than typing

    border-left-width: 7px;

    Problem 2: Not important because I don't care now that #1 is solved. But I don't see why

    #sidebar li { list-style: disc; }

    in child.css would get overridden by the

    #sidebar li { list-style: none; }

    in typography.css, which is imported into style.css before child.css. Since that can't happen, I must be missing something else. But you can drop this issue since I don't want to debug it at this time. I'm sure what I am doing wrong will become obvious over time.

    Problem 3:

    Sure looks like an extra closing } in your comments.css. I see 38 open and 39 close.

    Problem 4:

    Yes, I meant your comment reply on this forum sometimes looks like it fails.

    Thanks for your help, on Easter Sunday no less!