html - CSS div changes position on specific pages -
i'm having strange css problem main div container on website shifts right when visit pages. happens though there no specific css rule move it
i've uploaded temp version of site here: http://myawesometestsite.ddns.net/
when go publications , contact page entire container shifts right few pixels. position appears correct , unshifted on other pages
this full css i'm using:
body { background-color: #dcd8cf; font-family: raleway, arial, sans-serif; font-size: 1em; } h1 { font-size: 1.5em; color: #832c00; margin-bottom: 30px; } h2 { font-size: 1.2em; color: #832c00; margin-top: 30px; } h3 { font-size: 1em; margin-bottom: 5px; margin-top: 20px; } h4 { font-size: 1em; font-style: italic; margin-top: 0px; margin-left: 10px; margin-bottom: 5px; } .container { position: relative; left: 50%; margin-left: -470px; width: 940px; border: 1px solid black; } /* header */ header { position: relative; display: inline-block; width: 100%; height: 180px; background-color: #a63700; } header h1 { position: absolute; font-size: 2.5em; color: #e6e6dc; top: 50px; left: 100px; margin: 0px; } header h2 { position: absolute; font-size: 0.77em; color: #e6e6dc; top: 100px; left: 100px; margin: 0px; opacity: 0.7; } header img { border: 2px solid #e6e6dc; border-radius: 50%; max-width: 100%; max-height: 100%; } .profileimage { display: block; margin-left: auto; margin-right: auto; margin-top: 10px; max-width: 150px; max-height: 150px; } .skillicons { position: absolute; right: 25px; top: 15px; } .skillicons img { display: inline; width: 75px; height: 75px; padding: 5px; margin: 15px; opacity: 0.7; } /* navigation menu */ nav { position: relative; z-index: 1; text-align: center; letter-spacing: 2px; background-color: #a63700; height: 50px; width: 100%; } nav { position: relative; top: 20px; color: #d1d1c9; text-decoration: none; padding: 0 30px; } nav a:hover { border-bottom: solid 1px #e6e6dc; padding-bottom: 3px; } .navselected { text-shadow:0px 0px 1px white; color: white; } /* main content */ main { position: relative; background-color: white; padding: 10px; } /* footer */ footer { position: relative; color: #e6e6dc; background-color: #a63700; font-size: 10pt; padding: 10px; } .leftfooter ul { padding-left: 0px; } .leftfooter li { display: inline; list-style-type: none; } .leftfooter li { color: #e6e6dc; text-decoration: none; } .leftfooter li + li:before { color: #e6e6dc; content: "|"; padding: 10px; } .rightfooter { position: absolute; right: 10px; top: 4px; } .rightfooter img { display: inline; max-width: 30px; max-height: 30px; vertical-align: middle; margin-top: -3px; } .copyright { font-size: 1em; } /* home page */ /* publications page */ .hangingindent { padding-left: 1.5em; text-indent:-1.5em; } .publications h2 { margin-top: 50px; } /* code page */ .codeprojects { color: #a63700; text-decoration: none; } .codeprojects a:hover { text-decoration: underline; } .codeprojects p { margin-left: 10px; } /* cv page */ .cvcontainer { width: 90%; margin: 0 auto; } .cventry { margin-bottom: 30px; margin-left: 20px; margin-right: 20px; } .sectionheading { width: 100%; border-bottom: 1px solid #000; } .alignleft { display: block; float: left; text-align: left; width: 80%; margin-top: 10px; } .alignleft p { font-size: 1em; } .alignleftsub { margin-top: -10px; margin-left: 20px; } .alignright { display: block; float: right; text-align: right; width: 20%; margin-top: 10px; } .clear { clear: both; } /* contact page */ .contactinfo { margin-left: 20px; } .contactinfo img { display: inline; max-width: 30px; max-height: 30px; vertical-align: middle; } .emailhidden { display: none; } .contactinfo { margin-left: 5px; color: #a63700; text-decoration: none; } .contactinfo #emailaddress { margin-left: 2px; } .contactinfo #emailaddress { margin-left: 8px; } /* media queries */ @media screen , (max-width : 940px) { .container { position: relative; left: 0px; margin: 0px; width: 100%; } header h1 { left: 5%; margin: 0px; } header h2 { left: 5%; margin: 0px; } .skillicons img { max-width: 70px; max-height: 70px; margin-left: 5px; margin-right: 0px; } } @media screen , (max-width : 800px) { header h1 { display: none; } header h2 { display: none; } .skillicons img { display: none; } nav { height: 150px; } nav { display: block; } nav a:hover { border-bottom: none; padding-bottom: 0px; } } @media screen , (max-width : 600px) { .rightfooter { position: relative; display: block; margin-left: 10px; } }
i don't believe there's in here that's causing container shift 2 pages maybe i'm missing something. have idea whats causing this?
add "overflow-y: scroll;" "body" selector. should in css:
body { background-color: #dcd8cf; font-family: raleway, arial, sans-serif; font-size: 1em; overflow-y: scroll; }
Comments
Post a Comment