5 replies [Last post]
mrbell
Offline
newbie
Last seen: 16 years 22 weeks ago
Timezone: GMT-6
Joined: 2005-08-20
Posts: 3
Points: 0

I managed to get this site up and running within one week, but there is an unwanted scrollbar at the bottom of every page. Can someone please check the floats and margins to catch something I apparently missed? Here is my stylesheet code:

body
{
	margin: 0;
	padding: 0;
	font: 85% arial, hevetica, sans-serif;
	text-align: center;
	color: #333;
	background-color: #eeeeee;
	background-image:  url(../images/backgrounds/background_gradient.jpg);
	
}

a:link { color: #B52C07; }
a:visited { color: #600; }
a:hover, a:active
{
	color: #fff;
	background-color: #B52C07;
}

h2
{
	color: #B52C07;
	font: 120% georgia, times, "times new roman", serif;
	font-weight: bold;
	margin: 0 0 2px 0;
}

/* Shadow for H2 only */
.shadow2 { position: relative; left: 3px; top: 3px; color: #eeeeee; }
.text2 { position: absolute; left: -3px; top: -3px; color: #B52C07;} 

h3
{
	color: #5B5E0E;
	font: 106% georgia, times, "times new roman", serif;
	font-weight: bold;
	margin-top: 0;
}

/* Shadow for H3 only */
.shadow3 { position: relative; left: 3px; top: 3px; color: #eeeeee; }
.text3 { position: absolute; left: -3px; top: -3px; color: #5B5E0E;} 

#container
{
	margin: 1em auto;
	width: 650px;
	text-align: left;
	background-color: #fff;
	border: 1px none #fff;
}

#container /* parent to #header div, #mainnav div, #menu div, #contents div, and #footer div */
{
	border: 1px solid #999999;
}

#header /* parent to #date div */
{
	clear:both;
	height: 45px;
	width: 100%;
	background-image:  url(../images/backgrounds/header.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	border-bottom: 1px solid #fff;
	position: relative;
	border: 1px none #fff;
	border-bottom: 1px solid #003399;
}

#date
{
	font: 85% verdana, arial, hevetica, sans-serif;
	color: #fff;
	position: absolute;
	left: 0;
	top: 15px;
	width: 645px;
	text-align: right;
}

#mainnav
{
	clear:both;
	background-image:  url(../images/backgrounds/menu.gif);
	background-position: 0 0;
	color: #003399;
	padding: 2px 0;
	margin-bottom: 22px;
	font-weight: bold;
}

#mainnav ul
{
	margin: 0 0 0 20px;
	padding: 0;
	list-style-type: none;
	border-left: 1px solid #999999;
}

#mainnav ul { list-style-type: none; }
#mainnav li { display: inline; }

#mainnav li
{
	display: inline;
	padding: 0 8px;
	border-right: 1px solid #999999;
}

#mainnav li a
{
	text-decoration: none;
	color: #003399;
}

#mainnav li a:hover, #mainnav li a:active
{
	text-decoration: underline;
	color: #BFCFFF;
	background-color: #003399;
}

#menu /* OPTIONAL: border-left: 1px solid #C5C877; */
{
	clear:both;
	float: right;
	width: 200px;
	padding-left: 15px;
	padding-right: 15px; /* total menu width is 230px, right? */
}

#menu ul
{
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	line-height: 165%;
}

#contents { margin: 0 245px 40px 20px; } /* right margin is total menu width of 230px + 15px */
#contents p { line-height: 165%; }
#contents-wp { margin: 0 20px 40px 20px;} /* wp = whole page */

.article /* OPTIONAL: border-bottom: 1px solid #C5C877; */
{ 
}

.article ul
{
	list-style-type: none;
	text-align: right;
	margin: 1em 0;
	padding: 0;
	font-size: 95%;
}

.article li
{
	display: inline;
	padding: 0 0 0 7px;
}

.imagefloat { float: right; }
.imagefloatL { float: left; }

.imagefloat
{
	padding: 2px;
	border: 1px solid #000000;
	margin: 0 0 10px 10px;
}

.imagefloatL
{
	padding: 2px;
	border: 1px solid #000000;
	margin: 0 10px 10px 0;
}

.img-shadow {
  float:right;
  background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
  background: url(../images/shadow.gif) no-repeat bottom right;
  margin: 10px 0 10px 10px !important;
  margin: 10px 0 10px 10px;
  }

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
  } 
  
.img-shadowL {
  float:left;
  background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
  background: url(../images/shadow.gif) no-repeat bottom right;
  margin: 10px 10px 10px 0 !important;
  margin: 10px 10px 10px 0;
  }

.img-shadowL img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
  } 

.p-shadow {
  width: 90%;
  float:left;
  background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
  background: url(../images/shadow.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
  }

.p-shadow div {
  background: none !important;
  background: url(../images/shadow2.gif) no-repeat left top;
  padding: 0 !important;
  padding: 0 6px 6px 0;
  }

.p-shadow p {
  color: #777;
  background-color: #fff;
  font: italic 1em georgia, serif;
  border: 1px solid #a9a9a9;
  padding: 4px;
  margin: -6px 6px 6px -6px !important;
  margin: 0;
  }

#footer
{
	clear: both;
	color: #999;
	text-align: right;
}

#footer
{
	background-image:  url(../images/backgrounds/footer.gif);
	background-position: 0 0;
	height: 20px;
	padding: 0 15px;
	font: 75% arial, hevetica, sans-serif;
}

Anonymous
Anonymous's picture
Guru

Re: Unwanted Bottom Scrollbar

A link would be simply divine.

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 51 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

Unwanted Bottom Scrollbar

Mr. Bell,

Welcome.

I am assuming the CSS file goes with http://www.genevalane.com/.

The vertical scrollbar does not show up in Firefox, but you might want to look at the "email directory," the listed text protrudes the box.

This is my big chance . . . yep, I blew it . . .

mrbell
Offline
newbie
Last seen: 16 years 22 weeks ago
Timezone: GMT-6
Joined: 2005-08-20
Posts: 3
Points: 0

http://www.genevalane.com

The URL is http://www.genevalane.com and shadow effect on the email directory has been removed.

I'm still getting the mysterious bottom scrollbar (horizontal) in Windows IE6.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 17 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Unwanted Bottom Scrollbar

I don't know, but it seems to me that you have no reason to be using a frameset. As far as I can see, you should be using a normal page with a normal doctype. I'm guessing that the seemingly-inexplicable scrollbar has got something to do with this.

mrbell
Offline
newbie
Last seen: 16 years 22 weeks ago
Timezone: GMT-6
Joined: 2005-08-20
Posts: 3
Points: 0

Frameset is DomainDirect.com's Domain Forwarding feature

I don't think I can change the frameset/doctype, because the site is set up with DomainDirect.com's Domain Forwarding feature and URLKeeper. This was a cheap way for me to launch a web site fast. Thanks for the insight - you're probably right! The pages look fine on my local browser, but then uploaded files have the mysterious bottom scrollbar. Weird, huh?