3 replies [Last post]
etherean
Offline
newbie
Last seen: 17 years 16 weeks ago
Timezone: GMT-6
Joined: 2004-10-06
Posts: 6
Points: 0

I'm using glish.com's "static width and centered" format (http://glish.com/css/3.asp), which I edited to 2 columns, along with Steve Sauyet's footer tutorial (http://scott.sauyet.name/CSS/Demo/FooterDemo1.html).

The trouble that I'm having is that when applying the footer correctly, IE keeps sticking the page way over on the right side, instead of having it centered. Firefox and Netscape both display it beautifully, but I'm having trouble correcting the problem without unsticking the footer.

When operating correctly, the footer should stick to the bottom unless the content of the #columnleft div goes past the bottom of the screen, then it should hug the bottom of the document.

here's my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>joshuaogle.com &raquo online store + gallery</title>
<link rel="STYLESHEET" type="text/css" href="style.css" />
</head><body>
<div id="contents"> 
  <div id="frame"> 
    <div id="columnleft"> 
      <!--#include virtual="/top_feature.inc" -->
      <h1>welcome to the new <em>joshuaogle.com</em></h1>
      <h2>2005.10.04</h2><br>
      <p> We've redesigned the website to allow for more cross-browser support 
        and in the process have added more content. In order to accomodate some 
        of our visitors using different browsers and operating systems, including 
        handheld devices and a printers, which will now print with less ink and 
        will look like a letterhead.</p>
		<blockquote>
		New Additions.<br>
		&raquo; 'Events' now own page<br>
		&raquo; News Archives<br>
		&raquo; Cross-browser support<br>
		&raquo; New technology support<br>
		&raquo; New printer style</blockquote>
      <p><font class="lightblue">Attention:</font> It will take a few days to get the gallery up and running again, 
      which will include better e-commerce and access to fine art prints as well.</p> 
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
    <div id="columnright"> 
      <div id="logo"><a href="http://www.joshuaogle.com"><img src="/images/spacer.gif" alt="joshua ogle dot com logo" width="200" height="150"></a></div>
      <div id="menu"> 
        <!--#include virtual="/menu.inc" -->
      </div>
    </div>
    <div id="footer_os"><a href="http://www.oglestudios.com"><img src="images/footer_oglestudios_logo.gif"></a></div>
    <div id="footer_links"><a href="/contact.shtml">contact information</a> &nbsp; 
      | &nbsp; <a href="/legal.shtml">legal information</a> &nbsp; | &nbsp; <a href="/help.shtml">help 
      + faq</a></div>
    <div id="footer_copyright"> images and design copyright <a href="http://www.oglestudios.com">ogle 
      studios</a> unless otherwise noted</div>
  </div>
</div>
</body>
</html>

the stylesheet and pictures and links are all relative, so here's the URL: http://www.joshuaogle.com/index.shtml

here's the stylesheet:

html, body {
	padding: 0px;
	margin: 0px;
	border: 0px;
	color: #333333;
	text-align: center;
	font-family: georgia, serif;
	font-size: 11px;
	background: #6C6D6E url(/images/wrapbg.gif) top center repeat-y;
	font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
	cursor: default;
	height:100%;
	/* Last height declaration hidden from Mac IE 5.x */}
	html, body, #contents { min-height: 100%; height: 100%; }
	html>body, html>body #contents { height: auto; }
		
		
/* Text & Image Control */
img { border: 0px; }

input, textarea, select {
	border: 1px solid #D9E0D8;
	margin-bottom: 3px; }

a:link, a:visited, a:active {
	text-decoration: none;
	color: #444444;
	text-transform: uppercase;
	font-weight: bold; }

a:hover { color: #FF6600;}

.non { display: none; }

h1 {
	color: #A0B5BD;
	font-family: Georgia, Times, "Times New Roman";
	font-weight: bolder;
	font-size: 14px;
	margin-bottom: 0px;
	letter-spacing: 0px;
	text-transform: lowercase;
	padding-left: 30px}

h2 {
	margin: 0px;
	padding-left: 40px;
	background-position: top left;
	background-repeat: no-repeat;
	display: inline;
	font-size: 100%;
	font-style: italic;
	font-weight: normal; }

p {
	text-align: justify;
	padding: 0px 10px 0px 40px; }
	
blockquote { padding: 10px; }

.lightblue {
	color: #A0B5BD;
	font-weight: bold;
}

/* Architecture Control */

#contents {
	text-align: center;
	align: center;
	position: absolute;
	width: 100%; }

	#frame {
		width:750px;
		margin-right:auto;
		margin-left:auto;
		text-align:left;
		background-color: #fff; }

	#columnleft {
		width:550px;
		float:left;}

		.top_feature {
			width: 550px;
			height: 150px;
			background-image: url("/images/top_feature.gif");
			background-position: top left;
			background-repeat: no-repeat; }
						
			#top_feature_detail {
				z-index: 3; 
				position: relative;
				top: -20px;
				width: 540px;
				height: 20px;
				padding: 0px 10px 0px 0px;
				background: none;			
				background-color: #333;
				color: #fff;
				font-weight: bold;
				font-size: 11px;
				text-transform: uppercase;
				text-align: right;
				line-height: 20px;
				filter: alpha(opacity=60);
				-moz-opacity: .60;
				opacity: .60; }
				#top_feature_detail:hover {
					filter: alpha(opacity=90);
					-moz-opacity: .90;
					opacity: .90; }
				#top_feature_detail a { color: #FFF }

		#content {
			width:500px;
			voice-family: "\"}\""; 
			voice-family:inherit;
			width: 550px;
			margin-bottom: 5em;
			height: auto;
			padding-bottom: .1em;}
			.content_center {
				width: 510px;
				padding: 20px;
				text-align: center;
				align: center; }	

		#mailinglist {
			width: 428px;
			margin: 50px 50px 0px 50px;
			border: 1px solid #CCC;
			padding: 10px;
			text-align: left; 
			voice-family: "\"}\""; 
			voice-family:inherit;}
				
	#columnright {
		width:200px;
		float:left; }
		
		#logo {
			float: right;
			left: 0px;
			width: 200px;
			height: 150px;
			top: 0px;
			padding: 0px; 
			margin: 0px; 
			background-image: url("/images/top_logo.gif");
			background-position: top left;
			background-repeat: no-repeat; }
			
		#menu {
			width:160px;
			padding-top: 40px;
			padding-right: 10px;
			padding-left: 20px;
			background:#fff; }
			#menu ul {
				margin: 0px;
				padding: 0px 0px 0px 0px;
				color: #667788;
				font-family: geneva, verdana, arial, sans-serif;
				font-weight: bold;
				font-size: 9px;
				text-transform: uppercase; }
			#menu li {
				margin: 0px;
				padding-top: 5px;
				padding-right: 10px;
				padding-left: 20px;
				list-style: none; }
			#menu a {
				color: #667788;
				text-decoration: none; }
			#menu a:hover {
				padding-top: 10px;
				color: #FF6600; }
			#menu h1 {
				color: #A0B5BD;
				font-family: Georgia, Times, "Times New Roman";
				font-weight: bolder;
				font-size: 14px;
				margin-bottom: 0px;
				letter-spacing: 0px;
				text-transform: lowercase;
				padding-left: 0px;}
			#menu h1 a{
				color: #A0B5BD;
				font-family: Georgia, Times, "Times New Roman";
				font-weight: bolder;
				font-size: 14px;
				text-transform: lowercase; }
				#menu h1 a:hover { color: #FF6600; }
			
		#footer_os {
			clear: both;
			position: absolute;
			bottom: 30px;
			color: #888;
			width: 750px;
			text-align: right;
			padding: 0px;
			font-weight: bold;
			text-transform: uppercase; }
				
		#footer_links {
			position: absolute;
			bottom: 15px;
			background-color: #666;
			color: #999;
			width: 750px;
			text-align: center;
			padding: 0px;
			font-weight: bold;
			text-transform: uppercase;}
			#footer_links:hover { color: #CCC; }
			#footer_links:hover a { color: #CCC; }
			#footer_links a { color: #AAA; }
			#footer_links a:hover { color: #FFF; }
			
		#footer_copyright {
			position: absolute;
			bottom: 0px;
			background-color: #444;
			color: #888;
			width: 750px;
			text-align: center;
			padding: 0px;
			font-weight: bold;
			text-transform: uppercase; }
			#footer_copyright:hover { color: #AAA; }
			#footer_copyright:hover a { color: #CCC; }
			#footer_copyright a { color: #AAA; }
			#footer_copyright a:hover { color: #FFF; }
			
/* DropShadows */
#v3 .wrap1 {background:url(images/dropshadows_shadow.gif) right bottom no-repeat;}
#v3 .wrap2 {background:url(images/dropshadows_corner_bl.gif) left bottom no-repeat;}
#v3 .wrap3 { padding:0 9px 9px 0; background:url(images/dropshadows_corner_tr.gif) right top no-repeat;}

I'm still pretty new to css, and this is my first attempt at tableless design, so forgive me if I've made a simple mistake, but I'm not seeing it.

Thanks for any help you can give.

Joshua Ogle.[/i]

Root
Offline
Enthusiast
Brighton UK
Last seen: 14 years 51 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Trouble with IE

For #contents set margin: 0 auto;. Get rid of the other stuff while you test.

No class, little style and a lotta division.

etherean
Offline
newbie
Last seen: 17 years 16 weeks ago
Timezone: GMT-6
Joined: 2004-10-06
Posts: 6
Points: 0

Trouble with IE

That moves the stuff back to the center, but makes the footer come up over the other stuff when the page is shortened.

To fix the footer, I apparently have to have
position: absolute;
in the #contents

Is there a way to keep position: absolute while keeping the content in the middle?

etherean
Offline
newbie
Last seen: 17 years 16 weeks ago
Timezone: GMT-6
Joined: 2004-10-06
Posts: 6
Points: 0

Trouble with IE

Problem solved.

I ended up taking out #contents altogether.

This site: http://www.bluerobot.com/web/css/center2.htm had an interesting workaround for that annoying IE problem. I used to be a big fan of Microsoft and IE. All of these special exceptions plus a really bad trojan which I am still unable to get rid of due to IE's inherent security flaws, it's really starting to get on my nerves. Oh well, if even I can get fairly competent with standards in two weeks, maybe there's hope.

Thanks Root, and I hope that anyone else who stumbles upon this thread finds something helpful.