CSS validator errors

HTML & CSS
1

What are these referring to?

.stackd {
position : relative;
stroke : lime;
fill : transparent;
}

.stackf {
position : relative;
stroke : #89cff0;
}
2

When the script supplied is copied and pasted into the W3.Org validator the script supplied validates without errors?

Please supply the complete CSS script because it appears there is a problem elsewhere.

3 
.stackf {
  position: relative;
  stroke-width: 6;
  stroke: #89cff0;
}


.stackd {
  position: relative;
  stroke-width: 2;
  stroke: lime;
  fill: transparent;
}
4

this fixed it:

.stackf {
  position: relative;
  stroke-width: 6px;
  stroke: #89cff0;
}


.stackd {
  position: relative;
  stroke-width: 2px;
  stroke: lime;
  fill: transparent;
}
5

2 what and 6 what ?

If I asked for a piece of string 6 long, how long would it be?

6

It wanted a px value at the end.

stroke-width: 6px;

stroke-width: 2px;
1 Like
7

This is where I get confused because the SVG value of stroke-width is a value and does not have any units.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

<?xml version="1.0" standalone="no"?>
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>
8

That’s why I was confused, cause usually you don’t put units at the end of the numbers of SVG’s. But maybe you do put them in the CSS.

2 Likes
9

I think it’s like height and width for images. When you specify those in the HTML, they must be unitless (px is implied), but if you then amend the size in CSS, you need to specify the units because CSS allows more that just px to be used.

4 Likes
10

I think that is because the <svg> tag is considered to be a variant of an <img> tag.

i.e. similar to

img { 
  height: 30px;
  width: 30px; 
} 
.....
<img height="30" width="30" ... >

EDIT
ninja’d :martial_arts_uniform:

4 Likes
11

Correct.
In SVG it will default to px but the above code is CSS, not SVG, so units must be stated on any value other than 0.

5 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.