Krystyna Krystyna - 6 months ago 7
Javascript Question

positioned username in navbar not displaying correctly in IE

The user name in the navbar positioned to the right displays perfectly in firefox and chrome. However, in IE the user name drops down since it has an issue with the break tag.

Is there a way to fix this in IE so it can display it like firefox and chrome?



body {
padding-top: 102px;
background-color: #4d4d4d;
font-family: 'Lato', verdana, sans-serif;
color: #010101;
}
.container {
width: 1530px;
margin-top: 0;
}
.navbar-fixed-top {
background-color: #fff;
}
.navbar-default .navbar-header {
min-height: 80px;
}
.navbar-default .navbar-header button.hamburger-icon {
margin-top: 20px;
}
.navbar-default .navbar-brand {
color: #010101;
padding-top: 5px;
}
/* searchbox */
.navbar-nav > .dropdown.search .input-group {
padding-top: 15px;
}
.navbar-nav > .dropdown.search .input-group input.form-control {
padding: 0 10px 0 0;
background-color: #fff;
color: #010101;
border-radius: 0;
border: 0;
box-shadow: none;
font-size: 16px;
font-weight: 100;
}
.navbar-nav > .dropdown.search .input-group input.form-control:hover {
background-color: #fff;
}
.navbar-nav > .dropdown.search .input-group-btn button {
padding: 2px;
border: 0;
box-shadow: none;
background-color: #fff;
border-radius: 0;
}
.navbar-nav > .dropdown.search .input-group-btn button:hover {
background-color: #fff;
color: #ff5500;
}
.navbar-nav > .dropdown.search .input-group-btn .glyphicon-search {
font-size: 22px;
}
/* bell notification and dropdown */
.navbar-default .navbar-nav > .open > a.inbox,
.navbar-default .navbar-nav > .open > a.inbox:focus,
.navbar-default .navbar-nav > .open > a.inbox:hover {
background-color: #fff;
padding-top: 15px;
margin-bottom: 5px;
}
.nav > li.dropdown.bell > a:hover,
.nav > li.dropdown.bell > a:focus {
color: #ff5500;
background-color: transparent;
}
.navbar-nav > .dropdown.bell li a:hover {
color: #ff5500;
background-color: transparent;
}
.navbar-nav > .dropdown.bell .badge-count {
background: #ff5500;
margin-top: -24px;
margin-left: -20px;
height: 1.7em;
}
.navbar-nav > li > .dropdown-menu.bell {
background-color: #f8f8f8;
border-radius: 0;
}
.navbar-nav > li > .dropdown-menu.bell li a {
padding-top: 5px;
padding-bottom: 5px;
white-space: normal !important;
width: 350px;
}
.navbar-nav > li > .dropdown-menu.bell li a span.info {
display: block;
padding: 0 5px 0 5px;
}
.navbar-nav > li > .dropdown-menu.bell li.divider {
padding: 0;
margin: 0 20px;
}
.navbar-nav > li > .dropdown-menu.bell .label {
background-color: transparent;
color: #aaa;
font-weight: 100;
}
/* bell notification and dropdown caret */
.navbar-nav > li > .dropdown-menu.bell:before {
position: absolute;
top: -10px;
right: 9%;
display: inline-block;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar-nav > li > .dropdown-menu.bell:after {
position: absolute;
top: -9px;
right: 9%;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #f8f8f8;
border-left: 9px solid transparent;
content: '';
}
/* create profile button */
.navbar-nav > .dropdown.create-profile a.create-profile-btn {
width: 200px;
padding: 12px;
margin-top: 18px;
}
.navbar-nav > .dropdown.create-profile a.btn-default {
background-color: #ff5500;
border-color: #ff5500;
color: #fff;
}
.navbar-nav > .dropdown.create-profile a.btn-default:hover,
.navbar-nav > .dropdown.create-profile a.btn-default:focus,
.navbar-nav > .dropdown.create-profile a.btn-default:active {
color: #fff;
border-color: 0;
/*set the color you want here*/
}
/* user login and dropdown */
.navbar-nav > .user-logged-in span.firstname {
font-size: 16px;
color: #010101;
}
.navbar-nav > .user-logged-in span.surname {
font-size: 16px;
color: #010101;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list {
width: 100%;
border-radius: 0;
border: 0;
background-color: #f8f8f8;
font-size: 14px;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li a {
margin: 5px 0px;
color: #010101;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li a:hover {
background-color: transparent;
color: #ff5500;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li.divider {
padding: 0;
margin: 0 20px;
}
.fullname {
float: right;
padding-right: 10px;
}
.drop-arr {
float: right;
padding-top: 10px;
}
span.avatar {
padding-right: 90px;
}
/* Large desktop */
@media (max-width: 1590px) {
.container {
width: auto;
}
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {}
/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
.container {
width: auto;
}
.navbar-default .navbar-brand {
font-size: 40px;
}
/* bell notification and dropdown */
.navbar-default .navbar-nav > .open > a.inbox,
.navbar-default .navbar-nav > .open > a.inbox:focus,
.navbar-default .navbar-nav > .open > a.inbox:hover {
width: 100% !important;
background-color: #e7e7e7;
margin-bottom: 0px;
}
.navbar-nav > li > .dropdown-menu.bell li a {
width: 100%;
}
.navbar-nav > li > .dropdown-menu.bell:before,
.navbar-nav > li > .dropdown-menu.bell:after {
display: none;
}
.navbar-nav > li > .dropdown-menu.bell li a {
text-align: left;
}
.navbar-nav > .dropdown.bell,
.navbar-nav > .user-logged-in {
text-align: center;
}
/* searchbox */
.navbar-nav > .dropdown.search {
padding-left: 10px;
padding-right: 10px;
margin-top: 0;
width: 100%;
overflow: hidden;
}
.navbar-nav > .dropdown.search .input-group {
padding-top: 0;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
.navbar-default .navbar-brand {
font-size: 30px;
}
}

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

<div class="container">
<div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1>
<a href="#" class="navbar-brand"><img src="logo.png" height="30" width="180"></a>
</h1>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">

<!-- search bar -->
<li class="dropdown search">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search name or keyword" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
</button>
</div>
</div>
</form>
</li>

<!-- notification bell -->
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
<span class="badge badge-count">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><a href="#"><span class="label label-default">4:00 AM</span><span class="info">Favourites Snippet</span></a>
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">4:30 AM</span><span class="info">Email marketing</span></a>
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>
<span class="info">
Subscriber focused email design
Extra sample line
Extra sample line
Extra sample line
</span></a>
</li>
<li class="divider"></li>
<li><a href="#" class="text-center">View All</a>
</li>
</ul>
</li>

<!-- create profile button -->
<!-- <li class="dropdown create-profile">
<a class="btn btn-default btn-lg create-profile-btn" href="#" role="button">Create a profile</a>
</li> -->

<!-- user login information -->
<li class="dropdown user-logged-in">
<a href="#" class="dropdown-toggle username" data-toggle="dropdown">
<span class="avatar"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
<span class="drop-arr"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
<span class="fullname">
<span class="firstname">firstname</span>
<br><span class="surname">lastname</span>
</span>

</a>

<ul class="dropdown-menu access-list" role="menu">
<li><a href="#">fsfsdfsddf</a></li>
<li class="divider"></li>
<li><a href="#">fsfsdsdd</a></li>
<li class="divider"></li>
<li><a href="#">sfssdsdds</a></li>
<li class="divider"></li>
<li><a href="#">fsfsdfsd</a></li>
<li class="divider"></li>
<li><a href="#">sdfsdfsdd</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>


<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>


<!-- <div class="chevron right">
<a href="#"></a>
</div>

<div style="height: 1em;">
</div> -->




</div>
</div>
</div>

</div>




Answer

Adding inline-block to the username class fixed it in IE11. Tested in the current release of Firefox, Opera, EDGE, Chrome + Canary.

.navbar-nav > .user-logged-in .username {
    display: inline-block;
}

Example:

body {
  padding-top: 102px;
  background-color: #4d4d4d;
  font-family: 'Lato', verdana, sans-serif;
  color: #010101;
}
.container {
  width: 1530px;
  margin-top: 0;
}
.navbar-fixed-top {
  background-color: #fff;
}
.navbar-default .navbar-header {
  min-height: 80px;
}
.navbar-default .navbar-header button.hamburger-icon {
  margin-top: 20px;
}
.navbar-default .navbar-brand {
  color: #010101;
  padding-top: 5px;
}
/* searchbox */

.navbar-nav > .dropdown.search .input-group {
  padding-top: 15px;
}
.navbar-nav > .dropdown.search .input-group input.form-control {
  padding: 0 10px 0 0;
  background-color: #fff;
  color: #010101;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  font-size: 16px;
  font-weight: 100;
}
.navbar-nav > .dropdown.search .input-group input.form-control:hover {
  background-color: #fff;
}
.navbar-nav > .dropdown.search .input-group-btn button {
  padding: 2px;
  border: 0;
  box-shadow: none;
  background-color: #fff;
  border-radius: 0;
}
.navbar-nav > .dropdown.search .input-group-btn button:hover {
  background-color: #fff;
  color: #ff5500;
}
.navbar-nav > .dropdown.search .input-group-btn .glyphicon-search {
  font-size: 22px;
}
/* bell notification and dropdown */

.navbar-default .navbar-nav > .open > a.inbox,
.navbar-default .navbar-nav > .open > a.inbox:focus,
.navbar-default .navbar-nav > .open > a.inbox:hover {
  background-color: #fff;
  padding-top: 15px;
  margin-bottom: 5px;
}
.nav > li.dropdown.bell > a:hover,
.nav > li.dropdown.bell > a:focus {
  color: #ff5500;
  background-color: transparent;
}
.navbar-nav > .dropdown.bell li a:hover {
  color: #ff5500;
  background-color: transparent;
}
.navbar-nav > .dropdown.bell .badge-count {
  background: #ff5500;
  margin-top: -24px;
  margin-left: -20px;
  height: 1.7em;
}
.navbar-nav > li > .dropdown-menu.bell {
  background-color: #f8f8f8;
  border-radius: 0;
}
.navbar-nav > li > .dropdown-menu.bell li a {
  padding-top: 5px;
  padding-bottom: 5px;
  white-space: normal !important;
  width: 350px;
}
.navbar-nav > li > .dropdown-menu.bell li a span.info {
  display: block;
  padding: 0 5px 0 5px;
}
.navbar-nav > li > .dropdown-menu.bell li.divider {
  padding: 0;
  margin: 0 20px;
}
.navbar-nav > li > .dropdown-menu.bell .label {
  background-color: transparent;
  color: #aaa;
  font-weight: 100;
}
/* bell notification and dropdown caret */

.navbar-nav > li > .dropdown-menu.bell:before {
  position: absolute;
  top: -10px;
  right: 9%;
  display: inline-block;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
  border-left: 10px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}
.navbar-nav > li > .dropdown-menu.bell:after {
  position: absolute;
  top: -9px;
  right: 9%;
  display: inline-block;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #f8f8f8;
  border-left: 9px solid transparent;
  content: '';
}
/* create profile button */

.navbar-nav > .dropdown.create-profile a.create-profile-btn {
  width: 200px;
  padding: 12px;
  margin-top: 18px;
}
.navbar-nav > .dropdown.create-profile a.btn-default {
  background-color: #ff5500;
  border-color: #ff5500;
  color: #fff;
}
.navbar-nav > .dropdown.create-profile a.btn-default:hover,
.navbar-nav > .dropdown.create-profile a.btn-default:focus,
.navbar-nav > .dropdown.create-profile a.btn-default:active {
  color: #fff;
  border-color: 0;
  /*set the color you want here*/
}
/* user login and dropdown */

.navbar-nav > .user-logged-in .username {
  display: inline-block;
}
.navbar-nav > .user-logged-in span.firstname {
  font-size: 16px;
  color: #010101;
}
.navbar-nav > .user-logged-in span.surname {
  font-size: 16px;
  color: #010101;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list {
  width: 100%;
  border-radius: 0;
  border: 0;
  background-color: #f8f8f8;
  font-size: 14px;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li a {
  margin: 5px 0px;
  color: #010101;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li a:hover {
  background-color: transparent;
  color: #ff5500;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li.divider {
  padding: 0;
  margin: 0 20px;
}
.fullname {
  float: right;
  padding-right: 10px;
}
.fullname span {
  display: block;
}
.drop-arr {
  float: right;
  padding-top: 10px;
}
span.avatar {
  padding-right: 90px;
}
/* Large desktop */

@media (max-width: 1590px) {
  .container {
    width: auto;
  }
}
/* Portrait tablet to landscape and desktop */

@media (max-width: 979px) {}
/* Landscape phone to portrait tablet */

@media (max-width: 768px) {
  .container {
    width: auto;
  }
  .navbar-default .navbar-brand {
    font-size: 40px;
  }
  /* bell notification and dropdown */
  .navbar-default .navbar-nav > .open > a.inbox,
  .navbar-default .navbar-nav > .open > a.inbox:focus,
  .navbar-default .navbar-nav > .open > a.inbox:hover {
    width: 100% !important;
    background-color: #e7e7e7;
    margin-bottom: 0px;
  }
  .navbar-nav > li > .dropdown-menu.bell li a {
    width: 100%;
  }
  .navbar-nav > li > .dropdown-menu.bell:before,
  .navbar-nav > li > .dropdown-menu.bell:after {
    display: none;
  }
  .navbar-nav > li > .dropdown-menu.bell li a {
    text-align: left;
  }
  .navbar-nav > .dropdown.bell,
  .navbar-nav > .user-logged-in {
    text-align: center;
  }
  /* searchbox */
  .navbar-nav > .dropdown.search {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0;
    width: 100%;
    overflow: hidden;
  }
  .navbar-nav > .dropdown.search .input-group {
    padding-top: 0;
  }
}
/* Landscape phones and down */

@media (max-width: 480px) {
  .navbar-default .navbar-brand {
    font-size: 30px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <h1>
				<a href="#" class="navbar-brand"><img src="http://placehold.it/180x30/000" height="30" width="180"></a>
			</h1>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown search">
            <form class="navbar-form" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search name or keyword" name="q">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit">
                    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
                  </button>
                </div>
              </div>
            </form>
          </li>
          <li class="dropdown bell">
            <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
              <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
              <span class="badge badge-count">1</span>
            </a>
            <ul class="dropdown-menu bell" role="menu">
              <li>
                <a href="#">
                  <span class="label label-default">4:00 AM</span>
                  <span class="info">Favourites Snippet</span>
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">
                  <span class="label label-warning">4:30 AM</span>
                  <span class="info">Email marketing</span>
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">
                  <span class="label label-warning">5:00 AM</span>
                  <span class="info">
								Subscriber focused email design
								Extra sample line
								Extra sample line
								Extra sample line
							</span>
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#" class="text-center">View All</a>
              </li>
            </ul>
          </li>
          <li class="dropdown user-logged-in">
            <a href="#" class="dropdown-toggle username" data-toggle="dropdown">
              <span class="avatar">
                                      <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" >
                                 </span>
              <span class="drop-arr">
                                      <img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" >
                                </span>  <span class="fullname">
							         <span class="firstname">John</span>

              <span class="surname">Smith</span>
              </span>
            </a>
            <ul class="dropdown-menu access-list" role="menu">
              <li>
                <a href="#">Right</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">Right</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">Right</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">Right</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">Right</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p>dfsjfhskfs</p>
    </div>
  </div>
</div>