Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS prevents scrolling
    text
    copied!<p>I'm working on a project for a friend, which involves making a website for his Real-estate company. The page is all done, with the content on it.. and there's sufficient content that I'd have to scroll down to read the whole page.</p> <p>When I add the link to the external CSS stylesheet to the header, the page gets the look that I want, but for some reason, the scroll-bars disappear (Chrome and Safari, Mac 10.8) and I can't scroll down to read the content at the bottom. Removing the link to the CSS brings back the scrollbar, but obviously the pages lose all their styling.</p> <p>I've attached a copy of the stylesheet, if anyone sees something that could cause this, help would be appreciated.</p> <pre><code>#wrapper { width: 1024px; margin: 0 auto; } body { background: #E4BD82 url("../img/bg.gif") repeat; font: normal 12px/150% "Verdana", "Arial", "Helvetica", sans-serif; color: #4b2b16; } body .text { font: normal 12px/150% "Verdana", "Arial", "Helvetica", sans-serif; } #header { margin-left:auto; margin-right:auto; top: 0px; width: 1024px; height: 150px; position:relative; background: url("../img/header.gif") bottom left no-repeat; } #menu { height: 42px; list-style: none; position: absolute; bottom: 5px; left: 90px; } #menu li { float: left; height: 42px; line-height: 42px; padding: 13px 20px; color: #D89915; font: bold 12px "Verdana", "Arial", "Helvetica", sans-serif; text-decoration: none; } #menu li a { padding: 13px 20px; color: #D89915; font: bold 12px "Verdana", "Arial", "Helvetica", sans-serif; text-decoration: none; } #menu li a:hover { background-color: #4D3406; color: #EAF6AD; } #sidebar { position:fixed; top: 151px; height: 100%; width: 290px; background: url("../img/sidebar.gif") top left repeat-y; } #main { width: 734px; margin-left: 300px; min-height: 1000px; position: fixed; } div, img, form, fieldset, ul, li, h1, h2, h3, h6, p { margin: 0; padding: 5; border: 0; } a.photo:link { font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; text-decoration: none; color: #4b2b16; } a.photo:visited { font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; text-decoration: none; color: #4b2b16; } a.photo:hover { font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; text-decoration: underline; color: #4b2b16; } a.photo:active { font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; text-decoration: none; color: #4b2b16; } .copyright { font: normal 8px/100% "Verdana", "Arial", "Helvetica", sans-serif; text-decoration: none; text-align: center; } img.display { margin-left: 150px; padding: 1px; border: 5px outset; border-color: #EE7621; } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload