CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorerdisplay
EpicaSjH
EpicaSjH

Reputation: 5

Percentage margin differs in IE and Chrome

I am trying to adapt the hovering of my navigation bar, yet without success, my css so it will work for Chrome browser (only works fine in IE). The problem seems to be that the size of the display is not the same for both browsers and as I am using % values in the margin (to move tha navBar) they differ between IE and Chrome.

I have only found that I could include different stylesheets by previously checking (for example with javascript) the browser. However, I would like to find a solution css based. Any ideas?

The result I would like to have is to have underlined every section that it is been hovered and moved this line to the next section that will be hovered.

Here is the code:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

* {
	box-sizing: border-box;
}

body {
	font-family: 'Roboto', sans-serif; 
	margin: 0px;
	background:black;
}
a:hover {
 cursor:pointer;
}

.container {
	/*margin-top:40px;*/
	width: 50%;
	background:black;
	margin-left:50%;
}
.white-line {
	position:absolute;
	margin-top:-17px;
	width: 50%;
	background:white;
	height:1px;
	margin-left:50%;
	z-index:0;
}

ul li {
	display: inline;
	text-align: center;
	font-weight:500;
}

.navBar {
	display: inline-block;
	width: 25%;
	padding: .50rem 0;
	margin: 0px;
	text-decoration: none;
	color: white;
}

.one:hover ~ hr {
	margin-right: 75%;
	background: white;
	
}
.two:hover ~ hr {
	margin-right: 25%;
	background: white;
}

.three:hover ~ hr {
	margin-left: 25%;
	background: white;
}

.four:hover ~ hr {
	margin-left: 75%;
	background: white;
}

p{
	font-weight:300;
	font-size:25px;
	color:black;
}

hr {
	height: .25rem;
	width: 25%;
	margin: 0px;
	background: black;
	border: none;
	transition: .3s ease-in-out;
}

@media screen and (max-width: 700px) {

  .container{
	margin-top:50px;
	margin-left:20%;
	width:70%;

  }
  .white-line{
	margin-left:25%;
	width:70%;
  }

}

@media screen and (max-width: 420px) {
	
  .navBar{
	display:block;
   }
	
  .one:hover ~ hr , .two:hover ~ hr, .three:hover ~ hr, .four:hover ~ hr{
	background:transparent;
	width:20px;
  }

 .container{
	margin-left:25%;
  }

 .container ul li a:hover  {
	background:white;
	color: black;
	min-width:200px;
	margin-left:-80px;
  }
  .navBar {
	width: 200px;
    margin-left:-80px;
  }

  
 .white-line{
	background:transparent;
  }
}	
	

	
	
	
	
	
	
<!DOCTYPE html>
<html lang="en">
<head>
<title class="title">Welcome to NormMaster</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Selected font Roboto-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>  
<!--navigatio bar-->
<div class="container">
  <ul>
    <li class="one"><a class="navBar" href="#">About</a></li><!--
 --><li class="two"><a class="navBar" href="#">Contact</a></li><!--
 --><li class="three"><a class="navBar" onclick="openForm()" href="#">Register</a></li><!--
 --><li class="four"><a class="navBar" href="#">Log in</a></li>
    <hr />
  </ul>
</div>

<!--line-->
<div class="white-line">
</div>

</body>
</html>

Thank you in advance! :)

How it looks in IE11: enter image description here

Upvotes: 0

Views: 127

Answers (2)

Zhi Lv
Zhi Lv

Reputation: 21363

The issue is related to the <hr/> tag's init position, if we use F12 developer tools to check the element, we can see that in the IE and Edge browser, the <hr/> tag locate in the middle of the white line. Screenshot as below:

enter image description here

But, in the Chrome and Firefox browser, the <hr> tag locates at the left of the white line. Screenshot like this:

enter image description here

To solve this issue, we could according to the browser to add the related CSS styles for the navigate bar, please refer to the following code:

    .navBar {
        display: inline-block;
        width: 24%;
        padding: .50rem 0;
        margin: 0px;
        text-decoration: none;
        color: white;
    }
    /*Chrome browser*/
    @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
        .one:hover ~ hr {
            background: white;
        }

        .two:hover ~ hr {
            margin-left: 25%;
            background: white;
        }

        .three:hover ~ hr {
            margin-left: 50%;
            background: white;
        }

        .four:hover ~ hr {
            margin-left: 75%;
            background: white;
        }

        p {
            font-weight: 300;
            font-size: 25px;
            color: black;
        }
    }
    /*Microsft Edge browser*/
    @supports (-ms-ime-align:auto) {
        .one:hover ~ hr {
            margin-right: 75%;
            background: white;
        }

        .two:hover ~ hr {
            margin-right: 25%;
            background: white;
        }

        .three:hover ~ hr {
            margin-left: 25%;
            background: white;
        }

        .four:hover ~ hr {
            margin-left: 75%;
            background: white;
        }
    }
    /*IE Browser*/
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

        .one:hover ~ hr {
            margin-right: 75%;
            background: white;
        }

        .two:hover ~ hr {
            margin-right: 25%;
            background: white;
        }

        .three:hover ~ hr {
            margin-left: 25%;
            background: white;
        }

        .four:hover ~ hr {
            margin-left: 75%;
            background: white;
        }
    }

Then, the result like this:

Chrome browser:

enter image description here

IE browser:

enter image description here

More details sample code, please check this link.

Upvotes: 0

Revti Shah
Revti Shah

Reputation: 642

Here is the code. Hope it will work fine. If any changes please let me know.

https://jsfiddle.net/ysm2n58c/7/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

* {
	box-sizing: border-box;
}

body {
	font-family: 'Roboto', sans-serif; 
	margin: 0px;
	background:black;
}
a:hover {
 cursor:pointer;
}

.container {
	/*margin-top:40px;*/
	width: 50%;
	background:black;
	margin-left:50%;
}
.white-line {
	position:absolute;
	margin-top:-17px;
	width: 50%;
	background:white;
	height:1px;
	margin-left:50%;
	z-index:0;
}

ul li {
	display: inline;
	text-align: center;
	font-weight:500;
}

.navBar {
	display: inline-block;
	width: 25%;
	padding: .50rem 0;
	margin: 0px;
	text-decoration: none;
	color: white;
}

.one:hover ~ hr {
	margin-left: 0;
	background: white;
	
}
.two:hover ~ hr {
	margin-left: 25%;
	background: white;
}

.three:hover ~ hr {
	margin-left: 50%;
	background: white;
}

.four:hover ~ hr {
	margin-left: 75%;
	background: white;
}

p{
	font-weight:300;
	font-size:25px;
	color:black;
}

hr {
	height: .25rem;
	width: 25%;
	margin: 0px;
	background: black;
	border: none;
	transition: .3s ease-in-out;
}

@media screen and (max-width: 700px) {

  .container{
	margin-top:50px;
	margin-left:20%;
	width:70%;

  }
  .white-line{
	margin-left:25%;
	width:70%;
  }

}

@media screen and (max-width: 420px) {
	
  .navBar{
	display:block;
   }
	
  .one:hover ~ hr , .two:hover ~ hr, .three:hover ~ hr, .four:hover ~ hr{
	background:transparent;
	width:20px;
  }

 .container{
	margin-left:25%;
  }

 .container ul li a:hover  {
	background:white;
	color: black;
	min-width:200px;
	margin-left:-80px;
  }
  .navBar {
	width: 200px;
    margin-left:-80px;
  }

  
 .white-line{
	background:transparent;
  }
}	
<!DOCTYPE html>
<html lang="en">
<head>
<title class="title">Welcome to NormMaster</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Selected font Roboto-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" type="text/css">
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>  
<!--navigatio bar-->
<div class="container">
  <ul>
    <li class="one"><a class="navBar" href="#">About</a></li><!--
 --><li class="two"><a class="navBar" href="#">Contact</a></li><!--
 --><li class="three"><a class="navBar" onclick="openForm()" href="#">Register</a></li><!--
 --><li class="four"><a class="navBar" href="#">Log in</a></li>
    <hr />
  </ul>
</div>

<!--line-->
<div class="white-line">
</div>

</body>
</html>

Upvotes: 2

Related Questions