CODEWITHSUNDEEP
htmlcssgoogle-chromemicrosoft-edge
David Stančík
David Stančík

Reputation: 350

Microsoft Edge bottom line bug

html * {
  box-sizing: border-box;
  padding:0;
  margin:0;
}
html,
body {
  height: 100%;
    font-family: 'Roboto', sans-serif;
    color:#666666;
    line-height: 1.7em;
    
}

body {
  /* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
  
  }
#full_2, #full_3, #full_4{
  position: relative;
  height: 100vh;
  width: 100%;
}

#full_1 {
  position: relative;
  height: 100vh;
  width: 100%;
}
#full_1 {
  background: black;
  opacity: 0.36;
}
#full_4 {
  background: magenta;
}
#full_2 {
  background: white;
}
#full_3 {
  background: lightgray;
}
.arrow-down {
  position: absolute;
  bottom: 10px;
  width: 45px;
  height: 45px;
  left: calc(50% - 16px);
}
.arrow-down a img {
  width: 100%;
}


.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}

.main-nav {float: right; width: 60%; height: 100%;}

.menu {
  background-color: #373737;
  left: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
z-index: 5;
}

#main-header a{
    text-decoration: none;
    color: #ffffff;
    font-size:2.0em;
    z-index: 10;
    opacity: 1;
}

#main-header a:hover{
    color: #585858;
}

#main-header {
    position: absolute;
    width:100%;
    height:70px;
    top:0;
    background-color: rgba(0,0,0,0);
    z-index: 100;
}

#main-header ul li {
    display:inline;
    padding:20px 20px;
}

#main-header ul {
    float: right;
    margin-top:0px;
    padding:0;
    padding-top: 25px;
    padding-right: 25px;
    text-align: right;
}

#container{
    width: 90%;
}

#lupa{
    float: right;
    width: 40%;
    height: 100%;
}

#lupa img{516 918
    width: 90px;
    height: 492px;
    float: right;
    padding-top: 90px;
}

#content_1{
    
    float: left;
    height: 100%;
    width: 60%;
    
}

#content_container{
    padding-top: 125px;
    height: 100%;
    width: 100%;
    padding-left: 35%;
}

#nadpis1{
    
    
    margin-bottom: 45px;
    
}

#nadpis1 img{
    width: 231px;
    height: 44px;
}

#content_1_1 a{
    color: #014FC4;
    text-decoration: none;
    font-weight: 800;
    font-size: 25px;
}

#content_1_1 h2, p{
    color: #2F2F2F;
    font-size: 25px;
    text-decoration: none;
}
#footer_left{
    height: 90%;
    float: left;
    width: 40%;
}
.footer_1, .footer_2{
    height: 100%;
    width: 50%;
}

.footer_1{
    float: left;
}

.footer_2{
    float:right;
}

.footer_3{
    
}

#full_5{
    height:100vh;
    background-color: #0F032D;
    bottom: 0;
}

.footer_bottom{
    color: white;
    height: 10%;
    width: 100%;
    text-align: center;
    clear: both;
    bottom: 0;
    padding-bottom: 10px;
    z-index: 10;
}



#full_5 ul{
    padding-right: 25px;
    padding-top: 25px;
}

#full_5 ul li{
    padding-top: 25px;
}

#full_5 ul li a{
    color: white;
    text-decoration: none;
    font-size: 16px;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
    html * {
  box-sizing: border-box;
  padding:0;
  margin:0;
}
html,
body {
  height: 100%;
    font-family: 'Roboto', sans-serif;
    color:#666666;
    line-height: 1.7em;
    
}

body {
  /* Location of the image */
  background-image: url(1.jpg);
  
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Background image doesn't tile */
  background-repeat: no-repeat;
  
  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;
  
  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
  
  }
#full_2, #full_3, #full_4{
  position: relative;
  height: 100vh;
  width: 100%;
}

#full_1 {
  position: relative;
  height: 100vh;
  width: 100%;
}
#full_1 {
  background: black;
  opacity: 0.36;
}
#full_4 {
  background: magenta;
}
#full_2 {
  background: white;
}
#full_3 {
  background: lightgray;
}
.arrow-down {
  position: absolute;
  bottom: 10px;
  width: 45px;
  height: 45px;
  left: calc(50% - 16px);
}
.arrow-down a img {
  width: 100%;
}

#full_2 .arrow-down a img {
width: 100%;
display: none;
}

.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}

.main-nav {float: right; width: 60%; height: 100%;}

.menu {
  background-color: #373737;
  left: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
z-index: 5;
}

#main-header a{
    text-decoration: none;
    color: #ffffff;
    font-size:2.0em;
    z-index: 10;
    opacity: 1;
}

#main-header a:hover{
    color: #585858;
}

#main-header {
    position: absolute;
    width:100%;
    height:70px;
    top:0;
    background-color: rgba(0,0,0,0);
    z-index: 100;
}

#main-header ul li {
    display:inline;
    padding:20px 20px;
}

#main-header ul {
    float: right;
    margin-top:0px;
    padding:0;
    padding-top: 25px;
    padding-right: 25px;
    text-align: right;
}

#container{
    width: 95%;
    margin-right: auto;
    margin-left: auto;
}

#lupa{
    text-align: center;
    width: 100%;
    height: 100%;
    float: none;
}

#lupa img{516 918
    width: 90px;
    height: 492px;
    float: none;
    padding-top: 0px;
}

#content_1{
    
    height: 100%;
    width: 100%;
    text-align: center;
}

#content_container{
    padding-top: 100px;
    height: 100%;
    width: 100%;
    padding-left: 0px;
    margin-bottom: 20px;
}

#nadpis1{
    margin-bottom: 45px;    
}

#nadpis1 img{
    width: 231px;
    height: 44px;
}

#content_1_1 a{
    color: #014FC4;
    text-decoration: none;
    font-weight: 800;
    font-size: 25px;
}

#content_1_1 h2, p{
    color: #2F2F2F;
    font-size: 25px;
    text-decoration: none;
}
}
<!DOCTYPE html>
<html>
    <head>
        <title>Add gospel Přerov</title>
        <link href="styles.css" rel="stylesheet" type="text/css">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link
	href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,cyrillic-ext'
	rel='stylesheet' type='text/css'>
    </head>
    <div class="menu" >
    </div>
    <div id="wrapper">
        <div id="main-header">
				<div class="logo">
					<a href="http://david.addagio.cz/gospel"><img src=""
						style="max-width: 90%; height: auto;" alt="gospel logo" /></a>
				</div>
				<!--/.logo-->
				<div class="main-nav">
					<nav class="nav">
						<ul>
							<li class="nav-item"><a href="index.php">Aktuálně</a></li>
							<li class="nav-item"><a href="#content_1">O nás</a></li>
							<li class="nav-item"><a href="#full_3">Kontakt</a>
                            <li class="nav-item"><a href="#full_4">Foto/Video</a>
						</ul>
					</nav>
				</div>
        </div>
            <div id="full_1">
          <div class="arrow-down">
            <a href="#full_2"><img src="arrow_down.png" alt="arrow-down"></a>
          </div>
        </div>
        <div id="full_2">
            <div id="container">
                <div id="content_1">
                    <div id="content_container">
                    <div id="nadpis1">
                        <img src="where.png" alt="where">
                    </div>
                    
                    <div id="content_1_1">
                        <p>Už z našeho jména vyplívá, že se nacházíme
                        ve městě Přerov. Klikněte na lupu a získáte
                        přesnou navigaci.
                        
                        Jsme od Vás příliš daleko?
                            kontaktujte nás <a href="index.html">zde</a></p>
                    </div>
                    </div>
                </div>
                
                <div id="lupa">
                    <a href="https://www.google.cz/maps/place/C%C3%ADrkev+%C4%8Ceskoslovensk%C3%A1+Husitsk%C3%A1/@49.4498538,17.4505903,137m/data=!3m1!1e3!4m2!3m1!1s0x0000000000000000:0x17de2d35d2ee97d6" target="_blank"><img src="lupa.png"></a>
                </div>  
        </div>        
          <div class="arrow-down">
            <a href="#full_3"><img src="arrow_down_black.png" alt="arrow-down"></a>
          </div>
        </div>
        <div id="full_3">
          <div class="arrow-down">
            <a href="#full_4"><img src="arrow_down.png" alt="arrow-down"></a>
          </div>
        </div>
        <div id="full_4">
          <div class="arrow-down">
            <a href="#full_5"><img src="arrow_down.png" alt="arrow-down"></a>
          </div>
        </div>
        
        <div id="full_5">
        <div id="footer_left">
        <div class="footer_1">
            <ul>
            <li><a href="#full_1">Podmínky použití</a></li>   
            <li><a href="#full_1">Kontakty</a></li>
            <li><a href="#full_1">Novinky</a></li>
            <li><a href="#full_1">Fotky</a></li>
            </ul>
        </div>
            
        <div class="footer_2">
            
        </div>
        </div>    
        <div class="footer_3">
            
        </div>
            
        <div class="footer_bottom">
        
        </div>
        </div>
        
    </div>
        
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="main.js">
        $('.icon-menu').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('body').animate({
      left: "285px"
    }, 200);
  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-285px"
    }, 200);

    $('body').animate({
      left: "0px"
    }, 200);
  });
};
        </script>
    </body>
</html>

Hi,

Well, i am making a website.. it contains 5 divs, (full_1, full_2, full_3, full_4, full_5), all those divs are height:100vh; and width:100%; there is a

body {
  /* Location of the image */
  background-image: url(1.jpg);

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Background image doesn't tile */
  background-repeat: no-repeat;

  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;

  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;

  }

now, everything just works great, but the last div has a little line below it, like 1px line (this line looks like there is a space at the bottom, below the div, cause the line looks like the background image mentioned before...) This problem I have seen only in Microsoft Edge, but I only tried Edge and Chrome(Chrome displays it really great)

Here are photos from a) Edge , b) Chrome.

This is from Microsoft Edge

This is from Google Chrome

Hope, you can see it...

Also... the code snippet is maybe wrong... but it could help.

PS: Site is optimized for phones and tablets. PPS: for clear look at the website, visit: http://david.addagio.cz/gospel

Upvotes: 1

Views: 1380

Answers (1)

Ammar
Ammar

Reputation: 79

Just give boxshadow of 1px with same color on bottom

box-shadow: #0f032d 0px 1px 0;

Upvotes: 3

Related Questions