Highlighted

CEP panel - Margins different in AE and Chrome browser

Engaged ,
Apr 22, 2020

Copy link to clipboard

Copied

Hi
I'm making a CEP panel and I have this simple html:

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<meta name="viewport">
		<title>Title</title>
	</head>
	<style>
		body {
			margin: 0px;
			padding: 0px;
		}
		.button {
			margin: 0px;
			padding: 0px;
		}
	</style>
	<body>
		<div>
			<input class="button" type="image" width="20" height="20" src="images/image.png"/>​
			<input class="button" type="image" width="20" height="20" src="images/image.png"/>​
			<input class="button" type="image" width="20" height="20" src="images/image.png"/>​
		</div>
	</body>
</html>

If I preview it in chrome it will get the correct margin of 0. But when i view the panel in AE it gets a margin of 3.
What am I doing wrong? Shouldn't Chrome render the same way as the CEP panels?

 

All the best
Jakob Wagner

 

Just realized I can set the margin to a negativ value to achieve a 0 margin.

TOPICS
Scripting

Views

99

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

CEP panel - Margins different in AE and Chrome browser

Engaged ,
Apr 22, 2020

Copy link to clipboard

Copied

Hi
I'm making a CEP panel and I have this simple html:

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<meta name="viewport">
		<title>Title</title>
	</head>
	<style>
		body {
			margin: 0px;
			padding: 0px;
		}
		.button {
			margin: 0px;
			padding: 0px;
		}
	</style>
	<body>
		<div>
			<input class="button" type="image" width="20" height="20" src="images/image.png"/>​
			<input class="button" type="image" width="20" height="20" src="images/image.png"/>​
			<input class="button" type="image" width="20" height="20" src="images/image.png"/>​
		</div>
	</body>
</html>

If I preview it in chrome it will get the correct margin of 0. But when i view the panel in AE it gets a margin of 3.
What am I doing wrong? Shouldn't Chrome render the same way as the CEP panels?

 

All the best
Jakob Wagner

 

Just realized I can set the margin to a negativ value to achieve a 0 margin.

TOPICS
Scripting

Views

100

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 22, 2020 0
Most Valuable Participant ,
Apr 22, 2020

Copy link to clipboard

Copied

No, it shouldn't. This is even documented in the relevant docs for Chromium of for that matter Mozilla/ Firefox. Browsers use invisible margins and different origins for their rendering all the time and conversely the CEP engine may have a standard built-in padding to accommodate frames, separators or simply prevent UI elemnts from overlapping.

 

Mylenium

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2020 0
Engaged ,
Apr 22, 2020

Copy link to clipboard

Copied

OK. Thank you for replying.

Do you know how I can get a margin of 0? Or are you saying that wont even be possible?

- Jakob

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2020 0
Engaged ,
Apr 22, 2020

Copy link to clipboard

Copied

Just realized I can set the margin to a negativ value to achieve a 0 margin.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 22, 2020 0