Geek asks and answers

Layout is reset when zoomed

I made a fixed layout and it works great on all browsers. But with an increase of at least one scroll of the wheel (90%), the elements of the second navigation (# header-navigation) break into more lines and push the elements out of their places. I tried to set the font size, padding and margin using em and%, but nothing good. If I do overflow: hidden for # header-navigation, I can zoom out to 50% without any problems. This is quite enough for me, but hiding is not an option.

You can see it here: http://palivonas.lt/test/stackoverflow/

EDIT: it works with Chrome and IE9 (thanks @GGG), but Firefox still pushes the #social box, although the line no longer breaks in navigation.

+3
source share
1 answer

Here's the fix.

Change the property of the list displayto inline-blockand delete float.

#header-navigation li {

    background: url(images/slash_header.png) right no-repeat;
    padding-right: 26px;
    margin-right: 19px;
    display: inline-block;

}

Add white-space: nowrapto the ordered list containing the navigation.

ol, ul {

    list-style: none;
    white-space: nowrap;

}
+1
source

More articles:


All Articles