...

View Full Version : Vertical + Horizontal Scoll bars on website, how to fix?



BlackReef
04-20-2011, 09:28 PM
Here is the URL to the website:

http://www.knifecityoutlet.com/store/pc/home.asp

I just added a simple counter (the client requested it) and now there are these vertical and horizontal scroll bars on the website, looks awful. I am pulling my hair out over here trying to fix - is it because the wrapper has no set width? Here is the current CSS:


a:link {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #FF0000;
font-weight: bold;
}
a:active {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}

body {
background-repeat: repeat-x;
background-position: center top;
margin: 0px;
background-image: url(../images/bg.jpg);
}

#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
position: relative;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
overflow: auto;
background-image: url(../images/bg1.jpg);

}

#smallsearchbox {
font-size: 11px;
color:#999999;
width: 210px;
padding:2px;
background:#fff;
border: 1px solid #999;
}
#wrapper #midbar #SearchBox {
height: 25px;
width: 300px;
position: absolute;
right: 0px;
top: 82px;
}

#smallsearchbox:focus {

}

#wrapper #header {
height: 80px;
background-color: #000000;
background-image: url(../images/headbg.jpg);
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #333;
border-left-color: #333;
}
#wrapper #header #logo {
float: left;
height: 80px;
width: 278px;
position: relative;
}
#wrapper #body {
width: 900px;
border-right-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #999;
border-left-color: #999;
border-left-width: 1px;
background-color: #FFFFFF;
}

#wrapper #footer {
height: 80px;
position: relative;
clear: both;
background-color: #600001;
background-repeat: no-repeat;
background-position: bottom;
width: 890px;
padding: 5px;
}
#wrapper #midbar {
height: 25px;
width: 900px;
background-image: url(../images/midbg.jpg);
}
#wrapper #body #main {
width: 720px;
top: 5px;
position: relative;
margin-right: auto;
margin-left: auto;
float: left;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#wrapper #midbar #navbar {
height: 15px;
width: 400px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
position: relative;
top: 5px;
left: 5px;
}
#wrapper #header #login {
height: 15px;
width: 450px;
position: absolute;
right: 5px;
top: 60px;
font-size: 11px;
color: #FFFFFF;
}


#wrapper #body #leftnav {
float: left;
width: 150px;
top: 5px;
position: relative;
padding: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
}

oesxyl
04-20-2011, 09:35 PM
Here is the URL to the website:

http://www.knifecityoutlet.com/store/pc/home.asp

I just added a simple counter (the client requested it) and now there are these vertical and horizontal scroll bars on the website, looks awful. I am pulling my hair out over here trying to fix - is it because the wrapper has no set width? Here is the current CSS:
try to remove overflow: auto



#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
position: relative;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
overflow: auto;
background-image: url(../images/bg1.jpg);

}


please, don't use quote to wrap code!!!

best regards

BlackReef
04-20-2011, 09:42 PM
try to remove overflow: auto



#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
position: relative;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
overflow: auto;
background-image: url(../images/bg1.jpg);

}


please, don't use quote to wrap code!!!

best regards

Wow thank you, that fixed it. Will not quote the code anymore.

Thank you very much, hope have a wonderful day

oesxyl
04-20-2011, 09:59 PM
Wow thank you, that fixed it. Will not quote the code anymore.

Thank you very much, hope have a wonderful day
you are welcome and thank you, :)

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum