CSS Nightmare. Lost my scrollbar (mozilla and IE) can't center content.

412 Posts

fruitwerks Reply #1, 19 years, 2 months ago

This all started when I needed to hug my footer to the bottom of the browser. Got that working, got my content centered, but then my footer and menu were to the left of the page. I have made some drastic changes to the css to get the footer working and somewhere along the line I lost my scrollbar. I have a backup of my old css, but the footer just tails the content in that version.

I tried playing with the different chunks of my css but can’t get anywhere, just making it worse.

I can’t get my menu and footer to stay lined up with the header image and content and stay centered, and have the footer working. The biggest issue right now is the lack of a scroll bar.

Beware my css is rather big due to thickbox and my menu.

body {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  background:#F7F7F7;
  color: #333333; 
  font-family:Verdana, Helvetica, sans-serif; 
  font-size:small;
  text-align: center;
  overflow: hidden; 

  }
#header {
  position:absolute; 
  top:0; 
  left:0; 
  height:0px; 
  overflow:auto; 
  background:#F7F7F7;
  color:#fff;
  }
#main {
  text-align:center;
  width:760px;
  top:0px;
  left:0;
  bottom:16px; 
  right:0; 
  overflow:auto; 
  }


#footer {
  position:absolute;
  bottom:0; 
  left:0;
  width:760px; 
  height:16px; 
  overflow:auto; 
  text-align:center; 
  background:#EEEEEE;
  }

#proleft{
padding: 0em 0em 0em 0em;
text-align: left;
}
#proright{
padding: 0em 0em 0em 0em;
text-align: right;
}
#procen{
padding: 0em 0em 0em 0em;
text-align: center;
}

a, a:link {
	text-decoration: none;
	color: #000000;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCCCCC;
}
a:visited { color: #000000; 
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCCCCC;

}
a:hover {
	color: #81A021;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #006600;
	background-color: #FFFFFF;


}
a:active { color: #006600; text-decoration: none;}


a img, img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	text-decoration: none;
}

img a {

	color: #e1e1e1;
	border: 1px solid #FFFFFF;
	background-color: #F7F7F7;
}
img a:hover {

	color: #e1e1e1;
	border: 1px solid #006600;
	background-color: #F7F7F7;
}

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: bold;
	color: #666666;
	background-color: #F7F7F7;
	margin-top: 10px;
	margin-bottom: 5px;
	}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 110%;
	font-weight: normal;
	color: #006600;
	background-color: #F7F7F7;
	margin-top: 5px;
	margin-bottom: 5px;
	}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #006600;
	background-color: #F7F7F7;
	margin-top: 3px;
	margin-bottom: 3px;
	}
h4, h5 {
	background-color: #F7F7F7;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 130%;
	font-weight: bold;
	color: #999999;
	}

#nav, #nav ul {padding: 0;margin: 0;list-style: none}
	#nav {align: center; width: 760px; background: #999 url("imgs/button_dn.gif") repeat-x;font-weight:bold;height:2.09em;font: bold 96% arial;margin: 0 0px 0 0px}
	#nav li {position:relative;background: #999 url("imgs/button_dn.gif") repeat-x;float: left;width: auto;display:block;margin: 0;border-bottom: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;padding:0}
	#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {border-bottom: none;text-decoration:none;cursor:pointer;color:#999;display: block;padding: 4px 10px 2px}
	#nav a:hover {background: #999 url("imgs/button_up.gif") repeat-x;color:#81A021}
	
	#nav li ul {border-bottom: 1px solid #999;border-left: 1px solid #999;border-right: 1px solid #999;background: #f6f6f6;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	-khtml-opacity:0.8;
	width:11em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em;}
	
	#nav li:hover ul, #nav li.sfhover ul {top:19px;left: 0;z-index:99999}
	#nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
	#nav li li.last {border-bottom:none}
	#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {
	color:#000;
	border-bottom: none;
	 padding: 3px 10px 2px;
	 }
	#nav li li a:hover {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x;}
	
	#nav li.active {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
	#nav li.active ul {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
	#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
	#nav li.active a:hover {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
	#nav li.here {color:#81A021;background:#F3F9E1 url("imgs/bgcloser.jpg") repeat-x; height:18px; border-bottom: none;
	 padding: 4px 10px 2px;
	 width:auto}
	 #nav li.here a{color:#81A021;background:transparent; border-bottom: none; margin:0;
	  padding:0px;}
	#nav li li.here {color:#000;
	background: #D2DEB0;
	
	 
	 }
	
	#nav li.active li {border:none;border-top: 1px solid #EFEFEF}
	#nav li.active li.last {border-bottom: none;}
	#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
	#nav li.active li a:hover {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}
	
	#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#000;background:#EFEFEF url("imgs/button_up.gif") repeat-x}

	/* hide from IE mac */
	#nav li {width:auto}
	/* end hack */

#thickbox

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}

html, body {
min-height: 100%;
height: auto !important;
height: 100%
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

#TB_secondLine {
	font: 10px Arial, Helvetica, sans-serif;
	color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: absolute;
	z-index:100;
	top: 0px;
	left: 0px;
	background-color:#000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

#TB_window {
	position: absolute;
	background: #ffffff;
	z-index: 102;
	color:#000000;
	display:none;
	border: 4px solid #525252;
	text-align:left;
}

#TB_window img {
	display:block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_caption{
	height:25px;
	padding:7px 30px 10px 25px;
	float:left;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	float:right;
}

#TB_closeAjaxWindow{
	padding:5px 10px 7px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background-color:#e8e8e8;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: absolute;
	display:none;
	height:100px;
	width:100px;
	z-index:101;
}

#TB_HideSelect{
	z-index:99;
	position:absolute;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}

/*scriptaculous.us fx divs*/

#closer {
	text-align: left;
	background-image: url(imgs/bgcloser.jpg);
	height: 28px;
}
#closebutton {
	border: 1px solid #999999;
	padding-right: 4px;
	padding-left: 4px;
	background-color: #F7F7F7;
	background-repeat: repeat-x;
	background-image: url(imgs/button_dn.gif);
}


#content li {
	list-style-image: url(imgs/li.gif);
	list-style-type: none;
	list-style-position: inside;
	margin-right: 2px;
}
#content ul {
	padding-left: 1em;
	margin-bottom: 3px;
	list-style-image: url(imgs/dot.gif);
	list-style-type: none;
}

/* common elements ------------------------------------------------------------------------- */

div, p, img, a, td, ul, ol {
    font-size: 1em;
}

b {
	color: #006600;
	background-color: #F7F7F7;
}

ol {
    margin-left: 1em;
    padding-left: 1em;
}
ol li {
    margin-left: 1em;
    padding: 0 0 .5em.3em;
    list-style: decimal;
	 background: transparent;
}

p {
	margin: 1em 0 1em;
	padding: 0;
	}


ul {
    list-style: none;
    margin: 0 0 20px 1em;
}
li {
    list-style: none;
    padding-left: 1em;
    margin-bottom: 3px;
}


.clear {
    clear: both;
    height: 1px;
    margin: -1px 0 0;
    font-size: 1px;
}

and here is my template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>[(site_name)] | [*pagetitle*]</title>
    <meta name="keywords" content="bird birds avian aves conure cockatiel poicephalus meyers red-belly senegal parrot parakeet sale order free toy toys texas united states dallas fort worth ship shipping"></meta>
    <meta name="author" content="Corey Carpenter"></meta>
    <meta name="revisit-after" content="14 days"></meta>
    <meta name="robots" content="all"></meta>
    <meta name="rating" content="general"></meta>
	<link rel="stylesheet" href="[(base_url)]assets/templates/step/site.css" type="text/css" media="screen" />
    <base href="[(site_url)]" />
        
	<script src="[(base_url)]menu.js" type="text/javascript"></script>
        <script src="[(base_url)]prototype.js" type="text/javascript"></script>
        <script src="[(base_url)]jquery.js" type="text/javascript" ></script>
        <script src="[(base_url)]scriptaculous.js" type="text/javascript"></script>
        <script src="[(base_url)]thickbox.js" type="text/javascript"></script>
        <script src="[(base_url)]hidelink.js" type="text/javascript"></script>

</head>

<body>  

	<div id="main">
		<img src="title_img.jpg" width="760" height="189" alt="SSA_Logo" />
                  <div id="nav">[!DropMenu? &startDoc=0 &levelLimit=`2`!]</div>
[*content*]
		
        </div
<div id="footer">Copyright © 2007 [(site_name)]</div>

 
</body>

</html>

The site is live with this botched code so if you need to see the results I can pm or post the link..

Thanks!

208 Posts

ian_m Reply #2, 19 years, 2 months ago

Have you tried adding margin: 0 auto; to your footer or the other elements that become left aligned. Sorry I have not spent time looking in depth but this should get the things centered if a width element has been declared

Cheers

412 Posts

fruitwerks Reply #3, 19 years, 2 months ago

Thanks... added the margin: 0 auto; to the nav and footer, no luck. I did notice that on two pages I have simple content that does not contain any div tags, those have the footer and the head but a box (that does have scroll bars!) starting at the top left of the page with the dimensions of 760x250, and my content is in there. 760 is how wide I want it...but yeah... *sigh* 250 or anything around there is a value anywhere in the css.

208 Posts

ian_m Reply #4, 19 years, 2 months ago

Just had another quick look, this will get everything except you footer at the bottom of the page.

inside the opening <body> tag add <div id="wrapper"> then just before the </body> add </div>

then add this to the style sheet

#wrapper{
width:762px;
margin:0 auto;
height:100%;
}

The height attribute in there probably wont work and keeping the footer glued to the bottom of the page is a bit of a challenge. However if you make it 100% wide and put in a background graphic 760px wide the same color that you want then get that centered it should give the footer the appearance of being centered. Heres the code which works in FF

#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:16px;
overflow:auto;
text-align:center;
background:#EEEEEE;
background:#EFEFEF url("imgs/760WideGraphic.gif") background-repeat: no-repeat;
}

Dont think that will work in IE may need a bit of trial and error, I am sure there are tutorials about on how to do this but that way is how I would go about it, sorry I am no expert but hope this is of some help.

Cheers

412 Posts

fruitwerks Reply #5, 19 years, 2 months ago

Thanks. I tried the wrapper, as I had before with almost the same code, but I was placing it inside the body. Your idea has centered the content. Footer is still at the bottom and I can do the graphic thing - I’m sure that will work if thats what it comes down to. However I am still having the crazy lack of scrollbar issue, and the boxed errata on those two pages. I’ll pm you the details so you can get a better understanding.

Thanks!

412 Posts

fruitwerks Reply #6, 19 years, 2 months ago

ok fixed the scroll problem..

overflow: hidden;

was the naughty code in my body.

footer issue remains - but now that I can scroll, the footer does not follow, it stays in it’s original position when content is scrolled.

412 Posts

fruitwerks Reply #7, 19 years, 2 months ago

The suggested footer trick makes my page look like I totally left out the menu call...

hmmmmmm... giving up.. seeing what js can offer

315 Posts

BBloke Reply #8, 19 years, 2 months ago

This may help.

I use FF about 99% of the time and what has helped me the most when dealing with CSS is firebug. Its a great addon and it allows you to change the CSS on the fly locally before you commit those changes in the back end.

Granted you have to make the changes as you would normally but at least you can see what is happening and save your self some restoration time.

BBloke

412 Posts

fruitwerks Reply #9, 19 years, 2 months ago

FireBug eh.. I’ll take a look see how it is.

Thanks!

oh, FYI, my wife decided she liked the footer as an overlay on the top banner graphic. I was so relieved. Then I went to see how IE rendered it and it was not in the same spot, but it looked just as good!