Image Difference In Firefox And Chrome

I have a significant difference in a logo image i have when it is displayed in Chrome compared to Firefox (I did my testserver on Firefox and then live in Chrome) Here are the 2 di

Solution 1:

Use stylesheet, inline styles or Dimension attributes are a nightmare to maintain...

height: 123px; /*or any other fixed/dynamic value, unit*/width: auto;   /*let the browser do the scaling */

would help (unless you're running into specificity issues)

Also it's goot to know that in HTML5% are not allowed on attributeswidth="" and height=""

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

<img> attributes

width The intrinsic width of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.

height The intrinsic height of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.

Solution 2:

The issue you may be having can be related to your use of percentage. You set them to 250% but percent of what? It should be the parent element but what is the parent element set to? The parent of the image is the anchor element which has no width set and is not a block level element.

Try setting the parent element to some fixed width and see if the issue goes away or both browsers display the same.

For example, I set the enclosing anchor element to display:block; and set its width to 500px.

Solution 3:

Replace the percentage width with a fixed pixel width. Firefox and Chrome register % measurements differently, due to the fact that the containers are laid out slightly differently. Also, add the measurements to a class and give then an !Important attribute. I believe Chrome has a css file it uses on all the sites visited in it, which gives some design layouts etc.

UPDATE: After your comment, try looking in developer tools at the element to see if something is overwriting it. If there isn't, then I'm not sure what to suggest. Maybe go with a different design, such as a centered div with the elements inside, or use a navbar with this logo in, or a centralised logo without the bar. There are lots of options. Sorry I couldn't be more help