Menu
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 Mobile Sized, Site Displayed Correctly:
Window Sized Back To Normal, Site Displayed Incorrectly:
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.
292
I reduced it down to this: http://jsbin.com/opawal/
480px.480px.480px.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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
