I believe this is an SVG issue? Only happens in Chrome, not firefox


#22

How come:
margin: 45px 0 0;

Is better than:?
margin-top: 45px;

Why is writing it one way better or more preferred over the other?


#23

Because in my example the wrapper is a ul which comes with default top,.bottom and left margins (in some browsers). Therefore I needed to reset all the margins to zero along with the padding which some browsers use for the bullet indentation.

Also shorthand is often less code but you just have to make sure you don’t overwrite something when you didn’t mean to


#24

Thanks a lot.


#25

Is height allowed to be removed on this one?

But then what would get added to it instead?
https://jsfiddle.net/zb6mkug3/477/

.wraph {
	/*height: 606px;*/
}

image


#26

Yes we’ve done this one about 5 times now:)

It’s the bottom margin on the last 3 items.

.wraph li:nth-of-type(n+7) a {margin-bottom:0}

We went through this on the initial thread. :wink:


#27

If I were to remove the background property from one of these, which would I remove it from?
https://jsfiddle.net/zb6mkug3/486/

i.e., which property should it stay on?

.wraph a {
	float: left;
	width: 198px;
	height: 198px;
	margin: 0 0 3px 0;
	color: transparent;
	background: rgba(0, 0, 0, 0.2);
}

.wraph svg {
	cursor: pointer;
	fill: transparent;
	background: rgba(0, 0, 0, 0.2);
}

#28

I think you can remove it from either as they both seem to work. Of course you will need to double the opacity if only using one as it will appear lighter.


#29

How come this one is darker

Only:
https://jsfiddle.net/zb6mkug3/486/

.wraph a {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  color: transparent;
  background: rgba(0, 0, 0, 0.2);
}

Than this one?

Only
https://jsfiddle.net/zb6mkug3/572/

.

wraph svg {
  cursor: pointer;
  fill: transparent;
  background: rgba(0, 0, 0, 0.2);
}

In order for the background to be equal to each other they both would need to be given it, or double it up on one of then like you said.


#30

Yes exactly as I said.

Double the opacity from 0.2 to 0.4

.wraph svg {
  background: rgba(0, 0, 0, 0.4);
}

I don’t think I could have been any clearer.

(Note your second demo is badly broken and the items are going vertically down the page because you missed some important styling out.)


#31

Those weren’t my final codes, I saved the good ones.