size & position of SVG rendering different in IE/Edge...

Report · Oct 31, 2019

Hi,

This code works in Chrome and Firefox for positioning a logo within a navbar:

However, in IE and Edge, the logo is rendering much larger than set size max limit. This fiddling renders it well, but then offsets Chrome and Firefox:

Ugh... how to resolve?

Report · Oct 31, 2019

Are you using a Bootstrap layout?

Which versions of IE? Older versions of IE do not recognize max-width.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 01, 2019

This app is coded using Bootstrap with Flexbox. The version of IE is 10, and also, the same is occuring with Edge.

Report · Nov 01, 2019

Flexbox doesn't play nice with floats. The less custom code you bring to Bootstrap, the better. Learn to use Bootstrap's built-in classes.

Copy & paste this code into a new document. Add your SVG to the navbar-brand where indicated.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Navbar Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
/**styles for large devices**/
@media (min-width: 990px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
/**optional offset from top**/
top: 2%;
}
}
</style>
</head>
<body>
<nav id="topNav" class="navbar navbar-expand-lg navbar-dark bg-dark"> 
<a class="navbar-brand mx-auto" href="#"> 
<!--Your logo goes here--> 
<img class="navbar-brand" src="https://dummyimage.com/250x110" alt="logo/brand"> </a> 
<!--Hamburger icon-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse"> 
<!--Links-->
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<!-- Dropdown -->
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a>
<div class="dropdown-menu"> 
<a class="dropdown-item" href="#">Link 1</a> 
<a class="dropdown-item" href="#">Link 2</a> 
<a class="dropdown-item" href="#">Link 3</a>
<!--end dropdowns--></div>
</li>
<!--end left side links--></ul>

<!--right side links-->
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
</ul>
</div>
<!--end navbar--></nav>

<!--Supporting scripts. First jQuery, then popper, then Bootstrap JS--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

size & position of SVG rendering different in IE/Edge...