css - Firefox rendering two overlaid images with slight height differences -

css - Firefox rendering two overlaid images with slight height differences -

i'm building header website. on left side logo has underline @ bottom of image. utilize image underlaid go on underline right side of screen. can see @ http://www.phoenixwebdev.com.au/.

the problem in firefox heights of underlines in 2 images different. 2 images exact same height, both pngs, both outputted same photoshop file. in chrome, ie, opera , safari underlines exact same height. below image artifact taking place.

these 2 images.

and

when changing browser window size in firefox, effect appear , disappear.

i've played several aspects of css including height, max-height, position, vertical-align. i've tried taking logo out of it's containing <a> tag no avail. same thing happens when non-logo image exists background of parent element rather <img>.

header html code:

<div class="top-info"> *top search bar code removed brevity* </div> <!-- brand , toggle grouped improve mobile display --> <div class="navbar-header"> <img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-header-border.png" style=""> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.phoenixwebdev.com.au"> <img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-logo.png" alt="phoenixweb"> </a> </div> <div class="triangle visible-md visible-lg"> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" > <img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-header-border.png" style="position: absolute; width:100%; height:80px;"> <ul id="nav" class="nav navbar-nav navbar-right"><li class="menu-portfolio"><a href="http://www.phoenixwebdev.com.au/portfolio-4-columns/">portfolio</a></li> *nav items removed brevity* </ul> </div>

css bit complicated wordpress , using kid theme. can add together in later if noone has reply without seeing summarised here. if can cast illumination on problem much appreciated!

i cannot see problem on firefox can seek not set line breaks after <img /> tags know adds unwanted , unexpected gaps.

css firefox