Mathieu Klein
Reputation: 55
Thin lines appear in between sections of website
This will probably be a fairly simple fix but I can't figure it out. So when I am previewing my site using a browser, there are these thin lines that are separating each section (as shown in the first picture). I have previewed the site using Safari, Chrome, and Firefox. Firefox did not show the lines but Safari and Chrome did.
If I go into Dreamweaver, these lines do not appear (as shown in picture two). I have checked the CSS for each section but I did not see anything that would make these lines appear.
Any help would be greatly appreciated.
Here is the HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>World Valve Co., Ltd.</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="Description" content="Piping design and manufacture of marine-land plant valve, World Valve Co., Ltd. is, we have a company founded primarily the construction industry. The manufacturing of our, so far had been completed in selling out state by the sale of the product, resource is not unlimited If you do not Ika also considered effective use of resources in the future.
I think, since I have been running in all areas already for effective use, it should continue to run in the valve industry as a model this.
You understand that this is also the end user like, it is proposed to happy if Tamaware your active cooperation in order that.
I believe the future, we want to continue beyond the age of actively pursuing recycling and maintenance business, with the aim of supply of the product stable, diversified including ... also its meaning." />
<meta name="Keywords" content="Valve,Shipbuilding,Plant
,Construction,Environment,World Valve Co., Ltd." />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1><a href="index.html"><img src="images/LOGOH.jpg" alt="World Valve Co., Ltd." width="91" height="48" style="float: left; padding-right: 1em; margin-left: 0px; margin-right: 0px;"></a><a href="index.html">World Valve Co., Ltd.</a></h1>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>
<!-- Menu -->
<nav id="menu">
<div class="inner">
<h2>Menu</h2>
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="CompanyProfile.html">Company Profile</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="Valve.html">Valves</a></li>
<li><a href="Joints.html">Joints</a></li>
<li><a href="OtherP.html">Other Products</a></li>
<li><a href="../index.html">日本語</a></li>
<li><a href="index.html">English</a></li>
</ul>
<a href="#" class="close">Close</a>
</div>
</nav>
<!-- Banner -->
<section id="banner">
<div class="inner">
<div class="logo"><span class="icon fa-ship"></span></div>
<h2>World Valve Co., Ltd. <br> Imagination & Creativity</h2>
<p>World Valve Co., Ltd. meets the needs of a diversifying market, with our continued contributions to society and the environment, through our supply of various quality materials and equipment in fluidic control.</p>
</div>
</section>
<!-- Wrapper -->
<section id="wrapper">
<!-- One -->
<section id="one" class="wrapper spotlight style1">
<div class="inner">
<a href="#" class="image"><img src="images/LOGO.jpg" alt="World Valve Co., Ltd." /></a>
<div class="content">
<h2 class="major">Company Mission</h2>
<p>World Valve Co., Ltd. is a marine, land piping and valve design and manufacturing company. Our company primarily supports the shipbuilding industry by supplying and manufacturing quality products that are recognized around the world and are in high demand. Resources on earth are not unlimited so we must consider more effective use of these resources in the future. Since many other fields have started using more effective resource management, we believe this should continue into the valve industry. All the responsibility does not fall solely on companies like ours however. The cooperation of our customers is needed to fulfill our mission of a more efficient industry. We believe the future is an age where we do not have to actively pursue more efficient recycling and maintenance efforts. We view an age where our stable product supply, diversified services, and our hope for a better tomorrow will drive innovation and creativity.</p>
<a href="CompanyProfile.html" class="special">Learn more</a>
</div>
</div>
</section>
<!-- Two -->
<section id="two" class="wrapper alt spotlight style2">
<div class="inner">
<a href="#" class="image"><img src="images/shipyard.jpg" alt="Our Business" /></a>
<div class="content">
<h2 class="major">Our Business</h2>
<p>In the 21st century, there is one issue that effects everything on earth: Global Warming. We at World Valve Co., Ltd. are specialized professional suppliers of valves, fittings, and services for industries such as shipbuilding, oil refinery, chemical plants, gas plants, general industrial plants, etc. World Valve Co., Ltd. commits to be a leader in delivering safe and environmentally friendly products to our customers. Depending on the intended usage and other conditions, the materials and specifications for the valves we offer will vary. We strive to not only fulfill customer requirements but also recommend the most environmentally friendly products.</p>
<a href="Products.html" class="special">Learn more</a>
</div>
</div>
</section>
<!-- Three -->
<section id="three" class="wrapper spotlight style3">
<div class="inner">
<a href="#" class="image"><img src="img/policy_bg.png" alt="Products" /></a>
<div class="content">
<h2 class="major">Our Products</h2>
<p>We offer a wide range of products for the shipbuilding industry and beyond.</p>
<a href="#four" class="special">Learn more</a>
</div>
</div>
</section>
<!-- Four -->
<section id="four" class="wrapper alt style1">
<div class="inner">
<h2 class="major">Specializations</h2>
<p>World Valve Co., Ltd. specializes in three main areas:</p>
<section class="features">
<article>
<a href="#" class="image"><img src="images/DoubleOffsetPOV.JPG" alt="Valves" /></a>
<h3 class="major">Valves</h3>
<p>At World Valve, we pride ourselves in our vast catalogue of top of the line valves for the shipbuilding industry, industrial plants, and more. Click below to learn more.</p>
<a href="Valve.html" class="special">Learn more</a>
</article>
<article>
<a href="#" class="image"><img src="images/遠隔装置用.png" alt="Joints" /></a>
<h3 class="major">Joints/Fittings</h3>
<p>To further support the shipbuilding industry, we also offer a range of different piping, joints, and fittings. Click below to learn more.</p>
<a href="Joints.html" class="special">Learn more</a>
</article>
<article>
<a href="#" class="image"><img src="images/遠隔装置用2.png" alt="Other Products" /></a>
<h3 class="major">Other Products</h3>
<p>We also offer a range of other products for different industries ranging from air tanks to nuts and bolts. Click below to learn more.</p>
<a href="OtherP.html" class="special">Learn more</a>
</article>
<article>
<a href="#" class="image"><img src="images/0f197c7d0f9056df0b494b3a710da061.png" alt="Services" /></a>
<h3 class="major">Services</h3>
<p>We also offer services for maintenance, support, and other specified requests. Please contact us to learn more. </p>
<a href="#footer" class="special">Learn more</a>
</article>
</section>
<h2 class="major">Company News</h2>
<p> XXXX XX, 2018：Introduced a new, updated website (both English and Japanese).</p>
<p> October 1, 2013：Relocated our headquarters to Yokohama, Kanagawa Prefecture, Minami-ku, Yoshino cho 5-chome, 27 Address 7-1F.</p>
<p> February 1, 2012：Partnered with (Saijo) Ltd M industry and started various equipment installations, adjustments, and maintenance work.</p>
<p> October 20, 2011：Relocated our headquarters to Yokohama, Kanagawa Prefecture, Minami-ku, Magane cho 2-chome, 20 Address 9-1F.</p>
<p> January 1, 2011：Website published</p>
</div>
</section>
</section>
<!-- Footer -->
<section id="footer">
<div class="inner">
<h2 class="major">Get in touch</h2>
<p>To contact, please use this form. Your contact information will be held in the strictest confidence as per our privacy policy.</p>
<form method="post" action="contact.php">
<div class="fields">
<div class="field">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Type Here" pattern="[a-zA-Z]+" required/>
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Type Here" required/>
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4" placeholder="Type Here" required></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" name="submit"/></li>
</ul>
</form>
<ul class="contact">
<li class="fa-home">
World Valve Co., Ltd. <br />
1F 5-27-7, Yoshinocho, Minami-ku, <br />
Yokohama, 232-0014, Japan
</li>
<li class="fa-phone"><a href="tel:+81-45-251-2682"> +81-45-251-2682 </a></li>
<!--<li class="fa-envelope"><a href="#">[email protected]</a></li>-->
<li class="fa-twitter"><a href="https://twitter.com/WorldValveCo?lang=en">twitter.com/WorldValveCo</a></li>
<li class="fa-facebook"><a href="https://www.facebook.com/WorldValveCo/">facebook.com/WorldValveCo/</a></li>
<li class="fa-youtube"><a href="https://www.youtube.com/channel/UC1hdwpxD3miqn4bs-0pyfAA?">youtube.com/WorldValveCo</a></li>
<li class="a2a_kit a2a_kit_size_32 a2a_default_style"> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_email"></a> <a class="a2a_button_line"></a> <a class="a2a_button_kakao"></a> <a class="a2a_button_wechat"></a> </li>
<script async src="https://static.addtoany.com/menu/page.js"></script>
</ul>
<ul class="copyright">
<li>© Copyright (C) WorldValve Corporation. All Rights Reserved.</li><li><a href="Future.html">Future Prospects </a></li><li><a href="InfoPro.html">Privacy Policy </a></li><li><a href="Site.html">Site Map </a></li>
</ul>
</div>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
This is the relevant CSS Code:
#wrapper > header {
padding: 11em 0 2.25em 0 ;
}
#wrapper > header .inner {
margin: 0 auto;
width: 55em;
}
#wrapper > header h2 {
border-bottom: solid 2px rgba(255, 255, 255, 0.125);
font-size: 2em;
margin-bottom: 0.8em;
padding-bottom: 0.4em;
}
#wrapper > header p {
font-family: Raleway, Helvetica, sans-serif;
font-size: 1em;
font-weight: 200;
letter-spacing: 0.1em;
line-height: 2;
text-transform: uppercase;
}
@media screen and (max-width: 1280px) {
#wrapper > header {
padding: 9em 0 6.25em 0 ;
background-color: #2e3141;
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
background-size: auto, cover;
background-position: center, 0% 30%;
margin-bottom: -6.5em;
}
}
@media screen and (max-width: 980px) {
#wrapper > header {
padding: 11em 3em 7.375em 3em ;
background-size: auto, cover;
background-position: center, 0% 0%;
margin-bottom: -4.75em;
}
#wrapper > header .inner {
width: 100%;
}
}
@media screen and (max-width: 736px) {
#wrapper > header {
padding: 6.5em 2em 3em 2em ;
background-size: auto, 125%;
margin-bottom: -2.5em;
}
#wrapper > header h2 {
font-size: 1.25em;
}
#wrapper > header p {
font-size: 0.8em;
}
}
.wrapper {
background-color: #1A3F79;
margin: 6.5em 0;
position: relative;
}
.wrapper:before, .wrapper:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%231A3F79%3B' /%3E%3C/svg%3E");
}
.wrapper:before {
box-shadow: inset 0 0px 0 0 #2e3141, 0 0px 0 0 #2e3141;
}
.wrapper:after {
box-shadow: inset 0 0px 0 0 #2e3141, 0 0px 0 0 #2e3141;
}
.wrapper:before, .wrapper:after {
background-repeat: no-repeat;
background-size: 100% 100%;
content: '';
display: block;
height: 6.5em;
position: absolute;
width: 100%;
}
.wrapper:before {
left: 0;
top: -6.5em;
}
.wrapper:after {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
bottom: -6.5em;
left: 0;
}
.wrapper.alt:before {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
.wrapper.alt:after {
-moz-transform: scaleY(-1) scaleX(-1);
-webkit-transform: scaleY(-1) scaleX(-1);
-ms-transform: scaleY(-1) scaleX(-1);
transform: scaleY(-1) scaleX(-1);
}
.wrapper .inner {
padding: 3em 0 1em 0 ;
margin: 0 auto;
width: 55em;
}
.wrapper.style2 {
background-color: #353849;
}
.wrapper.style2:before, .wrapper.style2:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23353849%3B' /%3E%3C/svg%3E");
}
.wrapper.style2:before {
box-shadow: inset 0 0px 0 0 #353849, 0 0px 0 0 #353849;
}
.wrapper.style2:after {
box-shadow: inset 0 0px 0 0 #353849, 0 0px 0 0 #353849;
}
.wrapper.style3 {
background-color: #3d4051;
}
.wrapper.style3:before, .wrapper.style3:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233d4051%3B' /%3E%3C/svg%3E");
}
.wrapper.style3:before {
box-shadow: inset 0 0px 0 0 #3d4051, 0 0px 0 0 #3d4051;
}
.wrapper.style3:after {
box-shadow: inset 0 0px 0 0 #3d4051, 0 0px 0 0 #3d4051;
}
.wrapper.style4 {
background-color: #454858;
}
.wrapper.style4:before, .wrapper.style4:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23454858%3B' /%3E%3C/svg%3E");
}
.wrapper.style4:before {
box-shadow: inset 0 0px 0 0 #454858, 0 0px 0 0 #454858;
}
.wrapper.style4:after {
box-shadow: inset 0 0px 0 0 #454858, 0 0px 0 0 #454858;
}
.wrapper.style5 {
background-color: #4d5060;
}
.wrapper.style5:before, .wrapper.style5:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234d5060%3B' /%3E%3C/svg%3E");
}
.wrapper.style5:before {
box-shadow: inset 0 0px 0 0 #4d5060, 0 0px 0 0 #4d5060;
}
.wrapper.style5:after {
box-shadow: inset 0 0px 0 0 #4d5060, 0 0px 0 0 #4d5060;
}
.wrapper.style6 {
background-color: #555867;
}
.wrapper.style6:before, .wrapper.style6:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23555867%3B' /%3E%3C/svg%3E");
}
.wrapper.style6:before {
box-shadow: inset 0 0px 0 0 #555867, 0 0px 0 0 #555867;
}
.wrapper.style6:after {
box-shadow: inset 0 0px 0 0 #555867, 0 0px 0 0 #555867;
}
.wrapper.spotlight {
background-color: #0065A2;
}
.wrapper.spotlight:before, .wrapper.spotlight:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%230065A2%3B' /%3E%3C/svg%3E");
}
.wrapper.spotlight:before {
box-shadow: inset 0 0px 0 0 #4c5c96, 0 0px 0 0 #4c5c96;
}
.wrapper.spotlight:after {
box-shadow: inset 0 0px 0 0 #4c5c96, 0 0px 0 0 #4c5c96;
}
.wrapper.spotlight .inner {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.wrapper.spotlight .image {
border-radius: 100%;
margin: 0 3em 2em 0;
width: 22em;
overflow: hidden;
-ms-flex: 1;
}
.wrapper.spotlight .image img {
border-radius: 100%;
width: 100%;
}
.wrapper.spotlight .content {
width: 100%;
-ms-flex: 2;
}
.wrapper.spotlight:nth-child(2n - 1) .inner {
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
text-align: right;
}
.wrapper.spotlight:nth-child(2n - 1) .image {
margin: 0 0 2em 3em;
}
.wrapper.spotlight.style2 {
background-color: #1659A8;
}
.wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%231659A8%3B' /%3E%3C/svg%3E");
}
.wrapper.spotlight.style2:before {
box-shadow: inset 0 0px 0 0 #45558d, 0 0px 0 0 #45558d;
}
.wrapper.spotlight.style2:after {
box-shadow: inset 0 0px 0 0 #45558d, 0 0px 0 0 #45558d;
}
.wrapper.spotlight.style3 {
background-color: #2355A3;
}
.wrapper.spotlight.style3:before, .wrapper.spotlight.style3:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232355A3%3B' /%3E%3C/svg%3E");
}
.wrapper.spotlight.style3:before {
box-shadow: inset 0 0px 0 0 #3f4e85, 0 0px 0 0 #3f4e85;
}
.wrapper.spotlight.style3:after {
box-shadow: inset 0 0px 0 0 #3f4e85, 0 0px 0 0 #3f4e85;
}
.wrapper.spotlight.style4 {
background-color: #39477c;
}
.wrapper.spotlight.style4:before, .wrapper.spotlight.style4:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2339477c%3B' /%3E%3C/svg%3E");
}
.wrapper.spotlight.style4:before {
box-shadow: inset 0 0px 0 0 #39477c, 0 0px 0 0 #39477c;
}
.wrapper.spotlight.style4:after {
box-shadow: inset 0 0px 0 0 #39477c, 0 0px 0 0 #39477c;
}
.wrapper.spotlight.style5 {
background-color: #324072;
}
.wrapper.spotlight.style5:before, .wrapper.spotlight.style5:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23324072%3B' /%3E%3C/svg%3E");
}
.wrapper.spotlight.style5:before {
box-shadow: inset 0 0px 0 0 #324072, 0 0px 0 0 #324072;
}
.wrapper.spotlight.style5:after {
box-shadow: inset 0 0px 0 0 #324072, 0 0px 0 0 #324072;
}
.wrapper.spotlight.style6 {
background-color: #2d3a69;
}
.wrapper.spotlight.style6:before, .wrapper.spotlight.style6:after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232d3a69%3B' /%3E%3C/svg%3E");
}
.wrapper.spotlight.style6:before {
box-shadow: inset 0 0px 0 0 #2d3a69, 0 0px 0 0 #2d3a69;
}
.wrapper.spotlight.style6:after {
box-shadow: inset 0 0px 0 0 #2d3a69, 0 0px 0 0 #2d3a69;
}
@media screen and (max-width: 980px) {
.wrapper {
margin: 4.75em 0;
}
.wrapper:before, .wrapper:after {
height: 4.75em;
}
.wrapper:before {
top: -4.75em;
}
.wrapper:after {
bottom: -4.75em;
left: 0;
}
.wrapper .inner {
padding: 3em 3em 1em 3em ;
width: 100%;
}
.wrapper.spotlight .image {
margin: 0 2em 2em 0;
width: 32em;
}
.wrapper.spotlight:nth-child(2n - 1) .image {
margin: 0 0 2em 2em;
}
}
@media screen and (max-width: 736px) {
.wrapper {
margin: 2.5em 0;
}
.wrapper:before, .wrapper:after {
height: 2.5em;
}
.wrapper:before {
top: -2.5em;
}
.wrapper:after {
bottom: -2.5em;
left: 0;
}
.wrapper .inner {
padding: 2em 2em 0.1em 2em ;
}
.wrapper.spotlight .inner {
-moz-align-items: -moz-flex-start;
-webkit-align-items: -webkit-flex-start;
-ms-align-items: -ms-flex-start;
align-items: flex-start;
}
.wrapper.spotlight .image {
width: 19em;
margin: 0 1.75em 2em 0;
}
.wrapper.spotlight:nth-child(2n - 1) .image {
margin: 0 0 2em 1.75em;
}
}
@media screen and (max-width: 480px) {
.wrapper.spotlight .inner {
display: block;
}
.wrapper.spotlight .image {
margin: 0 0 1em 0 !important;
max-width: 85%;
width: 12em;
}
}
@media screen and (max-width: 360px) {
.wrapper .inner {
padding: 2em 1.5em 0.1em 1.5em ;
}
}
Thin lines appear in between sections
Working in Dreamweaver does not show the lines
Upvotes: 3
Views: 1727
Answers (3)
Feroz
Reputation: 556
.wrapper:before, .wrapper:after {
height: 6.55em; /* Increaseheight by .05em */
}
Increasing height by .05 will fix it.
Upvotes: 0
Firoz
Reputation: 101
It will work for thin line, please change the margin of '.wrapper' class see below css:
.wrapper {
background-color: #1A3F79;
margin: 6.2em 0;
position: relative;
}Upvotes: 2
shubham.k
Reputation: 36
I'm not sure if this would help you achieve what you are aiming for but maybe you could use the CSS clip-path: to achieve the same result and add the vendor prefixes in order to ensure cross-browser compatibility
these are some links which would be of some help hopefully https://css-tricks.com/almanac/properties/c/clip/
https://bennettfeely.com/clippy/
hope this helps
Upvotes: 0
Related Questions
- Lines appear after scaling up content
- White line appearing on all sides of web page
- unwanted line between divs
- Some unwanted borders are appearing on this HTML/CSS page I created
- Strange Diagonal Lines on Chrome Browser
- Line on some browsers
- Extra white lines/pixels
- CSS Lines Appearing
- CSS issue - what is causing this vertical line?
- Where do these white lines come from?