Scrolling div partially visible in FF and SeaMonkey; perfect in IE

Dev Shed Forums Sponsor:

January 30th, 2013, 06:32 PM

NFPvolunteer

Registered User

Join Date: Jan 2013

Posts: 4

Time spent in forums: 1 h 8 m 47 sec
Reputation Power: 0

Scrolling div partially visible in FF and SeaMonkey; perfect in IE

Hello,

Thanks in advance for looking at this; really glad here has a community to turn to.

I am trying improve the functionment of a site that is supposed to have a static header and a scrolling div containing updated content.

The site works fine to in IE.

But in Firefox and SeaMonkey, when the site is loaded for first time, this is what happens
--only a few inches of the content div is visible
--a second scrollbar show up, to the left of the browser's scrollbar
--when this inner scrollbar is used to scroll to the bottom of the content page, the scrollbar vanish and the page behave as is supposed to
--when the outer scrollbar (the browser's scrollbar) is carried all the way to the top, the content div is clipped again and the inner scrollbar show up again

The problem seems same as the second part of the discussion under "CSS 100% height div scrolling issue" (tried to give the link to forum post but it was blocked).

It doesn't fix it when I tried recommended fix (min-height 100%).

Here is the css

Code:

  <style type="text/css">
   #fixed {
	position: fixed;
	position: expression("absolute");
	width:100%;
	left: 0px;
	padding: 0px;
	top: 0px;
	top: expression(eval(document.body.scrollTop)+0);
}

#preload { display: none; }
   
html, body {
   margin: 0px;
   padding: 0px;
    height: 100%;
    overflow:auto;
}
html, body {
 background-: ('');
} 
#logohead
{
	width: 100%;
	background-color:#FFFFFF;
	z-index: 0;
}

.transparent {
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

.head-container1
{
	width: 100%;
	background-color: #00639f;
	height:75px;
	margin-top:0;
	z-index: 0;
}
.head-container2
{
	width: 100%;
	background-color:  #012D58;	
	z-index: 0;
}
.header2
{
	margin: 0 auto;
	width: 100%;
	padding: 0px;
	background: #ffffff;
	z-index: 20;
}
.clearboth { clear: both; }
.headcol {
 display: inline;
}
#sitelogo
{
	border-top: 0px solid #ddd;
	border-bottom: 0px solid #ddd;
	background-color:#FFFFFF;
	margin-top: 0px;
	margin-left: 500px;
	padding-left: 0px;
	float: left;
	width: 172px;
	height:75px;
	z-index: 40;
}

#follow
{	margin-top: 0px;
	margin-left: 10px;
	padding-left: 0px;
	padding-top: 5px;
	float: left;
	width: 35px;
	z-index: 40;
}
#slogan
{
	float: right;
	margin-right: 490px;
	background-color: rgb(205, 32, 28);	
	width: 647px;
	height:: 75px;
	z-index: 40;
}
#navbox
{
	height: 40px;
	z-index: 100;
}
.navitop {
background-color: #012D58;
color: #ffffff;
font: bold 14px Verdana;
width: 120px;
height:38px;
white-space: nowrap;
text-align: center;
vertical-align:middle;
border-style: solid;
border-color: black;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
padding-top: 0px;
padding-bottom: 0px;
cursor: pointer;
}
.navitopfocus {
background-color: black;
color: #ffffff;
font: bold 14px Verdana;
width: 120px;
height:38px;
white-space: nowrap;
text-align: center;
vertical-align:middle;
border-style: solid;
border-color: black;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
padding-top: 0px;
padding-bottom: 0px;
cursor: pointer;
}
#topmenu
{
background-color: #012D58;
float:left;
margin-left: 500px;
	height:: 40px;
	color:#FFFFFF;
	text-align:center;
	vertical-align:middle;
	text-decoration:none;
	z-index: 40;
}

#float
{
padding-top:115px;
 progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=1)
 progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=45,strength=1)
 progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=4)
 progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=135,strength=4)
 progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=7)
 progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=225,strength=4)
 progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=4)
 progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=315,strength=1)
  

}

#all-container
{
	z-index: 0;
}

#mainshadow
{
 width:930px;
 min-height: 100%; 
 background-('');
z-index: 0;

}
#main-container
{
width: 920px;
 min-height: 100%;
	background: #ECECF9;
	padding-top:15px;
	z-index: 0;
}
#main
{
	background: #ECECF9;
	display:inline;
	z-index: 20;
	height:101%;

}
.clearboth { clear: both; }
.headcol {
 display: inline;
}

#bank1
{
width:100%;
padding:5px;
padding-bottom:10px;
text-align:center;
margin-top:10px;
}
#bank2-container
{
height:80px;
background-color:#FFFFFF; 
padding;:5px; 
padding-top:10px;
}


#bank2
{
width:100%;
height:100px;
background-color:#FFFFFF;
vertical-align:middle;
margin-top:30px;
padding-bottom:5px;
}

#bank2a
{
	float:left;
	text-align:center;
	width: 220px;
	margin-right:0px;
	padding-left:10px;
	height:60px;
	background-color:#FFFFFF;

}
#bank2b
{
	float: left;
	margin-left:0px;
	text-align:center;
	width:680px;
	height:60px;
	background-color:#FFFFFF;
}

#bank2binnerleft
{
	float:left;
	margin-left:0px;
	text-align:center;
	vertical-align:middle;
	padding-top:7px;
	padding-left:15px;
	width: 150px;
	height:60px;
	font-family:"Franklin Gothic Heavy";
	font-size:20px;
	font-weight:bolder;
	color:#012D58;
	background-color:#FFFFFF;
}
#bank2binnerright
{
	background-color:#FFFFFF;
	margin-right:0px;
	margin-left: 165px;
	height:60px;
	width:500px;
	
}
#maina
{
	float:left;
	width: 240px;
	margin-top:30px;
	padding-bottom:20px;
	padding-left:20px;
	text-align:center;
}

#mainb
{
	float: right;
	margin-top:30px;
	margin-right:15px;
	padding-bottom:50px;
	width:630px;
	min-height: 100%;
	text-align:left;
	font-family:Verdana, sans-serif;
	font-size:14px;
	border: 0px dotted #FF0000;
	background: #ffffff;
-webkit-border-radius: 9px 9px 0px 0px;
 border-radius: 9px 9px 0px 0px; 
	z-index: 40;
}


.menuboxtopfirst{
margin-bottom:-2px;
background-color:00639f;
font-family:"Franklin Gothic Heavy";
font-size:18px;
font-weight:500;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
padding-top:10px;
width:218px;
height:40px;
-webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px; 
	z-index: 90;
}

.menuboxtop{
margin-top:20px;
margin-bottom:-2px;
background-color:#00639f;
font-family:"Franklin Gothic Heavy";
font-size:18px;
font-weight:500;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
padding-top:10px;
width:218px;
height:40px;
-webkit-border-radius: 9px 9px 0px 0px;
 border-radius: 9px 9px 0px 0px; 
 	z-index: 90;
}

.menubox{
margin-top:0px;
background-color:#012D58;
font-family:"Arial";
font-size:16px;
padding: 14px;
padding-bottom:22px;
color:#ffffff;
text-align:left;
vertical-align:middle;
width:189px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DxTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
	z-index: 50;
}

.menuboxwhite{
margin-top:0px;
background-color:#FFFFFF;
font-family:"Arial";
font-size:16px;
padding: 14px;
padding-bottom:16px;
color:#012D58;
text-align:center;
vertical-align:middle;
width:189px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DxTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}

.mainbnletboxtop{
width:100%;
margin-bottom:-2px;
background-color:#00639f;
font-family:"Franklin Gothic Heavy";
font-size:18px;
font-weight:500;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
padding-top:10px;
height:40px;
-webkit-border-radius: 9px 9px 0px 0px;
 border-radius: 9px 9px 0px 0px; 
 	z-index: 90;
}
#mainbnlet
{
width:100%;
	text-align:left;
	font-family:Verdana, sans-serif;
	font-size:14px;
	border: 0px dotted #ccc;
	background: #ccc;
	z-index: 40;
}



#nlet
{
	float: left;
	text-align:center;
width:610px;
	display:inline;
	height:170px;
	background-color:#ccc;
		padding-left: 10px;
	padding-right: 10px;

}

#nletleft
{
float:left;
	text-align:center;
	vertical-align:middle;
	padding-top:7px;
	padding-left:15px;
	width: 260px;
	height:150px;
	font-family:"Franklin Gothic Heavy";
	font-size:20px;
	font-weight:bolder;
	color:#012D58;
	background-color:#ccc;
}
#nletright
{
	float: right;
	background-color:#ccc;
	margin-right:0px;
	height:150px;
}

#nletleftnote
{
width:100%;
padding-right:4px;
text-align:left;
	font-family:Verdana, sans-serif;
	font-size:10px;
	font-style:italic;
		background-color:#ccc;

}

.mainbcopy
{

width:90%;
	padding-left: 30px;
	padding-right: 30px;
	text-align:left;
	font-family:Verdana, sans-serif;
	font-size:14px;
	border: 0px dotted #ccc;
	background: #fff;
	z-index: 40;
}


.mainbcopyhead
{
	text-align:left;
	font-family:"Franklin Gothic Heavy";
	font-size:26px;
	font-weight:bolder;
	color:#012D58;
	text-decoration:none;
}

.mainbcopyhead a
{
	text-align:left;
	font-family:"Franklin Gothic Heavy";
	font-size:26px;
	font-weight:bolder;
	color:#012D58;
	text-decoration:none;
}




.mainbcopydate
{
text-align:left;
	font-family:Verdana, sans-serif;
	font-size:14px;
	font-style:italic;
}

.mainbcopyshare
{
	text-align:left;
	font-family:"Franklin Gothic Heavy";
	font-size:12px;
	font-weight:bolder;
	color:#012D58;
}


.mainbcopycap
{
text-align:left;
	font-family:Verdana, sans-serif;
	font-size:14px;
	font-style:italic;
}





.head1
{
color:#990000;
font-size: 25px;
font-family: "Franklin Gothic Heavy";
font-style:oblique;
}
.petitionhead
{
color: #000066;
font-size: 40px;
font-family: "Franklin Gothic Heavy";
font-style:oblique;
}
.petition
{
color: #666666;
font-size: 20px;
font-family: "Franklin Gothic Heavy";
}
.date
{
color: #333333;
font-size: 14px;
font-weight:bold;
font-family: "Franklin Gothic Heavy";
}
.headshot
{
float:left;
margin-right: 15px;
margin-bottom: 7px;
}

.mainbbuttonsouter
{
float:left;
height:100px;
text-align:center;
padding-left:200px;
padding-right:200px;

}

.mainbbuttonsinner
{
height:35px;
background:rgb(205, 32, 28);
color:#FFFFFF;
text-align:center;
vertical-align:middle;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
-webkit-border-radius: 9px 9px 9px 9px;
 border-radius: 9px 9px 9px 9px; 

}

.mainbbuttonsinner a
{
	text-align: center;
	font-family:"Franklin Gothic Heavy";
	font-size:20px;
	font-weight:bolder;
	color:#FFFFFF;
	text-align:center;
vertical-align:middle;
	text-decoration:none;
	
}


.petitionbox
{
	text-align:left;
	font-family:Verdana, sans-serif;
	font-size:14px;

}


.petitionboxbn
{
	text-align:left;
	font-family:Verdana, sans-serif;
	font-size:16px;
	font-weight:bolder;

}





#footer{
clear:left;
width:100%
}
</style>

-------------------------------

Here is the feedback from Validator. Sorry, as a n00b, have no clue what to do with this info:

W3C CSS Validator results
Sorry! We found the following errors (17)
3 #fixed Value Error : position expression("absolute") is not a position value : expression("absolute")
8 #fixed Value Error : top Parse Error document.body.scrollTop)+0)
30 .transparent Property zoom doesn't exist : 1
31 .transparent Parse Error opacity=50)
90 #slogan Value Error : height Parse Error height:: 75px
141 #topmenu Value Error : height Parse Error height:: 40px
152 #float Property progid doesn't exist : DXTransform
162 #float Parse Error DXTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=1) progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=45,strength=1) progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=4) progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=135,strength=4) progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=7) progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=225,strength=4) progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=4) progid:DXTransform.Microsoft.Shadow(color=#dddddd,direction=315,strength=1) }
208 #bank2-container Value Error : padding Parse Error padding
208 #bank2-container Parse Error ;:5px;
213 Parse Error [:10px; } #bank2]
299 .menuboxtopfirst Value Error : background-color Unknown dimension 00639f
349 .menubox attempt to find a semi-colon before the property name. add it
349 .menubox Property progid doesn't exist : DX Transform
349 .menubox Parse Error DX Transform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
353 Parse Error [: 50; } .menuboxwhite]
799 Value Error : border Parse Error border="0"

Warnings (14)
118 .navitopfocus Same color for background-color and border-color
291 Property -webkit-border-radius is an unknown vendor extension
309 Property -webkit-border-radius is an unknown vendor extension
327 Property -webkit-border-radius is an unknown vendor extension
343 Property -moz-box-shadow is an unknown vendor extension
344 Property -webkit-box-shadow is an unknown vendor extension
347 Property -ms-filter is an unknown vendor extension
386 Property -webkit-border-radius is an unknown vendor extension
397 #mainbnlet Same color for background-color and border-top-color
397 #mainbnlet Same color for background-color and border-right-color
397 #mainbnlet Same color for background-color and border-bottom-color
397 #mainbnlet Same color for background-color and border-left-color
574 Property -webkit-border-radius is an unknown vendor extension
894 Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

↑ Top
Valid CSS information

Code:

.gallerycontent {
width : 500px;
height : 60px;
border : black solid 1px;
padding : 3px;
padding-top : 3px;
font-family : "Franklin Gothic Heavy";
font-size : 20px;
vertical-align : middle;
display : block;
}
#fixed {
position : fixed;
width : 100%;
left : 0;
padding : 0;
top : 0;
}
#preload {
display : none;
}
html, body {
margin : 0;
padding : 0;
height : 100%;
overflow : auto;
}
html, body {
background-('');
}
#logohead {
width : 100%;
background-color : #FFFFFF;
z-index : 0;
}
.transparent {
opacity : 0.5;
}
.head-container1 {
width : 100%;
background-color : #00639f;
height : 75px;
margin-top : 0;
z-index : 0;
}
.head-container2 {
width : 100%;
background-color : #012D58;
z-index : 0;
}
.header2 {
margin : 0 auto;
width : 100%;
padding : 0;
background : #ffffff;
z-index : 20;
}
.clearboth {
clear : both;
}
.headcol {
display : inline;
}
#sitelogo {
border-top : 0 solid #ddd;
border-bottom : 0 solid #ddd;
background-color : #FFFFFF;
margin-top : 0;
margin-left : 500px;
padding-left : 0;
float : left;
width : 172px;
height : 75px;
z-index : 40;
}
#follow {
margin-top : 0;
margin-left : 10px;
padding-left : 0;
padding-top : 5px;
float : left;
width : 35px;
z-index : 40;
}
#slogan {
float : right;
margin-right : 490px;
background-color : rgb(205, 32, 28);
width : 647px;
z-index : 40;
}
#navbox {
height : 40px;
z-index : 100;
}
.navitop {
background-color : #012D58;
color : #ffffff;
font : bold 14px Verdana;
width : 120px;
height : 38px;
white-space : nowrap;
text-align : center;
vertical-align : middle;
border-style : solid;
border-color : black;
border-left-width : 0;
border-right-width : 0;
border-top-width : 0;
border-bottom-width : 0;
padding-top : 0;
padding-bottom : 0;
cursor : pointer;
}
.navitopfocus {
background-color : black;
color : #ffffff;
font : bold 14px Verdana;
width : 120px;
height : 38px;
white-space : nowrap;
text-align : center;
vertical-align : middle;
border-style : solid;
border-color : black;
border-left-width : 0;
border-right-width : 0;
border-top-width : 0;
border-bottom-width : 0;
padding-top : 0;
padding-bottom : 0;
cursor : pointer;
}
#topmenu {
background-color : #012D58;
float : left;
margin-left : 500px;
color : #FFFFFF;
text-align : center;
vertical-align : middle;
text-decoration : none;
z-index : 40;
}
#all-container {
z-index : 0;
}
#mainshadow {
width : 930px;
background-  :  ('');
z-index : 0;
}
#main-container {
width : 920px;
background : #ECECF9;
padding-top : 15px;
z-index : 0;
}
#main {
background : #ECECF9;
display : inline;
z-index : 20;
height : 101%;
}
.clearboth {
clear : both;
}
.headcol {
display : inline;
}
#bank1 {
width : 100%;
padding : 5px;
padding-bottom : 10px;
text-align : center;
margin-top : 10px;
}
#bank2a {
float : left;
text-align : center;
width : 220px;
margin-right : 0;
padding-left : 10px;
height : 60px;
background-color : #FFFFFF;
}
#bank2b {
float : left;
margin-left : 0;
text-align : center;
width : 680px;
height : 60px;
background-color : #FFFFFF;
}
#bank2binnerleft {
float : left;
margin-left : 0;
text-align : center;
vertical-align : middle;
padding-top : 7px;
padding-left : 15px;
width : 150px;
height : 60px;
font-family : "Franklin Gothic Heavy";
font-size : 20px;
font-weight : bolder;
color : #012D58;
background-color : #FFFFFF;
}
#bank2binnerright {
background-color : #FFFFFF;
margin-right : 0;
margin-left : 165px;
height : 60px;
width : 500px;
}
#maina {
float : left;
width : 240px;
margin-top : 30px;
padding-bottom : 20px;
padding-left : 20px;
text-align : center;
}
#mainb {
float : right;
margin-top : 30px;
margin-right : 15px;
padding-bottom : 50px;
width : 630px;
text-align : left;
font-family : Verdana, sans-serif;
font-size : 14px;
border : #FF0000 dotted 0;
background : #ffffff;
border-radius : 9px 9px 0 0;
z-index : 40;
}
.menuboxtopfirst {
margin-bottom : -2px;
font-family : "Franklin Gothic Heavy";
font-size : 18px;
font-weight : 500;
color : #FFFFFF;
text-align : center;
vertical-align : middle;
padding-top : 10px;
width : 218px;
height : 40px;
border-radius : 5px 5px 0 0;
z-index : 90;
}
.menuboxtop {
margin-top : 20px;
margin-bottom : -2px;
background-color : #00639f;
font-family : "Franklin Gothic Heavy";
font-size : 18px;
font-weight : 500;
color : #FFFFFF;
text-align : center;
vertical-align : middle;
padding-top : 10px;
width : 218px;
height : 40px;
border-radius : 9px 9px 0 0;
z-index : 90;
}
.mainbnletboxtop {
width : 100%;
margin-bottom : -2px;
background-color : #00639f;
font-family : "Franklin Gothic Heavy";
font-size : 18px;
font-weight : 500;
color : #FFFFFF;
text-align : center;
vertical-align : middle;
padding-top : 10px;
height : 40px;
border-radius : 9px 9px 0 0;
z-index : 90;
}
#mainbnlet {
width : 100%;
text-align : left;
font-family : Verdana, sans-serif;
font-size : 14px;
border : #ccc dotted 0;
background : #ccc;
z-index : 40;
}
#nlet {
float : left;
text-align : center;
width : 610px;
display : inline;
height : 170px;
background-color : #ccc;
padding-left : 10px;
padding-right : 10px;
}
#nletleft {
float : left;
text-align : center;
vertical-align : middle;
padding-top : 7px;
padding-left : 15px;
width : 260px;
height : 150px;
font-family : "Franklin Gothic Heavy";
font-size : 20px;
font-weight : bolder;
color : #012D58;
background-color : #ccc;
}
#nletright {
float : right;
background-color : #ccc;
margin-right : 0;
height : 150px;
}
#nletleftnote {
width : 100%;
padding-right : 4px;
text-align : left;
font-family : Verdana, sans-serif;
font-size : 10px;
font-style : italic;
background-color : #ccc;
}
.mainbcopy {
width : 90%;
padding-left : 30px;
padding-right : 30px;
text-align : left;
font-family : Verdana, sans-serif;
font-size : 14px;
border : #ccc dotted 0;
background : #fff;
z-index : 40;
}
.mainbcopyhead {
text-align : left;
font-family : "Franklin Gothic Heavy";
font-size : 26px;
font-weight : bolder;
color : #012D58;
text-decoration : none;
}
.mainbcopyhead a {
text-align : left;
font-family : "Franklin Gothic Heavy";
font-size : 26px;
font-weight : bolder;
color : #012D58;
text-decoration : none;
}
.mainbcopydate {
text-align : left;
font-family : Verdana, sans-serif;
font-size : 14px;
font-style : italic;
}
.mainbcopyshare {
text-align : left;
font-family : "Franklin Gothic Heavy";
font-size : 12px;
font-weight : bolder;
color : #012D58;
}
.mainbcopycap {
text-align : left;
font-family : Verdana, sans-serif;
font-size : 14px;
font-style : italic;
}
.head1 {
color : #990000;
font-size : 25px;
font-family : "Franklin Gothic Heavy";
font-style : oblique;
}
.petitionhead {
color : #000066;
font-size : 40px;
font-family : "Franklin Gothic Heavy";
font-style : oblique;
}
.petition {
color : #666666;
font-size : 20px;
font-family : "Franklin Gothic Heavy";
}
.date {
color : #333333;
font-size : 14px;
font-weight : bold;
font-family : "Franklin Gothic Heavy";
}
.headshot {
float : left;
margin-right : 15px;
margin-bottom : 7px;
}
.mainbbuttonsouter {
float : left;
height : 100px;
text-align : center;
padding-left : 200px;
padding-right : 200px;
}
.mainbbuttonsinner {
height : 35px;
background : rgb(205, 32, 28);
color : #FFFFFF;
text-align : center;
vertical-align : middle;
padding-top : 5px;
padding-bottom : 5px;
padding-left : 10px;
padding-right : 10px;
border-radius : 9px 9px 9px 9px;
}
.mainbbuttonsinner a {
text-align : center;
font-family : "Franklin Gothic Heavy";
font-size : 20px;
font-weight : bolder;
color : #FFFFFF;
text-align : center;
vertical-align : middle;
text-decoration : none;
}
.petitionbox {
text-align : left;
font-family : Verdana, sans-serif;
font-size : 14px;
}
.petitionboxbn {
text-align : left;
font-family : Verdana, sans-serif;
font-size : 16px;
font-weight : bolder;
}
#footer {
clear : left;
width : 100%;
}

Thanks again. Any help much apprecited.

Last edited by Kravvitz : January 30th, 2013 at 11:15 PM. Reason: added [code] tags

January 30th, 2013, 11:22 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

Welcome to DevShed Forums, NFPvolunteer.

Some of the CSS errors are because of the use of IE-only features like expression() and the zoom and filter properties. Other errors are because you have a "::" or ";:" (replace each occurrence of those with a single ":"). The validator failed to detect it but this is also an error (however, it did remove the colon from the "Valid CSS information"):

Code:

html, body {
 background-: ('');
}

remove the rule OR change it to

Code:

html, body {
 background: none;
}

Proper CSS rendering depends on valid HTML. So if you want further help, we'll need to see the HTML from an example page. Could you please post a URL for an example page? As you may have found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

Are you only testing in the 3 browsers you mentioned? SeaMonkey uses the same engine as Firefox, so it's very unlikely that they would render differently. I recommend you at least test in Safari or Google Chrome. Though it's better to test in both as well as Opera.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

January 31st, 2013, 12:38 PM

NFPvolunteer

Registered User

Join Date: Jan 2013

Posts: 4

Time spent in forums: 1 h 8 m 47 sec
Reputation Power: 0

Thanks for the welcome, Kravvitz,

Thanks for you comment.

It is right to say the code you quote is bad. But in the real example, it not like that. What was there bfore had the word 'image' and I had to wipe out all times use of img or image because the forum rules would not let me post with those words included. Sorry, when I took out the image and img, I did not do a good job of cleaning up things properly.

Anyway, the page with the problem can see is at

bgomb dot com

Or should i write it

bgomb . com

I am believing the div being cut short is either

#mainshadow
#main-container
#main

Thanks again. Will download chrome to test too.

February 1st, 2013, 12:47 AM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

As I suspected, you're using an old doctype which does not trigger "standards mode" in browsers. Change

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Code:

<!DOCTYPE html>

It's not a magic fix, but will help browsers be more consistent.

I recommend you consider moving the large blocks of embedded JavaScript and CSS code into external files.

Quote:

It is right to say the code you quote is bad. But in the real example, it not like that. What was there bfore had the word 'image' and I had to wipe out all times use of img or image because the forum rules would not let me post with those words included. Sorry, when I took out the image and img, I did not do a good job of cleaning up things properly.

Oh, I see. I'm not sure why you changed the CSS property name when you removed the URLs though.

Quote:

Anyway, the page with the problem can see is at

bgomb dot com

Or should i write it

bgomb . com

The second is closer to what I recommend (a space is only needed on one side of the "."), but both work.

February 1st, 2013, 06:46 AM

NFPvolunteer

Registered User

Join Date: Jan 2013

Posts: 4

Time spent in forums: 1 h 8 m 47 sec
Reputation Power: 0

Hello Kravvitz. Really happy for you help.

I try the changes (new doctype and external files) on this page 1testindex .html

bgomb .com slash 1testindex .html

It only works now in Chrome. Now even IE is cutting the content short. :-(

February 1st, 2013, 07:59 AM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

The main problem is because "overflow:auto" was given to both "html" and "body". After the "html, body" rule add this:

Code:

body {
  overflow: visible;
}

Remove the <center> element. CSS should be used to center things, not HTML.

February 1st, 2013, 09:51 AM

NFPvolunteer

Registered User

Join Date: Jan 2013

Posts: 4

Time spent in forums: 1 h 8 m 47 sec
Reputation Power: 0

Quote:

Originally Posted by Kravvitz

The main problem is because "overflow:auto" was given to both "html" and "body". After the "html, body" rule add this:

Code:

body {
  overflow: visible;
}

Remove the <center> element. CSS should be used to center things, not HTML.

Kravvitz I know most times people say not to use allcaps but THANK YOU!!! You are genius. SCROLLING PROBLEM SOLVED!!!

Now, I just have to clean up things with the HTML <center> and put css and javascripts in some external files like you advice me to.

Thanks a million times!!! :-))

Scrolling div partially visible in FF and SeaMonkey; perfect in IE

Developer Shed Advertisers and Affiliates