Why does my site have a bottom scrollbar?

Why does my site have a bottom scrollbar?

Brunhilda 28 Nov 2009 23:27

http://istorijska-biblioteka.wikidot.com/

Today it was all well. Now I noticed it has a scroll bar. Here's my CSS, although I haven't touched it today.

+Show Code

/* TABS */

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color:#877E3D;

}

.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border-color: #877E3D;
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
    background:#877E3D repeat-x left -1400px; /* selected tab background */
    color:WHITE;
}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background:#877E3D repeat-x left -1300px;
}

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: #877E3D;
}

#breadcrumbs{
font-size:80%

}

#main-content {
margin:0 0 0 14em;
padding: 0.5ex 1em 1em 1.5em;
border-left: 0px solid rgb(216,210,195);
}

#main-content p {
    padding-top:1px;
}

p {
    margin-top: 15px;
}

#content-wrap {
background-color: white;
}

#side-bar {
    background-color: #D8DABE;
}

#side-bar {
    border: 5px double #877E3D;
    width: 12em
}

#side-bar {
    margin:0.4em 0 0 0.1em;
}

#side-bar a {
        color:#877E3D;
        text-decoration:none;
}

#side bar a hover {
    color: red;
}

#side-bar ul li a{
    display:block;
    padding: 2px 2px;
}

body {
background-color:#F5F5F5;
font-weight:normal;
color: #D2F4C;
}

a:link, a:visited {
color: #877E3D;
text-decoration: none;

}

a.newpage {
color: red;
text-decoration: none;
}

#page-title{
color: #877E3D;
font-size: 220%;
font-weight:bold;
}

#page-content table.ignore,
#page-content .ignore table {
    width: 100%;
}

#page-content {
    width: 100%;
    text-align: justify;
    font-size:107%;

}

blockquote {
    border:none;
    border-left: 1px solid #B82619;
    padding: 0 1em;
    color: black;
    background-color: white;
    font-size: 122%;
    font-family: "Times New Roman", serif;
    font-style:italic;
text-align: justify;
}

#header {
    background-color:black;
    background-image: url(http://istorijska-biblioteka.wdfiles.com/local--files/start/CDR-header-black5.png);
    height:8.3em;
    padding-bottom:50px;
    background-repeat: no-repeat;
}

#header h1 {
    padding: 0em 0em 0em 3em;
}

#header h1 a span{
    display: none;
}
#header h1 a {
        display: block;
        width: 1300px;
        height: 50px;
        padding: 0;
}

#search-top-box {
display: none;
}

.footnotes-footer{
    margin: 0; padding: 0.5em 0;
    /*border-top: 1px solid #CCC;*/
    height: 1%;
font-size: 90%;
}

.bibitems{
    margin: 0; padding: 0.5em 0;
    /*border-top: 1px solid #CCC;*/
font-size: 90%;
}

#toc{
    margin: 0em 0 0em 0;
    padding: 0em 0.0em;
    border: 0px;
    background-color: transparent;
        font-style: italic;
        font-size: 90%;
    display: table;

}

.tocdiv {
    margin: 0em 0 0em 0;
    padding: 0em 0.5em;
    border: 0px;
    background-color: transparent;
        font-style: italic;
        font-size: 100%;
    display: table;
        width:65%
}

#toc .title {
    font-weight: bold;
    margin: 0.2em 0  ;
    padding: 0 2em;
    text-align: left;
        color: #B82619
}

#toc #toc-action-bar{
    padding: 2px;
display: none;
}

#login-status{
right: 3em;
font-size:85%;
font-style:italic;
}

element.style {
margin-left:-10px;
padding-right:15px;
}

#navi-bar {
    background-color:black;
    background-image:none;
    border-bottom:2px solid black;
}

#top-bar li a {
padding: 1px 0.1em
}

#top-bar {
    right:4em;
}

 #top-bar {
border-top: 2px solid #877E3D;
border-bottom: 2px solid #877E3D;
}

#top-bar ul {
margin: 0 auto 0 16em;
width: auto
}

#top-bar li ul li a{
background-color: #877E3D;
font-size: 85%;
font-weight: lighter;
border: 0px solid #EEE;
width: auto
}

.image-container {
       padding-top: 0.5em;
       padding-right: 0.5em;
       padding-bottom: 0.5em;
       padding-left: 0.5em;

}

.changes-list-item .mod-date {
text-align: right;
width: 15em;

}

img.hover-full:hover {
    width: auto;
    max-width: 600px;
    position: relative;
}

---

Vir bonus miser vocari, at esse non potest miser.

Last edited on 29 Nov 2009 00:12 by RobElliott + Show more

Re: Why does my site have a bottom scrollbar?

Ed Johnson 29 Nov 2009 00:38

#header h1 a {
        display: block;
        width: 1300px;
        height: 50px;
        padding: 0;
}

It's the width in this section. I think you can remove it or make it narrower and the side scrolling will go away.

-Ed

---

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

Last edited on 29 Nov 2009 00:38 by Ed Johnson + Show more

Re: Why does my site have a bottom scrollbar?

RobElliott 29 Nov 2009 00:38

It seems to me that the problem is caused by the #header h1 a which has a property of width:1300px. If the browser window width is less than that the horizontal scrollbar appears. I would just remove the width property completely.

---

I put the codeblock in a collapsible block. You do that as follows:

[[collapsible show="+Show Code" hide="-Hide Code"]]
[[code]]
…
[[/code]]
[[/collapsible]]

---

Rob Elliott - Strathpeffer, Scotland - member of the Wikidot first line support team.
Strathview ~ Wikidot-based wikis, websites & intranets and online database development
community groups, villages, charities, business and government.

Re: Why does my site have a bottom scrollbar?

Brunhilda 29 Nov 2009 11:23

Thank you, Ed, Thank you Rob…

Now it looks much better… :)

---

Vir bonus miser vocari, at esse non potest miser.