0

This is my jsFiddle, which I have taken from my previous question here.

The CSS is:

#logo {
    position: absolute;
    left: 2%;  
}

@media (max-width: 500px) {
    .ui-block-solo { flex-direction: column; }
    #logo { position: static; }
}

Now see how it looks in Chrome: enter image description here Now see how it looks in Mozilla: enter image description here

See how the logo falls goes out of the header? How to fix this?

Mozilla version: 40.0.3. However, one of my users spotted the issue, but I do not know the version of his Mozilla.

Community
  • 1
  • 1
gsamaras
  • 71,951
  • 46
  • 188
  • 305

2 Answers2

2

This may not be as concise and technical of an answer as you'd like, but this is undoubtedly caused in differences between Chrome & Firefox' rendering engines.

If you're looking for a quick fix, I'd recommend setting #logo { top: 0; }. This seems to solve the problem in FF without compromising its appearance in Chrome.

David Lerner
  • 661
  • 3
  • 15
1

It's all due to the position: flex; on the parent of #logo, which is rendered differently in almost every browser. That, and the fact that you do not have any rules regarding the vertical positioning of #logo.

If, for example, you add

top: 50%;
transform: translateY(-50%);

to your #logo, most browsers will center it vertically inside the first parent with position: relative.

tao
  • 82,996
  • 16
  • 114
  • 150
  • 2
    I'd stick with Andrei's answer, too, as it's unlikely you really wanted the #logo to be absolutely positioned on top. However, that said, setting top in general is your way to go – David Lerner Sep 14 '15 at 23:47
  • I decided to accept David's answer, despite his honesty, because in a mobile, the logo gets cut off with Andrei's solution on the top, while with David's it's perfect. – gsamaras Sep 15 '15 at 13:31
  • In the fiddle you posted I see your `#logo` is positioned `static` on narrow devices. So basically, my solution doesn't even apply. You just have to add `margin-top: 10px` in the `@media (max-width: 500px) {#logo{}}`. I personally never use `position: static`, but that's just me. – tao Sep 15 '15 at 16:03
  • Anyway, basically both solutions fix the same thing (your code was lacking): the vertical positioning. They are both technically correct. – tao Sep 15 '15 at 16:04