Hi folks: I'm trying to add a gravatar image for logged in users to my top bar on a site running Twitter Bootstrap v2.0. I've got it working programmatically but for some reason adding even a small picture (see attached .png) pushes the bottom of the bar top nav bar down significantly destroying its elegant design. I'm not sure how to fix this. Here's the code for the navbar.
<div class='navbar navbar-fixed-top'> <div class='navbar-inner'>
<div class='container'> <a class='btn btn-navbar'
data-target='collapse' data-toggle='.nav-collapse'> <span
class='icon-bar'></span> <span class='icon-bar'></span>
<span class='icon-bar'></span> </a> <div
class='nav-collapse'> <ul class='nav'> <li
class='active'> <a href='/home
<view-source:http://localhost.lan:3000/home>'>Home</a>
</li> <li> <a href='/about
<view-source:http://localhost.lan:3000/about>'>About</a>
</li> <li> <a href='/questions
<view-source:http://localhost.lan:3000/questions>'>Questions</a>
</li> <li> <a href='/badges
<view-source:http://localhost.lan:3000/badges>'>Badges</a>
</li> <li> <a href='/users
<view-source:http://localhost.lan:3000/users>'>Users</a>
</li> <li> <a href='/tags
<view-source:http://localhost.lan:3000/tags>'>Tags</a>
</li> <li> <a href='/activity
<view-source:http://localhost.lan:3000/activity>'>Activity</a>
</li> <li class='dropdown'> <a
class='dropdown-toggle' data-toggle='dropdown' href='#
<view-source:http://localhost.lan:3000/users/rasheqrahman#>'>
Groups <b class='caret'></b>
</a> <ul class='dropdown-menu'> <li>
<a href="http://localhost.lan:3000
<view-source:http://localhost.lan:3000/>">Shapado</a>
</li> </ul> </li> </ul>
<ul class='nav pull-right'> <style>
/*<![CDATA[*/ {padding-bottom:10px;}
/*]]>*/ </style> <li class='dropdowN'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#
<view-source:http://localhost.lan:3000/users/rasheqrahman#>'>
<img alt="rasheqrahman" class="gravatar"
src="http://gravatar.com/avatar/3d9dfa064ae230c030c1cb7094d28b65.png?s=25
<view-source:http://gravatar.com/avatar/3d9dfa064ae230c030c1cb7094d28b65.png?s=25>"
title="rasheqrahman" /> <span class='class'>
rasheqrahman </span> <b
class='caret'></b> </a> <ul
class='dropdown-menu'> <li> <a
href="/users/rasheqrahman
<view-source:http://localhost.lan:3000/users/rasheqrahman>"
class="pjax" data-layout="user">Profile</a> </li>
<li> <a href="/settings
<view-source:http://localhost.lan:3000/settings>">Settings</a>
</li> <li> <a
href="/users/rasheqrahman
<view-source:http://localhost.lan:3000/users/rasheqrahman>">My karma:
2</a> </li> <li>
<a href="/connect
<view-source:http://localhost.lan:3000/connect>">Connect</a>
</li> <li> <a
href="/users/logout
<view-source:http://localhost.lan:3000/users/logout>">Log out</a>
</li> </ul> </li>
</ul> </div> </div> </div> </div>
I appreciate any advice as I imagine others using TB have faced similar
problems.
Thanks everyone,
Rasheq
<<attachment: navbarwithgravatar.png>>
