html - Issue with position: fixed -
when size browser window width smaller 770px, .menu moves down expected, when size size bigger 770px, .menu not move again. problem seem occur in webkit based browsers. problem did not occur in firefox , ie.
how can fix problem when resize window width bigger 770px, .menu move again?
thank time.
link: http://multipop.co
html:
<!doctype html> <html lang="en"> <head> <title>multipop!</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/1140.css"> <meta charset="utf-8"> <meta name="keywords" content="phone, case, holder, car, vent, iphone, 4, 5, 6, galaxy, s2, s3, s4, s5, s6, samsung, apple"> <meta name="description" content="smartphone car holder , stand in 1 iphone or android!"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href='http://fonts.googleapis.com/css?family=open+sans:400,700' rel='stylesheet' type='text/css'> </head> <body> <div class="container12"> <div class="head"> <a href="#"><img class="logo"src="img/logo.png"></a> <div class="menu"> <ul> <li data-slide="1">what it?</li> <li data-slide="2">how?</li> <li data-slide="3">faq</li> <li><a class="buy" href="#"><p>buy now</p></a></li> </ul> </div> </div> <div class="headfix"></div> <div class="row"> <div class="column12"> "lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div> </div> <div class="footer"> <div class="column6"> hello </div> <div class="column6"> </div> </div> </div> </body> </html> 1140.css:
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%} /* -------------------- custom .head , .headfix class -------------------- */ .head { padding-bottom: 30px !important; position: fixed !important; border-bottom: 1px solid #9c9c9c; z-index: 3; background-color: #fff; } .headfix { height: 106px; padding-bottom: 25px; } .container12, .container16, .head, .headfix{ margin:0 auto; padding:0; position:relative; width:1140px; } .row {margin-bottom:20px;} .column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12, .column13, .column14, .column15, .column16 { display:inline; float:left; margin-left:10px; margin-right:10px; } .container12 .alpha, .container16 .alpha {margin-left:0;} .container12 .omega, .container16 .omega {margin-right:0;} .container12 .column1 {width:75px;} .container12 .column2 {width:170px;} .container12 .column3 {width:265px;} .container12 .column4 {width:360px;} .container12 .column5 {width:455px;} .container12 .column6 {width:550px;} .container12 .column7 {width:645px;} .container12 .column8 {width:740px;} .container12 .column9 {width:835px;} .container12 .column10 {width:930px;} .container12 .column11 {width:1025px;} .container12 .column12 {width:1120px;} .container12 .prefix1 {padding-left:95px;} .container12 .prefix2 {padding-left:190px;} .container12 .prefix3 {padding-left:285px;} .container12 .prefix4 {padding-left:380px;} .container12 .prefix5 {padding-left:475px;} .container12 .prefix6 {padding-left:570px;} .container12 .prefix7 {padding-left:665px;} .container12 .prefix8 {padding-left:760px;} .container12 .prefix9 {padding-left:855px;} .container12 .prefix10 {padding-left:950px;} .container12 .prefix11 {padding-left:1045px;} .container16 .column1 {width:51.25px;} .container16 .column2 {width:122.5px;} .container16 .column3 {width:193.75px;} .container16 .column4 {width:265px;} .container16 .column5 {width:336.25px;} .container16 .column6 {width:407.5px;} .container16 .column7 {width:478.75px;} .container16 .column8 {width:550px;} .container16 .column9 {width:621.25px;} .container16 .column10 {width:692.5px;} .container16 .column11 {width:763.75px;} .container16 .column12 {width:835px;} .container16 .column13 {width:906.25px;} .container16 .column14 {width:977.5px;} .container16 .column15 {width:1048.75px;} .container16 .column16 {width:1120px;} .container16 .prefix1 {padding-left:71.25px;} .container16 .prefix2 {padding-left:142.5px;} .container16 .prefix3 {padding-left:213.75px;} .container16 .prefix4 {padding-left:285px;} .container16 .prefix5 {padding-left:356.25px;} .container16 .prefix6 {padding-left:427.5px;} .container16 .prefix7 {padding-left:498.75px;} .container16 .prefix8 {padding-left:570px;} .container16 .prefix9 {padding-left:641.25px;} .container16 .prefix10 {padding-left:712.5px;} .container16 .prefix11 {padding-left:783.75px;} .container16 .prefix12 {padding-left:855px;} .container16 .prefix13 {padding-left:926.25px;} .container16 .prefix14 {padding-left:997.5px;} .container16 .prefix15 {padding-left:1068.75px;} @media screen , (min-width: 960px) , (max-width: 1160px) { .container12, .container16, .head {width:960px;} .container12 .column1 {width:60px;} .container12 .column2 {width:140px;} .container12 .column3 {width:220px;} .container12 .column4 {width:300px;} .container12 .column5 {width:380px;} .container12 .column6 {width:460px;} .container12 .column7 {width:540px;} .container12 .column8 {width:620px;} .container12 .column9 {width:700px;} .container12 .column10 {width:780px;} .container12 .column11 {width:860px;} .container12 .column12 {width:940px;} .container12 .prefix1 {padding-left:80px;} .container12 .prefix2 {padding-left:160px;} .container12 .prefix3 {padding-left:240px;} .container12 .prefix4 {padding-left:320px;} .container12 .prefix5 {padding-left:400px;} .container12 .prefix6 {padding-left:480px;} .container12 .prefix7 {padding-left:560px;} .container12 .prefix8 {padding-left:640px;} .container12 .prefix9 {padding-left:720px;} .container12 .prefix10 {padding-left:800px;} .container12 .prefix11 {padding-left:880px;} .container16 .column1 {width:40px;} .container16 .column2 {width:100px;} .container16 .column3 {width:160px;} .container16 .column4 {width:220px;} .container16 .column5 {width:280px;} .container16 .column6 {width:340px;} .container16 .column7 {width:400px;} .container16 .column8 {width:460px;} .container16 .column9 {width:520px;} .container16 .column10 {width:580px;} .container16 .column11 {width:640px;} .container16 .column12 {width:700px;} .container16 .column13 {width:760px;} .container16 .column14 {width:820px;} .container16 .column15 {width:880px;} .container16 .column16 {width:940px;} .container16 .prefix1 {padding-left:60px;} .container16 .prefix2 {padding-left:120px;} .container16 .prefix3 {padding-left:180px;} .container16 .prefix4 {padding-left:240px;} .container16 .prefix5 {padding-left:300px;} .container16 .prefix6 {padding-left:360px;} .container16 .prefix7 {padding-left:420px;} .container16 .prefix8 {padding-left:480px;} .container16 .prefix9 {padding-left:540px;} .container16 .prefix10 {padding-left:600px;} .container16 .prefix11 {padding-left:660px;} .container16 .prefix12 {padding-left:720px;} .container16 .prefix13 {padding-left:780px;} .container16 .prefix14 {padding-left:840px;} .container16 .prefix15 {padding-left:900px;} } @media screen , (min-width: 768px) , (max-width: 959px) { .container12, .container16, .head {width:768px;} .container12 .column1 {width:44px;} .container12 .column2 {width:108px;} .container12 .column3 {width:172px;} .container12 .column4 {width:236px;} .container12 .column5 {width:300px;} .container12 .column6 {width:364px;} .container12 .column7 {width:428px;} .container12 .column8 {width:492px;} .container12 .column9 {width:556px;} .container12 .column10 {width:620px;} .container12 .column11 {width:684px;} .container12 .column12 {width:748px;} .container12 .prefix1 {padding-left:64px;} .container12 .prefix2 {padding-left:128px;} .container12 .prefix3 {padding-left:192px;} .container12 .prefix4 {padding-left:256px;} .container12 .prefix5 {padding-left:320px;} .container12 .prefix6 {padding-left:384px;} .container12 .prefix7 {padding-left:448px;} .container12 .prefix8 {padding-left:512px;} .container12 .prefix9 {padding-left:576px;} .container12 .prefix10 {padding-left:640px;} .container12 .prefix11 {padding-left:704px;} .container16 .column1 {width:28px;} .container16 .column2 {width:76px;} .container16 .column3 {width:124px;} .container16 .column4 {width:172px;} .container16 .column5 {width:220px;} .container16 .column6 {width:268px;} .container16 .column7 {width:316px;} .container16 .column8 {width:364px;} .container16 .column9 {width:412px;} .container16 .column10 {width:460px;} .container16 .column11 {width:508px;} .container16 .column12 {width:556px;} .container16 .column13 {width:604px;} .container16 .column14 {width:652px;} .container16 .column15 {width:700px;} .container16 .column16 {width:748px;} .container16 .prefix1 {padding-left:48px;} .container16 .prefix2 {padding-left:96px;} .container16 .prefix3 {padding-left:144px;} .container16 .prefix4 {padding-left:192px;} .container16 .prefix5 {padding-left:240px;} .container16 .prefix6 {padding-left:288px;} .container16 .prefix7 {padding-left:336px;} .container16 .prefix8 {padding-left:384px;} .container16 .prefix9 {padding-left:432px;} .container16 .prefix10 {padding-left:480px;} .container16 .prefix11 {padding-left:528px;} .container16 .prefix12 {padding-left:576px;} .container16 .prefix13 {padding-left:624px;} .container16 .prefix14 {padding-left:672px;} .container16 .prefix15 {padding-left:720px;} } @media screen , (max-width: 767px) { .container12, .container16, .head {width:300px;} .container12 .column1, .container16 .column1, .container12 .column2, .container16 .column2, .container12 .column3, .container16 .column3, .container12 .column4, .container16 .column4, .container12 .column5, .container16 .column5, .container12 .column6, .container16 .column6, .container12 .column7, .container16 .column7, .container12 .column8, .container16 .column8, .container12 .column9, .container16 .column9, .container12 .column10, .container16 .column10, .container12 .column11, .container16 .column11, .container12 .column12, .container16 .column12, .container16 .column13, .container16 .column14, .container16 .column15, .container16 .column16, .head { margin:0 0 20px 0; width:300px; } .container12 .prefix1, .container12 .prefix2, .container12 .prefix3, .container12 .prefix4, .container12 .prefix5, .container12 .prefix6, .container12 .prefix7, .container12 .prefix8, .container12 .prefix9, .container12 .prefix10, .container12 .prefix11, .container16 .prefix1, .container16 .prefix2, .container16 .prefix3, .container16 .prefix4, .container16 .prefix5, .container16 .prefix6, .container16 .prefix7, .container16 .prefix8, .container16 .prefix9, .container16 .prefix10, .container16 .prefix11, .container16 .prefix12, .container16 .prefix13, .container16 .prefix14, .container16 .prefix15 {padding-left:0;} .row, .head {margin:0;} } @media screen , (min-width: 480px) , (max-width: 767px) { .container12, .container16, .head {width:420px;} .container12 .column1, .container16 .column1, .container12 .column2, .container16 .column2, .container12 .column3, .container16 .column3, .container12 .column4, .container16 .column4, .container12 .column5, .container16 .column5, .container12 .column6, .container16 .column6, .container12 .column7, .container16 .column7, .container12 .column8, .container16 .column8, .container12 .column9, .container16 .column9, .container12 .column10, .container16 .column10, .container12 .column11, .container16 .column11, .container12 .column12, .container16 .column12, .container16 .column13, .container16 .column14, .container16 .column15, .container16 .column16, .head { margin:0 0 20px 0; width:420px; } .container12 .prefix1, .container12 .prefix2, .container12 .prefix3, .container12 .prefix4, .container12 .prefix5, .container12 .prefix6, .container12 .prefix7, .container12 .prefix8, .container12 .prefix9, .container12 .prefix10, .container12 .prefix11, .container16 .prefix1, .container16 .prefix2, .container16 .prefix3, .container16 .prefix4, .container16 .prefix5, .container16 .prefix6, .container16 .prefix7, .container16 .prefix8, .container16 .prefix9, .container16 .prefix10, .container16 .prefix11, .container16 .prefix12, .container16 .prefix13, .container16 .prefix14, .container16 .prefix15 {padding-left:0;} .row, .head {margin:0;} } .clearfix:before, .clearfix:after, .row:before, .row:after, .container12:before, .container12:after, .container16:before, .container16:after { content:'.'; display:block; height:0; overflow:hidden; visibility:hidden; width:0; } /* http://sonspring.com/journal/clearing-floats */ .clear { clear:both; display:block; height:0; overflow:hidden; visibility:hidden; width:0; } .row:after, .clearfix:after, .container12:after, .container16:after {clear:both;} /* ie7. move separate file when notice problems */ .row, .clearfix {zoom: 1;} img, object, embed {max-width:100%;} img {height:auto;} style.css:
/* -------------------- basic styles -------------------- */ body { font-family: 'open sans'; } /* -------------------- heading -------------------- */ /* .head class in 1140.css */ .logo { padding-top: 30px; height: 40px; clear: both; } .menu { float: right; padding-top: 32px; clear: both; } .menu li { text-decoration: none; list-style-type: none; display: inline-block; padding-right: 20px; color: #616161; } .buy { background-color: #e5482e; border-radius: 10px; height: 40px; width: 100px; padding-top: -20px; text-decoration: none; color: #fff; text-align: center; display: block; } .buy:hover { background-color: #f25b41; } .buy:active { background-color: #f0725d; } .buy p { padding-top: 9px; } /* -------------------- footer -------------------- */ .footer { border-top: 1px solid #9c9c9c; padding-top: 25px; } /* -------------------- media queries -------------------- */ @media (max-width: 770px) { .menu { float: none; margin-left: auto; margin-right: auto; } }
unfortunately, seems issue chrome.
https://code.google.com/p/chromium/issues/detail?id=147449
you can see similar (but not exact) issue here: http://jsbin.com/ewuxiji/9 (this linked on chromium issues page @ bottom)
Comments
Post a Comment