Edit : Following this publication https://github.com/w3c/css-validator/issues/380 the bug is fixed https://github.com/w3c/css-validator/commit/eca30bb7e985a9027e01d310b1b9e5588ae4b2b9
the at counter-style rule allows you to create your own list styles.
Only, this seems to cause a problem with the w3c css validator. Is this legitimate? This is well supported by browsers, and it makes counter-style property useless, if it is legitimate.
Error message :
Sorry! We found the following errors (1)
URI : TextArea
38 Value Error : content icone is not a content value : counter(step,icone)
Thanks in advance for your answers.
You can try on https://jigsaw.w3.org/css-validator/#validate_by_input
.works {
font-size: 2.5rem;
font-weight: bolder;
padding: 4rem 2rem;
}
.works ol {
counter-reset: step;
}
.works ol li {
padding: 2.5rem 6.5rem 2.5rem 7.5rem;
border-radius: 15px;
font-weight: 500;
font-size: medium;
background-color: #F6F6F6;
margin-top: 2rem;
margin-left: 1rem;
box-shadow: 2px 4px 14px -5px #888;
position: relative;
}
.works ol li::before {
content: counter(step);
counter-increment: step;
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: -1rem;
border-radius: 50%;
background-color: #9356DC;
padding: 5px 8px;
color: white;
font-size: 1.1rem;
}
.works ol li::after {
content: counter(step, icone);
counter-increment: icone;
list-style: icone;
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 3.5rem;
color: #808080;
font-size: 2rem;
}
.works ol li:hover {
background-color: #f5edff;
}
#counter-style icone {
system: additive;
additive-symbols: "\f54e" 3, "\f0ca" 2, "\f3cd" 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Works</title>
<style>
ol,
ul,
menu,
li {
list-style: none;
}
</style>
</head>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div class="works">
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
For information : the MDN page of Content property :
Values
counter()
The value of a CSS counter, generally a number produced by computations defined by and
properties. It can be displayed using either the counter() or
counters() function.
The counter() function has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the
innermost counter of the given name in scope at the given
pseudo-element. It is formatted in the specified
(decimal by default).
And in w3c page of content property :
Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)'
or 'counter(name, style)'. The generated text is the value of the
innermost counter of the given name in scope at this pseudo-element;
it is formatted in the indicated style ('decimal' by default). The
latter function also has two forms: 'counters(name, string)' or
'counters(name, string, style)'. The generated text is the value of
all counters with the given name in scope at this pseudo-element, from
outermost to innermost separated by the specified string. The counters
are rendered in the indicated style ('decimal' by default). See the
section on automatic counters and numbering
Related
Can't seem to get the following selector working.
Am I doing something wrong?
html body div#main_container form#account_info input[type=text]:disabled::after, input[type=email]:disabled::after {
content: "dfjnsfnj";
position: absolute; float: none; clear: both; display: block;
top: 0; left: 0;
width: 100px; height: 100px; margin: 0; padding: 0;
font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 25px; line-height: 25px; text-align: left;
letter-spacing: -3px;
color: #3d5a71;
background-color: red;
}
While I verified that the construct does work somewhat in current Chrome stable, this seems an unfortunate by-effect of generic parsing.
input is specified in the HTML5 standards as having an "Empty" content model, like other self-closing elements such as <br> and <img>. All of them are therefore not permitted, in any situation, to have child elements. Including pseudo-elements.
Your problem is easily solved by including some extra markup, which would insert the generated content in a more plausible location in the doctree than as the child element of a checkbox. The following example works fine and is semantically correct:
input:disabled[type=checkbox] + label:after {
content:' testing this CSS';
}
<input disabled type="checkbox">
<label>Checkbox for</label>
Since it can't be applied onto input elements.
Added it to the label instead. Works now :)!
html body div#main_container form#account_info input:disabled[type=text] + label:after,
html body div#main_container form#account_info input:disabled[type=email] + label:after {}
I have a CSS file that will display a background image in IE, but that same background image won't in firefox. Specifically, its the headerdoc image that's the problem, the one above the menu.
What I'm trying to do is create a main div section and then create the rest of the layout in sections.
Yes, I know you could do this with a table, yuck, ugly hard to manage and even more difficult to maintain not to mention its ugly, hard to manage and even more difficult to manage.
Any help with this would be greatly appreciated.
P.S. Here is what I'm trying to accomplish - I have a page that is the full width and heighth of the screen minus a 2.5% margin around the edges. No biggy here, that's working just fine.
within that container I have a header section called #headerDoc. That should be the full width of the parent container and x % in heighth. It is here that I want to have a background covering the full area of this container.
Within the header section I have a menu section that will comprise just the bottom edge of the #headerDoc parent. say 10% of the bottom. This has its own background so its colored correctly.
After that I'll finish building out the rest of the screen. But that is what I'm attempting to do here.
Here is the CSS data:
/************************* ID's *************************/
#mainDoc {
margin-top: 2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
margin-left: 2.5%;
background-color: #494948;
}
#headerDoc {
width="100%";
height="10%";
background-image: url('./images/bg1.jpg');
}
#menu {
/* position: relative;*/
width: 100%;
height: 32px;
margin-top: 50px;
/* font-size: 14px;*/
font-size: 1em;
font-family: Tahoma, Geneva, sans-serif;
/* font-weight: bold;*/
text-align: center;
/* text-shadow: 3px 2px 1px #FFFFFF; */
background-image: url('./images/dpmenu.gif');
/* background-color: #8AD9FF;*/
background-color: #494948;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 10px;
}
#menu a {
text-decoration: none;
color: #ffffff;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #000000;
}
Here is the html use of the tags
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<title>Css Test</title>
</head>
<body>
<div id="mainDoc">
<div id="headerDoc">
<div id="menu">
<ul class="bdr-t bdr-b">
<li class="bdr-r ctr">HOME</li>
<li class="bdr-r ctr">CLASSIFIEDS</li>
<li class="bdr-r ctr">PLACE AD</li>
<li class="bdr-r ctr">DIRECTORY</li>
<li class="bdr-r ctr">HELP DESK</li>
<li>MANAGE ACCOUNT</li>
</ul>
</div>
</div>
</div>
</body>
Sorry about the "=" I missed that one (had a few others I forgot the syntax for, but even after changing those it still didn't make a diff.
Try
#menu ul { ... background-image: url('./images/dpmenu.gif'); .... }
by the way, whats in
bdr-t,
bdr-b,
bdr-r,
ctr css class?
I'm trying to change the style blog navigation style on my blog from "Newer / Older" text to NEXT / PREVIOUS and also make it match the same color/font/style/hover of my RSS text at the top :Subscribe via RSS: So far I can't get anything to change.
.pagination .next-item { color: #0076a9 !important; font-size: 8em; font-weight: 700; }
.pagination .prev-item { color: #0076a9 !important; font-size: 8em; font-weight: 700; }
This is a pretty janky way to do it, but if you ONLY have control over the CSS, this should work for you:
.pagination
{
color: rgba(0,0,0,0)
}
.pagination a
{
font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 16px;
font-weight: 700;
}
.pagination a:first-child
{
position: relative;
left: 616px;
color: rgba(0,0,0,0);
}
.pagination a:first-child:after
{
position: absolute;
left: 0;
content: "Next";
color: #0076a9;
}
.pagination a + a,
.pagination a:only-child
{
position: relative;
left: auto;
margin-left: -59px;
color: rgba(0,0,0,0);
}
.pagination a + a:after,
.pagination a:only-child:after
{
position: absolute;
left: 0;
content: "Previous";
color: #0076a9;
}
Again, this is NOT the recommended solution, if you have control over HTML. What this does:
Hides the "/" from the Older/Newer
Sets the link font styles.
If there is a link in the .pagination div that is the first element (first-child), we assume it is the "Newer" link. We reposition that to the very right side of the page, but make the link invisible using rgba(0,0,0,0)
We utilize the CSS :after pseudo-class to add text after that link, which says "Next", and color it to be the same color as the link. We position that on top of the invisible link using position: absolute and left: 0
If there is a second link, or if there is only one link in .pagination, then we assume that is the "Older" link, and move it to the far left.
We then treat it the same way as the "Newer" link, but we add "Previous" to it.
I am just looking to space these news releases out nicely so there is a gap in between each posting. I have included an image below to explain. I tried to increase the padding on the following but that did not work. Thanks for the help
.headline {
position: absolute;
padding-top: 15px;
}
http://www.petrowestcorp.com/home/
Made your press releases look like the following:
.feedburnerFeedBlock ul li {
list-style-type: none;
text-align: left;
font-size: 12px;
line-height: 1.5em;
overflow: auto;
padding-top: 10px;
}
Here is what I made it look like with the above css code:
As suggested elsewhere in the answers, your span cannot be given padding-top/bottom unless you explicitly set its display property to behave like block/inline-block level elements. Hence, instead of setting that property on span, we set it to the li tag. However, i added overflow:auto as well because your css did not contain its elements as you had set position:absolute to your spans. This could should set that bit right as well.
Hi you can simply do this in css.
.feedburnerFeedBlock > ul > li {
padding-top: 15px;
}
A span element is not a block element and u can only apply dimensions if u set the span to e.g. display: block
This JSfiddle should work well for you.
HTML
<div class='feedburnerFeedBlock'>
<ul>
<li>
<h6>August 13, 2013</h6>
<p><a href='#'>Petrowest Corporation Announces Second Quarter 2013 Financial Results and New Contract Award for Civil Division</a>
</p>
</li>
<li>
<h6>May 13, 2013</h6>
<p><a href='#'>Petrowest Corporation Announces First Quarter 2013 Financial Results</a>
</p>
</li>
</ul>
</div>
CSS
a {
color: #000;
text-decoration: none;
}
h6, p {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 1.5;
}
h6, p, .feedburnerFeedBlock ul, .feedburnerFeedBlock ul li {
margin: 0;
padding: 0;
}
h6 {
color: #777;
}
.feedburnerFeedBlock ul {
list-style-type: none;
margin: 10px 0;
width: 320px;
}
.feedburnerFeedBlock ul li {
margin-bottom: 15px;
}
http://lesscss.org/
I am having the same issue. I changed the display to inline, but doesn't seem to work. Could anyone please tell me as to what I am doing wrong?
ul{
width:100%;
padding: 0;
margin: 0;
li{
list-style-type: none;
float: left;
padding-left: 10px;
display: inline;
white-space: nowrap;
a{
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
color: #darkGrey;
padding-right: 6px;
&:hover{
color: #mainColor;
}
}
}
i think you are using LESS CSS or alike.
Try display block instead of inline.
li{
display: block;
}
These 2 comments apply to both LESS CSS or regular CSS
You can't declare a:hover until you declare a:link and a:visited.
You don't need both display:inline and float:left. Float is applying to block level elements, but with display:inline, you are making the <li> an inline element.
original answer deleted due to disambiguation over css/less-css but I decided to leave the questions due to some good comments.
Demo : http://plugins.amiwithyou.com/lesscss/demo.htm
As per the documentation, you need to
Link your .less stylesheets with the rel set to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
Then download less.js from the top of the page, and include it in the element of your page, like so:
<script src="less.js" type="text/javascript"></script>
Make sure you include your stylesheets before the script.
And then add the following in your styles.less file
#darkGrey:#777;
#mainColor:#333;
ul{
width:100%;
padding: 0;
margin: 0;
li{
list-style-type: none;
padding-left: 10px;
display: inline;
white-space: nowrap;
a{
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
color: #darkGrey;
padding-right: 6px;
&:hover{
color: #mainColor;
}
}
}
}
Please note that,
I have removed float:left
and
added "}" at the end