Home/ Questions/Q 6102119
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T13:34:39+00:00

I’ve run into a problem with Webkit browsers (Chrome/Safari), CSS3 Media Queries, display and

  • 0

I’ve run into a problem with Webkit browsers (Chrome/Safari), CSS3 Media Queries, display and float on my site. The default styling on my webpage is to float the element nav to the right and display:inline-block. When the window is resized to mobile size, Media Queries restyles it to: float:none; display:block. The problem arises when the browser is sized back up to normal: the navigation element appears dropped down about the amount of its height. Here’s some pictures and markup:

Window Normal and Site Displayed Correctly:
Window Normal and Site Displayed Correctly:

Window Mobile Sized, Site Displayed Correctly:
Window Mobile Sized, Site Displayed Correctly

Window Sized Back To Normal, Site Displayed Incorrectly:
enter image description here

Here’s the normal styling for nav (and yes I’m going to move the IE7 stuff into a separate stylesheet…)

nav {
    text-align:center;
    float:right;
    display:inline-block;
    *display:inline;
    zoom:1;
    margin-top:30px;
    *margin-top:-70px;
}

Here’s the media query that restyles nav:

@media screen and (max-width:480px) 
{   
     header nav 
     {
         margin:0;
         float:none;
         display:block;
     }
}

So, is this a Webkit bug, or expected behavior? Am I doing something wrong, or is Webkit? If it is a bug, anybody know any good workarounds? The live site is here, let me know if I need to provide anymore info. Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I reduced it down to this: http://jsbin.com/opawal/

    • Start with the window wider than 480px.
    • Make it smaller than 480px.
    • Make it larger than 480px.
    • The “jump” has happened – to make it obvious, hit F5.

    It’s a bug.

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {
    display: inline-block;
}
nav {
    float: right;
}
@media screen and (max-width:480px) {
    nav {
        float: none;
    }
}
</style>
</head>
<body>
<h2>h2 element</h2>
<nav>nav element</nav>
</body>
</html>
    • 0