PDA

View Full Version : please stop my horizontal scrollbar



cadillandy
08-24-2005, 03:26 PM
Hi, I have an annoying horizontal scrollbar appearing on all my pages in all the main browsers. It seems that the page is wider than I have specified when narrowing the browser window. What I need is to completely remove this scrollbar and the annoying extra width. Can anyone help?

Example page:
http://www.scholastic.co.uk/bookfairs/boost-your-book-fair/boost-your-book-fair.htm

Here's my CSS:
html, body {height:100%;}
body {
padding:0;
margin:0;
color: #000000;
background-image: url(../images/bg-blue.jpg);
background-repeat:repeat-x;
}
#outer{
height:100%;
min-height:100%;
margin-left:200px;
margin-right:200px;
margin-bottom:-100px;
color: #000000;
}
html>body #outer{height:auto;}
#header{
border-top:1px solid #fff;
color: #000;
text-align:left;
position:relative;
margin:0 -201px;
padding-top:0px;
}
* html #header{height:56px;he\ight:10px}
#left {
position:relative;
width:200px;
float:left;
margin-left:-199px;
padding-top:12px;
left:-2px;
margin-right:-1px;
}
#left p {padding-left:2px;padding-right:2px}
#right p {padding-left:2px;padding-right:2px}
#right {
position:relative;
width:200px;
float:right;
margin-right:-199px;
padding-top:12px;
left:2px;
margin-left:-1px;
margin-bottom:95px;
}
* html #left {padding-bottom:65px ;margin-right:-3px;}/*3px jog */
* html #right{margin-left:-3px; left:4px;
}
#footer {
padding: 10px 0 0 0;
clear:both;
height:65px;
background-image:url(../images/footerbackground.jpg);
background-repeat:repeat-x;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {
\height:65px;
he\ight:65px;
}
#clearfooter{clear:both;height:95px;}
div,p {margin-top:0}
* html #maincontent {height:1%;margin-bottom:12px}
#maincontent {position:relative;width:98%;float:left;}
#logo {
float:left;
display:inline;
margin: 16px 0px 0px 10px;
width: 214px;
height: 26px;
voice-family: "\"}\"";
voice-family: inherit;
width:214px;
height: 26px;
}
html#logo {
width: 214px;
height: 26px;
}
#navcontainertop {
margin: -41px 0 -2px 330px;
padding: 10px 0 0 0;
width: 330px;
clear:both;
text-align:left;
background-image:url(../images/navigation/capt-underpants.gif);
background-position:right;
background-repeat:no-repeat;
}
#navcontainertop img {display:inline;}
#navlist
{
width:640px;
clear:both;
margin: 0px 0px 0px 165px;
padding: 0px 0px 0px 90px;
voice-family: "\"}\"";
voice-family: inherit;
width:720px;
}
html#navlist {
width: 720px;
}
#navlist li
{
height:21px;
padding: 3px 2px 0px 16px;
margin: -1px;
display:inline;
line-height:27px;
background-repeat:no-repeat;
background-image: url(../images/navigation/tabbginbetween.jpg);
voice-family: "\"}\"";
voice-family: inherit;
padding: 7px 2px 5px 16px;
}
#navlist li a
{
padding: 0px 0px 0px 3px;
text-decoration: none;
font-weight:bold;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist a
{
padding: 0px 0px 0px 3px;
text-decoration: none;
font-weight:bold;
}
#navlist li a:hover
{
color:#8CA5C4;
}
li#activated
{
background-image:url(../images/navigation/tabbgwhiteinbetween.jpg);
}
li#afteractive
{
background-image:url(../images/navigation/tabbgwhiteinbetween2.jpg);
}
#navlist li a#current
{
color:#83B2FA;
}
li#start
{
background-image: url(../images/navigation/tabbgleft.jpg);
}
li#startactive
{
background-image: url(../images/navigation/tabbgleftactive.jpg);
}
li#end
{
background-image: url(../images/navigation/tabbgright.jpg);
}
li#endactive
{
background-image: url(../images/navigation/tabbgright2.jpg);
}
#navlistsub {
clear:left;
width: 810px;
margin: 0px 0px 0px 0px;
padding: 6px 0px 0px 202px;
background-image:url(../images/bookfairs-main-title.gif);
background-repeat:no-repeat;
voice-family: "\"}\"";
voice-family: inherit;
width:700px;
}
html#navlist {
width: 700px;
}
#navlistsub li
{
height:27px;
padding: 0px 2px 5px 16px;
margin: -1px;
display:inline;
line-height:27px;
background-repeat:no-repeat;
background-image:url(../images/navigation/inactivesub-blue.gif);
voice-family: "\"}\"";
voice-family: inherit;
padding: 6px 2px 7px 16px;
}
#navlistsub li a
{
margin: 0px;
padding: 0px 0px 0px 3px;
text-decoration: none;
font-weight:bold;
}
#navlistsub a
{
padding: 0px 0px 0px 3px;
text-decoration: none;
font-weight:bold;
}
#navlistsub li a:link { color:#000000; }
#navlistsub li a:visited { color: #000000; }
#navlistsub li a:hover
{
color:#FFFFFF;
}
li#activesub
{
background-image:url(../images/navigation/activesub-dblue.gif);
}
li#afteractivesub
{
background-image:url(../images/navigation/afteractivesub-blue.gif);
}
#navlistsub li a#currentsub
{
color:#ffffff;
}
li#startsub
{
background-image: url(../images/navigation/start-inactivesub-blue.gif);
}
li#startactivesub
{
background-image: url(../images/navigation/start-activesub-dblue.gif);
}
li#endsub
{
background-image: url(../images/navigation/end-inactivesub-blue.gif);
width:60px;
}
li#endactivesub
{
background-image: url(../images/navigation/end-activesub-dblue.gif);
width:60px;
}

Thanks in anticipation.

jenr
08-25-2005, 04:36 PM
cadillandy: Check your widths. With a quick glance, it looks like your width in pixels exceeds the original size (starts out like 200, and a banner goes to 301).

I will look closer at it when I have more time. I am heading out the door to work! Hope I helped....

JenR

Twey
08-25-2005, 04:47 PM
Avoid using absolute px values.

cadillandy
08-31-2005, 11:10 AM
Thanks JenR, I reviewed all my widths, and after hours of trial and error, I've managed to remove the horizontal scrollbar on all browsers without compromising my design.

Cheers.

adanker
06-08-2006, 05:33 AM
cadillandy: Check your widths. With a quick glance, it looks like your width in pixels exceeds the original size (starts out like 200, and a banner goes to 301)....

This would not apply for someone with only text would it, this has not absolute width setting?

If so how does one just tell the scrollbars-left-visble:false; or something like that ??

-Aaron