I was having trouble with how an image is displaying and so I ran it through the W3C CSS validator and I received this code. I tried to search around for what it might mean but couldn't find much help. I found some people saying that it might be because of special characters in the CSS so I checked that in notepad ++ and didn't find anything.
2840 #whoweare img
Lexical error at line 2838, column 10. Encountered: " " (32), after : "#" post-9 #whoweare { width:100%; }
# post-9 #whoweare {
width:100%;
}
Line 2840 is the last one.
Any ideas what this might be?
Thanks for the help.
Remove the space between # and post-9 you have a descendant combinator between them.
#post-9 #whoweare {
width:100%;
}
Related
I have been working on a way to build a carousel purely with html and css.
No Javascript.
So far I have been liking what I found in the web and seen some tutorials.
Here is my issue though.
I build a mixin loop with Less to build a bunch of css but for some reason it seems to be missing a closing brace ")" on line 4 (of the pasted code below).
What I tried:
Remove the block of Less code completely -> error dissapeared.
Removed all the code inside the .carousel-reviews -> error persists
removed the the .carousel-reviews around the child selector -> error persists
Changed the variable name from #i to #index -> error persists
Removed all the code from inside the &__activator:nth-of-type( #i ) selector -> error persists
Hope someone can see what I am doing wrong here.
.loop( #i ) when ( #i > 0 ) {
.carousel-reviews {
&__activator:nth-of-type( #i ) {
&:checked ~ .carousel_track {
transform: translateX(calc(#i - 1) * 100%);
}
&:checked ~ .carousel__slide:nth-of-type(#i) {
transition: opacity #slideTransition, transform #slideTransition;
top: 0;
left: 0;
right: 0;
opacity: 1;
transform: scale(1);
}
&:checked ~ .carousel__controls:nth-of-type(#i) {
display: block;
opacity: 1;
}
&:checked ~ .carousel__indicators .carousel__indicator:nth-of-type(#i) {
opacity: 1;
}
}
}
.loop ( ( #i - 1 ) );
}
If I was not complete enough please let me know and I can add the info to the question.
EDIT 1
It seems that the compilers are stopping when they get to the first #i on line 4.
For some reason when I remove that first variable the error moves to line 8.
This suggests that for some reason the variable #i is not allowed inside the :nth-of-type().
Anyone know what is going on here? I will keep searching and updating when I find new answers or questions
EDIT 2
Found the sollution. Check answer
So it seems that I found the issue.
It seems that the problem is with less itself regarding the use of variables inside the :nth-of-type().
When I was removing the variables from the nth-of-type I noticed the error moving to a new line that also included the nth-of-type.
When I went to look up the use of variables in less I couldn't find anything bu later I came across a post here in stack overflow
THIS ANSWER BY MARTIN TURJAK
I would advice to check it out.
But in short, there seems to be an issue with the variable use and you have to use it as if you are using it inside a string like this :nth-of-type(#{i}).
Hope this helps others strugling with this same issue.
I currently don't have the time to find out why this happens an I haven't got a clue either but if there is someone that can explain this that would be awesome.
Anyways, thanks for your time and have a great day!
I'm using codekit to compile my Bootstrap LESS files and i keep getting this parse error on media queries that i didn't get when it was previously a CSS file.
"ParseError: media definitions require block statements after any features in /assets/less/homepage.less on line 568, column 2:
567 #media (max-width: #iphone_breakpoint) {
568 }"
Here is the complete line of code in question:
/* Custom, iPhone Retina */
#media (max-width: #iphone_breakpoint) {
}
Can anyone explain what's going on?
Just had this error, found the issue was a simple syntax error. I'll post what worked for me.
The error:
>> SyntaxError: media definitions require block statements after any
>> features in _assets/less/styles.less on line 144, column 2:
>>
>> 143
>> 144 div {
>> 145 .links {
Notice the error shows the line as being around 144-145, below we'll see
In the code below I've forgot the . (period) when using the built in .hidden() mixin by twitter-bootstrap.
This outputs the error:
SyntaxError: media definitions require block statements after any features in dir/bar/foo.less on line 144, column 2:
A little misleading as the error is a child within that div on line 149.
div { // Line 144
.links {
.hidden();
}
.other-links {
// Missing `.` for using the mixin
hidden(); // The real error is here on Line 149
}
}
Summary:
Make sure you have no syntax errors in the children where the displayed error noted the error.
Check for missing periods before mixins. hidden() -> .hidden()
Check for all other errors ?
Found another syntax error causing this error?
let us know, comment below
I caught this warning under a less file under PHPStorm IDE:
Nonshortand property width has shortthand value
The problem code is below:
#body-width: 1000px;
.block-posts {
width: #body-width*0.5-25px;
}
Well, I see that should be a warning, that #body-width has a dash separator, and it take ambiguity into that sentence, which makes arithmetic operates on it.
Add I checked the style of less on the official site: http://lesscss.org/
It seems using a dash sign in a variable name is widely acceptable.
So how to adapt my code style to fix this warning?
And what do this warning exactly means?
Please help.
I am trying to write a nested selector that selects a certain tag that has a certain attribute, for example
<li foo="bar">
To select this, li[foo="bar"] would work, but I want to nest it under [foo="bar"] using the scss & notation because I have other things with the [foo="bar"] attribute (e.g., <div foo="bar" class="baz">), and I want to group them together. When I try:
[foo = "bar"]{
&li{
...
}
&.baz{
...
}
}
It returns an error that says li may only be used at the beginning of a compound selector, and if I try:
[foo = "bar"]{
li&{
...
}
&.baz{
...
}
}
then it says & may only be used at the beginning of a compound selector. How can I do this correctly?
The right syntax nowadays would be li#{&}.
Last I heard, this is actually an upcoming feature in SASS 3.3 or 3.4.
See this thread for a question similar to yours and this thread for the proposed solution to be included (which, at the time of writing, seems to be &__element).
The issue here isn't the use of [] and & together - it's the use of a plain element in the selector. Your example with .baz should work as expected.
.9-bucks {
font-size: 60px;
}
This is the error I am getting when I push my app to Heroku:
ActionView::Template::Error (Invalid CSS after ".": expected class name, was "9-bucks {"
2012-06-07T11:42:45+00:00 app[web.1]: (in /app/app/assets/stylesheets/application.css)):
CSS selector names (either IDs or class names) cannot begin with a number...
http://css-tricks.com/ids-cannot-start-with-a-number/
Try replacing with .nine-bucks { }
I dont think css class or ID names can start with a number. Have you tried using 'nine' instead of '9'?
W3C reference on naming classes in css and not using a number in the
first position of the class name. Best thing to do is to use only an
alpha character as the first letter in your class name (a-z). You can
then use numbers after that.
yes change your html - class="9-bucks" to class="nine-bucks"
and change css file - .nine-bucks{ // }