Skip to main content
R
r_tist
Inspiring
October 31, 2019
Question

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

  • October 31, 2019
  • 1 reply
  • 604 views

Hi,

 

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

<img src="/logo.svg" alt="logo" style="max-width: 100%; height: auto; float: left; display: inline-block; margin-top: -23%;">

 

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:

<img style="height: auto; margin-top: 1.5%; float: left; display: inline-block; max-width: 43%;" alt="logo" src="/logo.svg">

 

Ugh... how to resolve?

This topic has been closed for replies.

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 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
R
r_tistAuthor
Inspiring
November 1, 2019

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

 

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
November 1, 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
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices