CODEWITHSUNDEEP
htmlcssjquery-mobilecss-position
gsamaras
gsamaras

Reputation: 73366

Logo is falling of header in Mozilla

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.

Upvotes: 0

Views: 45

Answers (2)

tao
tao

Reputation: 90038

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.

Upvotes: 1

David Lerner
David Lerner

Reputation: 651

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.

Upvotes: 2

Related Questions