Greetings fellow web developers! Currently, I am facing an issue with a logo embedded in a navigation bar displaying differently in Chrome compared to IE version 10 running document standards. The webpage is utilizing bootstrap CSS. Here is the code snippet:
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><img class="" src="img/logo.png" style="height: 50px;"></li>
<li><a href="team.htm">Team</a></li>
<li><a href="index.htm">Mission</a></li>
<li><a href="charity.htm">Charity</a></li>
<li class="active"><a href="#">Events</a></li>
<li><a href="past.htm">Past</a></li>
<li><a href="talk.htm">Contact</a></li>
<li><a href="gallery.htm">Gallery</a></li>
</ul>
</div>
</div>
</div>
<!-- /.navbar -->
</div>
While IE displays the expected output, Chrome shows something different:
The CSS for the image in bootstrap.css and list is outlined below:
img {
width: auto;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic; }
li {
line-height: 20px;
}
I'm seeking guidance on what might be causing this discrepancy. Any insights or suggestions are highly appreciated!
UPDATE: In response to recommendations suggesting setting a width, I added "width: 100px;" after specifying the height in the HTML code. This adjustment led to the image resizing correctly in IE10 but getting capped at 64px on Chrome. Upon inspecting the Computed Style, it was revealed: