CODEWITHSUNDEEP
phphtmlcss
gtr123
gtr123

Reputation: 318

Why don't I have a scroll bar?

I'm making a website in HTML, CSS, and PHP and the page goes way beyond the screen but there is no scroll bar provided by the browser (Safari 5.0.6 and Firefox 14.0.1 on Mac). Is it because I included the PHP? But shouldn't that be there before the page is rendered?

Here is a link: test website

My PHP syntax:

<div id="content">
        <div class="wrapper">
            <div id="home" class="alert">
                Welcome to always4free&copy;! To browse the classifieds, you must first either choose a location or have your location detected.
            </div>
            <?php include "res/pages/categories.php"; ?>
        </div>
    </div>
</div>

What is going on?

EDIT: Here is my CSS:

    body {
    background-image: url("http://always4free.org/site/images/bg.jpg");
    background-size: cover;
    font-family: "Mouse Memoirs",sans-serif;
}
.wrapper {
    margin: 0 auto;
    width: 850px;
}
#header {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    border-bottom: 3px solid green;
    box-shadow: 0 2px 10px #888888;
    height: 50px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
#logo {
    color: rgba(255, 255, 255, 0.7);
    float: left;
    font-family: "Wendy One",sans-serif;
    font-size: 30px;
    line-height: 50px;
    width: 250px;
}
#logo a:hover {
    color: #FFFFFF;
}
#nav {
    float: right;
    line-height: 50px;
    width: 600px;
}
#nav a:first-child {
    margin-left: 0;
}
#nav a:last-child {
    margin-right: 0;
}
#nav a:link, #nav a:visited {
    color: rgba(255, 255, 255, 0.9);
    font-family: "Mouse Memoirs",sans-serif;
    letter-spacing: 1px;
    margin-left: 10px;
    margin-right: 10px;
}
#nav a:hover {
    border-bottom: 2px solid #FFFFFF;
    color: #FFFFFF;
    padding-bottom: 1px;
}
#nav a.detect {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px 2px 2px 2px;
    color: rgba(0, 0, 0, 0.7);
    padding: 5px;
}
#nav a.detect:hover {
    color: #000000;
}
#content {
    font-family: "Mouse Memoirs",sans-serif;
    letter-spacing: 1px;
    margin-top: 70px;
}
.page {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    border: 1px solid green;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px;
}
.alert {
    background: none repeat scroll 0 0 #AD2E1D;
    border: 1px solid #911E0F;
    color: white;
    font-size: 20px;
    padding: 10px;
    text-align: center;
}
#categories {
    margin-top: 20px;
}
#categories h2 {
    color: rgba(255, 255, 255, 0.7);
    font-family: "Wendy One",sans-serif;
    font-size: 26px;
}
#categories a:link, #categories a:visited {
    background: none repeat scroll 0 0 white;
    color: black;
    padding: 3px;
}
#categories .block {
    line-height: 35px;
}

Upvotes: 8

Views: 464

Answers (4)

nikitakd
nikitakd

Reputation: 1

add overflow: scroll; in your #header style and change position to relative.

#header {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    border-bottom: 3px solid green;
    box-shadow: 0 2px 10px #888888;
    height: 50px;
    left: 0;
    position: **relative**;
    top: 0;
    width: 100%;
    **overflow: scroll;**
}

Upvotes: 0

m90
m90

Reputation: 11822

You have all of your content wrapped inside an element of position: fixed;. The body is not able to retrieve the height of fixed or absolute children and is therefore set to an actual height of 0 - thus eliminating any need for scrolling.

If you move your #content element outside of the fixed header things should be working as expected.

Upvotes: 3

prium
prium

Reputation: 167

Add a clearfix class with your .wrapper so that it have a height and then use:

.wrapper{
    overflow: scroll;
}

Upvotes: 0

Rikesh
Rikesh

Reputation: 26441

Move your div with id content outside of your header div.

It will solve your problem.

Upvotes: 0

Related Questions