This has me puzzled I luckily noticed the difference:
Left picture is Google Chrome and right is Firefox,
Here’s the link: www.otzerling.com
Why is this happening and how should I fix this difference? help is appreciated…
Different browsers made by different companies have different ideas on how elements should be presented. Every Browser has an internal stylesheet that your css files overwrite. You can overcome the difference in initial setings by using reset.css or normalize.css. They take different approaches in synchronizing the browser’s styles though.
I do use Bootstrap which If I recap correctly should do that also, but I don’t get whats the css line causing this so I can display the same for both browsers. Example placeholders in Firefox have an opacity set that Chrome doesn’t I figured this out and was able to neutralize that. I’m trying to do the same here.
As you can see in the screenshot there is a difference in header height between the two browsers. Also the body has top padding in firefox. Thats the purple area.
1 Like
The header looks pretty different in the two browsers as well, it’s not just the height. To be fair it looks like a pretty old version of Bootstrap is used (3.3.1).
For the header height, you can remove the bottom-margin from the .logo1 class and move it to the parent container instead (the div with the classes row color-azul).
OK I think I found the root… take a look at this:
Unchecking/disabling the property aspect -ratio in Chrome makes it display like in Firefox. Is this a bug?
Edit: Firefox on the other hand doesn’t support this rule hence the difference:
Yes I have to migrate to a newer version, on my to-do list… 
The aspect-ratio property is still very new and not well supported yet. I would not suggest using it.
If you do want to use it I would apply it to the image and not the container.
Oj I didn’t use/set it, this image got that property applied on it’s own, I only set the height and width attributes on the image, so that there’s no CLS (cumulative shift layout). Chrome seems to be applying aspect ratio whenever with and height are specified. Maybe because it has display block it applied this aspect ratio to the container??
So it’s not a custom WP theme? Not sure why anyone would add that property seeing as it’s barely supported. I guess you have to ask the people that created the theme then.
I would just remove it from the CSS (or overwrite it aspect-ratio: unset using custom CSS).
1 Like
It is a custom theme, I created it, and no I haven’t specified the aspect ratio property anywhere in the theme, that’s why is odd. Should I report this on Google Chrome Github?
I was considering overwriting it with aspect-ratio: 0 but yeah unset seems a better and more correct fix. Thank you!!
Wait I double checked to be sure the main.css file and it has the property. I don’t know how it got there but it is in the code, thank you guys.
1 Like
No problem.
CSS can quickly get tricky to maintain and keep track of. Theme styles, mixed with CSS framework styles, mixed with some custom one-off styles, it can get hard to debug real fast.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.