Highlighted

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

Enthusiast ,
Oct 31, 2019

Copy link to clipboard

Copied

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?

TOPICS
Browser, Code, How to

Views

294

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Enthusiast ,
Oct 31, 2019

Copy link to clipboard

Copied

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?

TOPICS
Browser, Code, How to

Views

295

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 31, 2019 0
Adobe Community Professional ,
Oct 31, 2019

Copy link to clipboard

Copied

Are you using a Bootstrap layout?

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

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2019 0
Enthusiast ,
Nov 01, 2019

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2019 0
Adobe Community Professional ,
Nov 01, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2019 0