Question posted in 
I’m building a header for my website. On the left side is a logo which has an underline at the bottom of the image. I then use another image underlaid to continue this underline to the right side of the screen. You can see at http://www.phoenixwebdev.com.au/.
The problem is that in Firefox the heights of the underlines in the two images are often slightly different. The two images are the exact same height, both pngs, both outputted from the same photoshop file. In Chrome, IE, Opera and Safari the underlines are always the exact same height. Below is an image with the artifact taking place.
These are the two images.
and
When changing the browser window size in Firefox, this effect will appear and disappear.
I’ve played with several aspects of css including height, max-height, position, vertical-align. I’ve also tried taking the logo out of it’s containing <a> tag to no avail. The same thing happens when the non-logo image exists as a background of the parent element rather than an <img>.
Header HTML code:
<div class="top-info">
*top search bar code removed for brevity*
</div>
<!-- Brand and toggle get grouped for better 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 the nav links, forms, and other content for 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 for brevity*
</ul>
</div>
CSS is a bit complicated as this is WordPress and I am using a child theme. I can add this in later if noone has an answer without seeing it summarised here. If anyone can cast some illumination on the problem it would be much appreciated!
3
Answers
I found that what was causing the slight height changes was the fact that I was stretching the 'underline' image across the width of the header. It seems that in Firefox compressing or stretching an image horizontally has an effect on the way it is rendered in the vertical direction.
By replacing the underline image with an images as wide as the screen and doing no stretching, the two images lined up fine.
I cannot see the problem on my Firefox but you can try not to put line breaks after your
<img />tags as I know it sometimes adds unwanted and unexpected gaps.The problem is a mixture of both your css and those two images.
Upon inspecting your site at the URL provided, it appears that you are scaling down the images to be 80px tall. The original height of these images is 295px and 295/80 is 3.6875. This causes the browser to have to calculate uneven pixels, which is where the problem is coming from. Ideally your assets should be the same height as what you are trying to show them at unless trying to accommodate retina devices.
I would suggest resizing the actual images in photoshop to be exactly 80px tall.