#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep 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
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    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.

    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).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep 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.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    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">
    to
    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.

    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.

    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.
    Spreading knowledge, one newbie at a time.

    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).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep 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. :-(
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    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.
    Spreading knowledge, one newbie at a time.

    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).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    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!!! :-))

IMN logo majestic logo threadwatch logo seochat tools logo