Can't get rid of 1px transparent line between elements in Edge
up vote
0
down vote
favorite
I have a container with a background video, and I am creating a slanted div effect by absolutely positioning a div with a triangular image at the bottom of the div.
The structure for the div:
<div class="triangle">
<img src="triangle.png" />
</div>
and the CSS:
.triangle {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.triangle img {
width: 100%
}
It works and looks perfectly fine on Chrome, Firefox, and even IE11, but on Edge there is a one pixel transparent bleed-through of the background video no matter what I do. I've tried shifting the image down a few pixels, giving it a higher z-index, adding, translating and positioning multiple white pseudo elements to cover it up, but Edge will not display the elements as flush or allow the line to be covered up by seemingly any means.
Does anyone know what is causing this or how to fix it?
html css microsoft-edge
edited Nov 8 at 18:43
Ronald P Mathews
1,031721
asked Nov 8 at 16:43
Rutherford Wonkington
83
add a comment |
up vote
0
down vote
favorite
I have a container with a background video, and I am creating a slanted div effect by absolutely positioning a div with a triangular image at the bottom of the div.
The structure for the div:
<div class="triangle">
<img src="triangle.png" />
</div>
and the CSS:
.triangle {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.triangle img {
width: 100%
}
It works and looks perfectly fine on Chrome, Firefox, and even IE11, but on Edge there is a one pixel transparent bleed-through of the background video no matter what I do. I've tried shifting the image down a few pixels, giving it a higher z-index, adding, translating and positioning multiple white pseudo elements to cover it up, but Edge will not display the elements as flush or allow the line to be covered up by seemingly any means.
Does anyone know what is causing this or how to fix it?
html css microsoft-edge
edited Nov 8 at 18:43
Ronald P Mathews
1,031721
asked Nov 8 at 16:43
Rutherford Wonkington
83
2
make the image display:block
– Pete
Nov 8 at 16:45
According to your code, I can't reproduce the problem on my side, can you share the triangle.png image and all of the related code?
– Dillion
Nov 9 at 8:33
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a container with a background video, and I am creating a slanted div effect by absolutely positioning a div with a triangular image at the bottom of the div.
The structure for the div:
<div class="triangle">
<img src="triangle.png" />
</div>
and the CSS:
.triangle {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.triangle img {
width: 100%
}
It works and looks perfectly fine on Chrome, Firefox, and even IE11, but on Edge there is a one pixel transparent bleed-through of the background video no matter what I do. I've tried shifting the image down a few pixels, giving it a higher z-index, adding, translating and positioning multiple white pseudo elements to cover it up, but Edge will not display the elements as flush or allow the line to be covered up by seemingly any means.
Does anyone know what is causing this or how to fix it?
html css microsoft-edge
edited Nov 8 at 18:43
Ronald P Mathews
1,031721
asked Nov 8 at 16:43
Rutherford Wonkington
83
I have a container with a background video, and I am creating a slanted div effect by absolutely positioning a div with a triangular image at the bottom of the div.
The structure for the div:
<div class="triangle">
<img src="triangle.png" />
</div>
and the CSS:
.triangle {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.triangle img {
width: 100%
}
It works and looks perfectly fine on Chrome, Firefox, and even IE11, but on Edge there is a one pixel transparent bleed-through of the background video no matter what I do. I've tried shifting the image down a few pixels, giving it a higher z-index, adding, translating and positioning multiple white pseudo elements to cover it up, but Edge will not display the elements as flush or allow the line to be covered up by seemingly any means.
Does anyone know what is causing this or how to fix it?
html css microsoft-edge
html css microsoft-edge
edited Nov 8 at 18:43
Ronald P Mathews
1,031721
asked Nov 8 at 16:43
Rutherford Wonkington
83
edited Nov 8 at 18:43
Ronald P Mathews
1,031721
asked Nov 8 at 16:43
Rutherford Wonkington
83
edited Nov 8 at 18:43
Ronald P Mathews
1,031721
edited Nov 8 at 18:43
Ronald P Mathews
1,031721
edited Nov 8 at 18:43
Ronald P Mathews
1,031721
1,031721
asked Nov 8 at 16:43
Rutherford Wonkington
83
asked Nov 8 at 16:43
Rutherford Wonkington
83
asked Nov 8 at 16:43
Rutherford Wonkington
83
83
2
make the image display:block
– Pete
Nov 8 at 16:45
According to your code, I can't reproduce the problem on my side, can you share the triangle.png image and all of the related code?
– Dillion
Nov 9 at 8:33
add a comment |
2
make the image display:block
– Pete
Nov 8 at 16:45
According to your code, I can't reproduce the problem on my side, can you share the triangle.png image and all of the related code?
– Dillion
Nov 9 at 8:33
2
2
make the image display:block
– Pete
Nov 8 at 16:45
make the image display:block
– Pete
Nov 8 at 16:45
According to your code, I can't reproduce the problem on my side, can you share the triangle.png image and all of the related code?
– Dillion
Nov 9 at 8:33
According to your code, I can't reproduce the problem on my side, can you share the triangle.png image and all of the related code?
– Dillion
Nov 9 at 8:33
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53212325%2fcant-get-rid-of-1px-transparent-line-between-elements-in-edge%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
make the image display:block
– Pete
Nov 8 at 16:45
According to your code, I can't reproduce the problem on my side, can you share the triangle.png image and all of the related code?
– Dillion
Nov 9 at 8:33