html - Font displays different in Chrome and in Firefox -

-

i bit new when comes web development.

i have created menu buttons width different depending on browser (firefox or chrome)

in firefox, can see end of last button of menu aligned div below. can appreciate width of button 136.5px firefox

however, in chrome fonts bolder , menu end pushed bit forward. here, width of button 139.281px chrome

this site, menu on top: http://www.metagame.gg/champions/

this html , css code menu

	.navigator {  		margin: 0;  		padding: 0;  		display: flex;      		padding-left: 39px;  		background: #8c9baa;   	}  	.navigator li {  		display: inline-block;  		position: relative;  		z-index:100;	  	}  	.navigator li {  		text-decoration: none;  		font-size: 15px;  		display: block;  		line-height: 50px;  		padding: 2px 27.75px 0px;  		-webkit-transition: 0.2s ease-in-out 0s;  		-moz-transition: 0.2s ease-in-out 0s;  		-o-transition: 0.2s ease-in-out 0s;  		-ms-transition: 0.2s ease-in-out 0s;  		transition: 0.2s ease-in-out 0s;  	}  	.navigator li a:hover, .navigator li:hover > {  		color:#fff;  		background: #7aafd1;  	}  	.navigator ul {  		display: none;  		margin: 0;  		padding: 0;  		width: 170px;  		position: absolute;  		left: 0px;  	}  	.navigator ul li {  		display:block;  		float: none;  		background:none;  		margin:0;  		padding:0;  	}  	.navigator ul li {  		font-size:12px;  		font-weight:bold;  		display:block;  		color:#797979;  		border-left: 3px solid #ffffff;  		background: #fff;  		line-height: 42px;  		transition: 0s;  	}  	.navigator ul li a:hover, .menu ul li:hover > {  		background:#efefef;  		border-left:3px solid #83bee4;  		color: #12303d;  	}  	.navigator li:hover > ul {  		display: block;  	}  	.navigator ul ul {  		left: 149px;  		top: 0px;  	}  	#in {  		color:#fff;  		background: #7aafd1;  	}  	.sub-menu {  		border:1px solid #ddd;  		border-top:0px;  		border-left:0px;  		box-shadow: 3px 5px 5px -5px #3b3b3b;  	}  	.navigatorsecond {  		margin: 0;  		padding: 0;  		display: flex;      		padding-left: 39px;  		background: #d1d1d1 ;  	}  	.navigatorsecond li {  		display: inline-block;  		position: relative;  		z-index:80;	  	}  	.navigatorsecond li {  		font-weight:600;  		text-decoration:none;  		font-size: 13px;  		display:block;  		color:#4a4a4a;  		line-height: 40px;  		padding: 0px 35.3px;  		-webkit-transition: 0.2s ease-in-out 0s;  		-moz-transition: 0.2s ease-in-out 0s;  		-o-transition: 0.2s ease-in-out 0s;  		-ms-transition: 0.2s ease-in-out 0s;  		transition: 0.2s ease-in-out 0s;  	}  	#ini {  		color:#fff;  		background: #7aafd1;  	}  	.navigatorsecond li a:hover, .navigatorsecond li:hover > {  		color:#fff;  		background: #7aafd1;  	}  	.navigatorsecond ul {  		display: none;  		margin: 0;  		padding: 0;  		width: 170px;  		position: absolute;  		left: 0px;  	}  	.navigatorsecond ul li  {  		display:block;  		float: none;  		background:none;  		margin:0;  		padding:0;  	}  	.navigatorsecond ul li  {  		font-size:13px;  		font-weight:bold;  		display:block;  		color:#797979;  		border-left: 3px solid #ffffff;  		background: #fff;  		line-height: 42px;  		transition: 0s;  	}
    <div class="menuwrap">  	<ul class="navigator">                <li><a href="http://www.metagame.gg/">home</a></li>             		<li><a href="/champions">champions</a></li>              		<li><a href="/soloq">solo queue <img class="iconmenu" src="/icon/expandir.png" alt=""/></a>     			<ul class="sub-menu">     				<li><a href="/soloq">tier list</a></li>    				<li><a href="/soloq/tactics">basics & tactics</a></li>     				<li><a href="/soloq/psychology">psychology</a></li>     				<li><a href="/soloq/picksandbans">picks & bans</a></li>     				<li><a href="/soloq/divisions">division analysis</a></li>     			</ul>   		</li>              		<li><a href="/proscene">pro scene <img class="iconmenu" src="/icon/expandir.png" alt=""/></a>     			<ul class="sub-menu">     				<li><a href="#">sub-menu 1</a></li>    				<li><a href="#">sub-menu 2</a></li>     				<li><a href="#">sub-menu 3</a></li>     			</ul>          </li>              		<li><a href="/analysis">in-depth analysis</a></li>              		<li><a href="/statistics">statistics</a></li>            	</ul>      </div>

i think because font bit bolder in chrome , causes button width higher.

thanks in advance

update: because each browser has own font rendering engine.

i replicated results current sans-serif font. case occurred when changed font monospace.

i believe you're better off using non-system font. instance, wanted see happen typical google font such open sans, , found issue did not exist when using it.

by way, work on website. looks nice. tsm! tsm! tsm!


Comments

Post a Comment

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more