Unwanted Horizontal Scrollbar and a FF problem

Unwanted Horizontal Scrollbar and a FF problem (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

BeTheBall -> Unwanted Horizontal Scrollbar and a FF problem (11/14/2008 17:53:50)

See the following:

http://duanethomas.net/itla/template-test.htm

I am wondering why I am getting a horizontal scrollbar. It is there in all of the following browsers (FF, IE7, IE6 and Opera).

Also, you will see my horizontal menu appears a bit higher on the page in FF.

Here is the code for the stylesheet:

body {
 background: #000 url('../images/bg-green3.jpg') repeat-x;
 color: #000;
 font-size:0.7em; 
 font-family:Arial, sans-serif;
 margin:0px;
 padding:0px;
}

table {border:1px solid #000000;border-collapse:collapse;}
th {color:#000000;background-color:#66CC66;padding:5px;border:1px solid #000000;white-space:nowrap;}
td {padding:5px;border:1px solid #000000;}
.fixedWidth {width:700px;}

a { color:#339900; background: inherit; text-decoration:none }
a:hover { color: #647B6D; background: inherit; text-decoration:none}

.underlinedLink a { color:#339900; background: inherit; text-decoration:underline;}
.underlinedLink a:hover { color: #647B6D; text-decoration:underline;}

.bold {font-weight:bold;}

h1 { font: bold 2em Arial, Sans-Serif; }
h2 { font: normal 1.6em Arial, Sans-Serif; letter-spacing: -1px; }
h1 a { color: #46574D; background: inherit; }
h1 a, h2 a { text-decoration: none; }
h1 a:hover, h2 a:hover { color: #BFE1ED; background: inherit; }
h3 { font: 110% Arial, Sans-Serif; color: #46574D; font-weight:bold; }
p {	margin: 0 0 0px 0; line-height: 1.5em; }
form { margin: 0; }

.content { margin: 0; padding: 0px; color: #000; }
.header { color: #000; width: 100%; margin: 0px 0px 0px 20px;}
.header .leftside {	width: 500px; float: left;}

.header h1 {
	color: #FFF;
	font: bold 18pt Arial, sans-serif;
	margin-bottom:0px;
}

.header h2 {
	margin-top:0px;
	margin-bottom:0px;
	color:#66CC66;
	font: bold 16pt Arial, sans-serif;
}

.header .searchf {
	float: right;
	margin-right: 15px;
	clear: both;
	margin-top: 35px;
}

.searchpad { padding-top: 15px; }

#navDiv {text-align:center;clear:both;}
ul#nav
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

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

#navlist a { padding: 3px 10px; }

#nav a, #nav a:visited {
  padding:4px 16px;
  color:#66CC66; 
  text-decoration:none;
  font-size:12pt;
  font-weight:bold;
  }

#nav a:hover {
  color:#fff; 
  }
  
.center {text-align:center;}

.borderedImg {border:solid 1px #000;}

.imgd {
	border: 1px solid #ccc;
	padding: 5px;
	
}

.main_content {
	margin: 0 ;
	width: 100%;
	float:left;
}

.sd_left {
	float:left;
	color: #000;
	margin: 0;
	padding: 10px 0px 0px 10px;
	font: 11pt arial, helvetica, verdana, sans-serif;
}	

.sd_right {
 	background: #fff url('../images/back_white.jpg');
	color: #000;
	font-size:1.2em; 
	font-family:arial, helvetica, verdana, sans-serif; 
	margin-left:192px;
}	
.sd_right p {margin-bottom:10px;}

.rightContent {
  padding: 0px 20px 10px 10px;
  min-height: 500px;
  height: auto;
  _height: 500px;
}
	
.sd_left h2 {font-size:14pt;text-align:center;color: #66CC66;}


.sd_right h1 {font-size:1.5em;padding: 10px 0px 10px 0px}
.sd_right h2 {font-size:1.45em;padding: 10px 0px 10px 0px}
.sd_right h3 {font-size:1.4em;padding: 10px 0px 10px 0px}
.sd_right h4 {font-size:1.35em;padding: 10px 0px 10px 0px}
.sd_right h5 {font-size:1.3em;padding: 10px 0px 10px 0px}

.text_padding {
	padding: 15px 0 0 0;
}

.main_content h2 {
	padding: 5px 0 5px 0;
	font: bold 1.6em Arial, sans-serif;
}

.footer { 
	background: #000 url('../images/footer-green.jpg') repeat-x top;
	width: 100%;
	color:#eee;  
	text-align:center; 
	clear:both;
	font-style:normal; font-variant:normal; font-weight:normal; font-size:1.3em; font-family:arial, helvetica, verdana, sans-serif
}
.footer .padding { padding: 25px 70px 25px 70px; }
.footer a { color:#66CC66; text-decoration: none;}
.footer a:hover { color:#66CC66; text-decoration: underline; }

 #divStayTopLeft {position:absolute;width:170px;}
 #divStayTopLeft a{color:#FFFFFF;text-decoration:none}
 #divStayTopLeft a:hover{color:#009900;text-decoration:none}
 #divStayTopLeft h2 {text-align:center;color: #66CC66;}
 #divStayTopLeft {margin: 0;padding: 0px 0px 0px 0px;font: 1.2em arial, helvetica, verdana, sans-serif;}

.highlight {background-color:#FFFF00;}

Any suggestions on how to fix these two issues?

treetopsranch -> RE: Unwanted Horizontal Scrollbar and a FF problem (11/14/2008 20:37:18)
No horizontal scroll fo me using FF but a little scroll using IE 6. Could it be that one of you graphics is too wide. But that really doesn't sense either as I think you are using small graphics and repeating them, right?

treetopsranch -> RE: Unwanted Horizontal Scrollbar and a FF problem (11/14/2008 20:43:58)
I also get these 3 errors. Not sure if any of them cause the horizontal scroll but you might want to try to fix them and check it out again. 116 .sd_right Value Error : clear attempt to find a semi-colon before the property name. add it 116 .sd_right Parse Error 124 .rightContent Property _height doesn't exist : 500px

Tailslide -> RE: Unwanted Horizontal Scrollbar and a FF problem (11/15/2008 2:39:10)
Hi Duane - did you fix it? No scrollbar in any browser for me. As far as differences in positioning - I always start stylesheets off with a set of reset rules - this removes all the standard margins and paddings and introduces a few to standardise across browsers. Mine currently looks like this: /************** Style Resets ********************/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0; padding:0;} h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,address {margin:1em 0;} li, dd, blockquote {margin-left:1em;} html, body, fieldset {font:100.1%/120% Arial, Helvetica, sans-serif;} input, select, textarea {font-size:100.1%;} h1, h2, h3, h4, h5, h6 {font-size:100%;} form label{cursor:pointer;} fieldset, img{border:none;} table{border-collapse:collapse; border-spacing:0;} ul li {list-style-type:square;} hr {height: 1px; background-color: #E5E5E5; color: #E5E5E5; border: none; padding: 0; margin: 1em 1em;} Now the problem with the main content area looking lower down in Firefox is to do with the top margin default for headings in Firefox as opposed to IE - so with the above resets, you would at least get the same top-margin across all of them (which obviously you can overrule later on if required).

BeTheBall -> RE: Unwanted Horizontal Scrollbar and a FF problem (11/15/2008 8:45:54)
Thanks Don, Helena. The only way I was able to get rid of the scrollbars was to insert the following: html {overflow:hidden;} Should I have to do that? The style resets will be an absolute lifesaver. I made the discovery that it was the lack of a padding: 0 that was causing a problem just 2 minutes before I logged in and read your post. These resets will make my life a lot easier. Thanks as always.

BeTheBall -> RE: Unwanted Horizontal Scrollbar and a FF problem (11/15/2008 9:04:50)
Scratch that. After resetting my margins and padding I was able to delete the overflow property and voila, no scrollbar. Thanks again.

Page: [1]

0.078125