Kevin Powell - Community•4mo ago

1px separation between two divs

The div that contains the absolutely positioned wave svgs has no set height. The contact section below has no set height. Zooming in and out shows it if it's not showing itself already. Sometimes just scrolling makes it pop out. The svgs have no stroke just fill. Made on inkscape. Problem is on chrome, edge, and firefox. What I've tried: -Editing the svgs -Giving wave container a set height -giving margins to surrounding containers to identify where the separation is happening -wrapping all the containers in another container and flexing them column -putting the svgcontainers in the previous section instead of it's own div in between the sections -line-height: 0 and display: block to images referencing the svgs -and im sure a few small things i threw around and don't remember Here's the code-pen for the code, but not much visualization. https://codepen.io/healspls/details/zYVmEZK Here's the deployed website location, very rough draft https://ayesha-mock-website.netlify.app/ Thank you for taking the time.

astro

CodePen

problem

...

21 Replies

BighealsplsOP•4mo ago

Sorry, I forgot to include the "How To Ask Good Questions" guideline. I don't want the 1px line there. How do I remove it? I'm using html, css, and javascript on this website.

Chris Bolson•4mo ago

Your codepen isn't showing any images and on top of that it doesn't seem possible to edit it so it is hard to test much there. On your deployed website I can't see any gaps on Firefox but can see the gap on Chrome. It appears to be coming from your animation and, specifically the skew. If you remove that, the gap goes away.

BighealsplsOP•4mo ago

The codepen was pretty much just for the code. I was in bit of a rush, but I'll get the svgs in there and clean it up so it can be worked on. Removing the skews seemed to help mostly, but I still get a line when I'm zooming out. It's inconsistent though.

Chris Bolson•4mo ago

The strange thing was that I couldn't edit or even fork it. Though I have just tried again and today it is letting me so probably an issue my end 👍

BighealsplsOP•4mo ago

:] thanks for taking the time Chris, I'm currently working on making the codepen better

Chris Bolson•4mo ago

I couldn't find anything else in the code that would cause the line. I thought that it might have been the typical "block" issue with images but that was not the case. The only way I could remove it was by turning off the animation completely or by, as I mentioned here, removing the skew within the animation.

BighealsplsOP•4mo ago

Hmmm dang. I wonder why an animation would cause this.. Thank you for your time, I guess I just gotta keep digging into this.

Chris Bolson•4mo ago

I'm not actually seeing any line on Chrome today

BighealsplsOP•4mo ago

Inconsistent problems are the worse worst* haha I'm gonna try and change the svgs to pngs and change the css accordingly I'm in the "not really sure how any of this will fix this" territory

Chris Bolson•4mo ago

You could also look at using SVGs directly (ie not in the image tag) and animating them.

clevermissfox•4mo ago

I have had the same issue on iCodeThis when adding svg shape dividers from certain generators. Where did you get this particular svg?

BighealsplsOP•4mo ago

Totally gonna try that too Chris, thanks. I made it from scratch on Inkscape, so I do worry if it's something wrong with one or all three of the svgs.

Chris Bolson•4mo ago

a quick demo https://codepen.io/cbolson/pen/LYKgKoo

Chris Bolson

CodePen

SVG waves - https://discord.com/channels/436251713830125568/1280229...

...

BighealsplsOP•4mo ago

Looks awesome, if all else fails, I'll definitely go the way of inline. Thank you for this example, I'll learn a lot from it. Im curious Chris, how did you make those waves paths so quickly?

Chris Bolson•4mo ago

I actually already had them on this iCodeThis challenge from a few months ago https://icodethis.com/modes/design-to-code/264/submissions/267599

BighealsplsOP•4mo ago

Do you remember if you grabbed them from somewhere or made them for that challenge? I think Kevin Powell linked a website that creates them actually..

Chris Bolson•4mo ago

I probably got them from somewhere as I am not very good with curved paths 😆

BighealsplsOP•4mo ago

Yea it was a paaaain making it on inkscape hehe. Im completely new to inkscape. I know I've said it a bunch already, but thanks a lot for the help, I really appreciate it. I'm gonna keep chipping away at this. Finding a problem and solving it by doing a different process erks me caues i never found out the problem with the original process. If all else fails then im gonna go your suggestion. I'll update later.

BighealsplsOP•4mo ago

https://discourse.webflow.com/t/white-lines-or-spaces-between-sections/159208 https://discourse.webflow.com/t/visible-1px-gap-between-sections-at-different-breakpoints/93372 https://stackoverflow.com/questions/19870561/1px-or-less-subpixel-border-on-inline-svg-in-ff25-and-ie10-not-chrome https://stackoverflow.com/questions/70689442/white-line-between-an-element-and-svg-shape/70696191#70696191 So from what I've read, it seems like hacky ways to solving it is the only known way. I think I found my hack for it.

Forum | Webflow

White lines or spaces between sections

Hey Webflow-Community! I am having an issue with the section background-images on a website I am designing. There seems to be a small space or a fine white line between each section that I can not get rid of. The lines are most prominent in the Designer View on mobile devices, but can also be seen on desktop view if zoomed in. It seems t...

Forum | Webflow

Visible 1px gap between sections at different breakpoints

Hi, I have inserted an .svg wave between sections but at various desktop breakpoints there is a visible 1px gap between the section and svg. Any fixes? Thanks! ie. in this screenshot - Here is my site Read-Only: Webflow - SAN V4

Stack Overflow

1px (or less? subpixel?) border on inline SVG in FF25 and IE10, not...

I am running into a weird issue when using an inline SVG. I am creating a path in an <svg> element and using top or bottom CSS attributes with relative positioning to superimpose this SVG ove...

Stack Overflow

White line between an element and svg shape

Hi guys, i'm using svg shaper generated from shapedivider an how you can see, there is a white line and i don't why its there and how to remove it. Could you please help me? there is the code of the

BighealsplsOP•4mo ago

I gave my div containing the svg waves a height of 100px. Gave each wave a height of 100%. Translated that div on the Y axis so that it went under the section below it. Since the div containing the waves comes before the section below it in the DOM, it stacks under without any background-color overlaps. Really easy solution, but I wish there was a solution that wasn't hacky.

body {
  background-color: black;
}
.wavy-bg-rel {
  position: relative;
  height: 100px;
  background-color: black;
}
.wave-container-top {
  transform: translateY(20%);
}
.wave-container-btm {
  transform: translateY(-20%);
}
.top-wave {
  height: 100%;
}
.btm-wave {
  height: 100%;
}

body {
  background-color: black;
}
.wavy-bg-rel {
  position: relative;
  height: 100px;
  background-color: black;
}
.wave-container-top {
  transform: translateY(20%);
}
.wave-container-btm {
  transform: translateY(-20%);
}
.top-wave {
  height: 100%;
}
.btm-wave {
  height: 100%;
}

<div class="wavy-bg-rel wave-container-top">
  <div class="wavy-bg top-wave long-wave">
    <img src="Styles/svg-wave.svg" alt="" class="wave-svg">
  </div>
  <div class="wavy-bg top-wave short-wave">
    <img src="Styles/svg-wave-test.svg" alt="" class="wave-svg">
  </div>
  <div class="wavy-bg top-wave">
    <img src="Styles/svg-wave-test-2.svg" alt="" class="wave-svg">
  </div>
</div>
<section class="contact-section"></section>
<div class="wavy-bg-rel wave-container-btm">
  <div class="wavy-bg btm-wave long-wave">
    <img src="Styles/svg-wave.svg" alt="" class="wave-svg rotate-svg">
  </div>
  <div class="wavy-bg btm-wave short-wave">
    <img src="Styles/svg-wave-test.svg" alt="" class="wave-svg rotate-svg">
  </div>
  <div class="wavy-bg btm-wave">
    <img src="Styles/svg-wave-test-2.svg" alt="" class="wave-svg rotate-svg">
  </div>
</div>

<div class="wavy-bg-rel wave-container-top">
  <div class="wavy-bg top-wave long-wave">
    <img src="Styles/svg-wave.svg" alt="" class="wave-svg">
  </div>
  <div class="wavy-bg top-wave short-wave">
    <img src="Styles/svg-wave-test.svg" alt="" class="wave-svg">
  </div>
  <div class="wavy-bg top-wave">
    <img src="Styles/svg-wave-test-2.svg" alt="" class="wave-svg">
  </div>
</div>
<section class="contact-section"></section>
<div class="wavy-bg-rel wave-container-btm">
  <div class="wavy-bg btm-wave long-wave">
    <img src="Styles/svg-wave.svg" alt="" class="wave-svg rotate-svg">
  </div>
  <div class="wavy-bg btm-wave short-wave">
    <img src="Styles/svg-wave-test.svg" alt="" class="wave-svg rotate-svg">
  </div>
  <div class="wavy-bg btm-wave">
    <img src="Styles/svg-wave-test-2.svg" alt="" class="wave-svg rotate-svg">
  </div>
</div>

This makes me think even more that it's an svg problem instead of me making bad svgs on inkscape cause im a noob xD/

clevermissfox•4mo ago

It was also browser specific, had the line on one browser but not another . My first thought was also a display block situation but. I think I just hacked away at it with some kind of margin

Gaming

Programming

1px separation between two divs