different visualisation of Div element inside cables vs embedded in website

[MarcVdH]

Hi all,

I first noticed that the text colours of a div element i created looked very different within cables vs on the patch integrated in my website (on the same screen obviously :-) ) . the patch is integrated as iframe : <iframe style="width:100%;height:100%;border:0px;" src="https://cables.gl/view/63be8f1fad3729d5582a8e04"></iframe>
I managed to reduce the difference by switching the colour definition from rgba to hex, yet it is still not identical, i measure different hex values for text with opacity 1
Furthermore I do not succeed in achieving the same position of the text within the circle (again inside cables vs on the website).

the patch is public:
https://cables.gl/edit/YhNnwm

the divelement op is located all the way to the right in the patch

I probably did things i am not supposed to . Can someone push me in the right direction?

thanks in advance

[steam0r]

hey,

this seems like something is interfering with your styles. opening the dev-console helps to find out where a certain element gets it's style from.

try "containing" your css, so it does not interfere with outside css (selector should be i.e. .cablesEle.myDiv instead of .myDiv). also try to avoid names that are too general and not contained (i.e. .button or .container).

let me know if that helps!

best,
steam

[steam0r]

awesome patch, btw!

[pandrr]

your divs have opacity of 0.8. you can't just pick the screen color , the background is differtent in your screenshots, so its normal that the final color is different

[MarcVdH]

Hi Tom,
Thanks that resolves the alleged color issue .
I changed the "Click me" text to an opacity of 1 prior to posting my question but after making the screenshots and thought that i measured that bit of text.... apparently not