CSS - Problem With Footer On My Blog In Ie 7, I Need Help...

this is where it is about: sdomien .be/sdomien6-positionated/

the footer (now it is just the red ugly thing)
looks like i want it in IE7, but when i open it in IE8 or FF it seems to be not like in IE7
what did i do wrong?

#footer{background-color:red; width:100%; position:relative; bottom:auto;margin-bottom:0 auto;}

I am trying to create a footer and facing a problem while doing so...

This is my html code:


Code:

<div id="container">

<div id="main">

<div id="terms">

// content

</div> // closing terms 
</div> // closing main

 <div id="footer">
// content
</div>
</div> // closing container 

And css is

Code:

html, body {
    height:100%;
    margin:0;            
    background: #F0FAFF;
}

#container {
    min-height:100%;
    position:relative;
}

#main {
    height:100%;
    font-size:150%;
    clear:both;
    overflow:auto;
    padding-bottom:80px;
}

#footer {
    position:absolute;
    background-color:#FF6633;
    bottom:0;
    width:100%; 
    height:80px;             
}

#termsandpolicy {
position:absolute;
left:3%;
width:72%;
top:90px;
}

And result that I get is http://www.walknshine.com/termsofuse.php


What is the problem...I have searched in google a lot but not able to get any significant css code...plzz help....

Hiya everyone.

Right am having major issues with my new site.

The problem i am finding, is that my footer is not at the foot at the page when the content in the middle of the page is not big enough.

When i add a doze of lines to the main layer it's OK.

please check these : Works ok with content in the middle
Click here

without much content - footer rises.
Click Here


I've spend 3 hours try to sort out this annoying problem out.
Basically i want the footer to main a defined size, remaining at the very bottom of the page.

Would someone be kind enough to assist me please ?

The dreaded CSS footer.

I've managed to get it working perfectly in IE, but Firefox isn't happy atm. If you resize the window so that it needs to be scrolled down the footer soon gets very messed up.

If you figure that out then you really, really know your stuff. Or you're a lot more awake than I am.

http://www.vaya.ws/vayadesign/

hi Guys,

Ive had a play and cant solve this problem.

Ive got a gradient that is 200px tall that repeats across the top of my page set as the background.

I also have a container with a width of 850px centered.

I need to create another gradient that repeats across the bottom of the page (200px tall also).

What ive done is taken the footer div out of the container and put it underneath in the html set the width to 100% height to 200px and repeated the background - this works but if there is no content in the container the footer sits half way up the page sooooo I add position: absolute with bottom: 0px which brings the footer to the bottom of the page even if no content is in the container SWEET but if I start streching the actual browser window up and down the footer will ride over any other element on page.

I have an odd problem with my footer layout. I use 1280x1024 resultion and it works fine but when I change to a lower resultion or reduce browser window from full screen or put on longer text so you need to scroll the page down my footer doesn't sit on the bottom of the page. Check the attached screenshots and the css code bellow to see my exact problem.

Code:

#footer {
	position: absolute;
	margin-left: -50%;
	left: 50%;
	bottom: 0px; !important;
	text-align: center;
	font-family: Verdana, Arial, sans-serif;
	font-size: 9px;
  	padding: 5px;
	padding-bottom: 8px;
	background-image: url(../images/design/bg.gif);
}

Any idea?

Thanks

Hi,
I've created a page with two tables, which is basically structured like

<table>
main content
</table>
<table id="footer">
footer content
</table>

and in my style sheet i have

Code:

#footerid { 
        position: absolute; 
        bottom: 0px; 
} 

The problem is that the footer is overlapping the content if the content is greater then a page's length. What I need is for the footer to come after the content table insetad of overlapping as it is now. Does this require some sort of id attached the first table?

Thanks for any help on this one

Hi.

I've been banging my head against the wall for ages with this! Could someone please explain, and perhaps offer some code, on why the footer on the Home and About Me pages (http://www.freewebs.com/mike-elley/) renders the page header and title below, differently. These pages seem to work fine in IE6. I'm testing on Opera 7.23 by the way.

Thanks very much for any help!

Hey Guys,

It's turning out to be 'one of those days'. I thought I had a pretty good understanding of using containers and a footers 'bottom' property to make sure the footer lines up with the last elements of the page. I've set it up in code and just can't seem to find why the footer is showing up at the top of the page.

Anyone spot the problem?

-----------> CSS references outside file
Code:

#footer_global 
{
	background-color: #FFFFFF;
	font-family: helvetica,;
	position: absolute;
	left: 0px;
	width: 812px;
	height: auto;
	z-index: 0;
	bottom: auto;
}

----------------Page Coding
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="css_layout.css" rel="stylesheet" type="text/css" />
<link href="css_fonts.css" rel="stylesheet" type="text/css" />

<style type="text/css">
#body_container
{
	background-color: #FFFFFF;
	font-family: helvetica,;
	margin:0;
	padding:0;
	position: absolute;
	left: 0px;
	top: 216px;
	width: 812px;
	height: 277;
	z-index: 0;
}

#site_container
{
	background-color: #FFFFFF;
	font-family: helvetica,;
	margin:0;
	padding:0;
	position: absolute;
	left: 30px;
	top: 50px;
	width: 812px;
	height: auto;
	z-index: 0;
}

</style>

</head>

<body>

<div id="site_container">

<div id="header_global">
<!-- ImageReady Slices (global_header.psd) -->
<table id="Global_Header" width="812" height="216" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<img src="images/global_header_01.jpg" width="480" height="51" alt=""></td>
		<td>
			<img src="images/global_header_02.jpg" width="163" height="51" alt=""></td>
		<td>&nbsp;        	</td>
	</tr>
    
	<tr>
		<td colspan="3">
			<img src="images/global_header_04.jpg" width="480" height="52" alt=""></td>
		<td>&nbsp;			</td>
		<td>&nbsp;			</td>
	</tr>
    
	<tr>
		<td rowspan="3">
			<a href="index.html"><img src="images/global_header_07.jpg" width="157" height="113" alt="Ask_Bob" border="0"></a></td>
		<td rowspan="3">
			<a href="main_P3_input.html"><img src="images/global_header_08.jpg" width="161" height="113" alt="Project_Pricing_Profiler" border="0"></a></td>
		<td rowspan="3">
			<a href="main_identify_input.html"><img src="images/global_header_09.jpg" width="162" height="113" alt="Identity_Local_Companies" border="0"></a></td>
		<td rowspan="3">
			<a href="main_workshop_input.html"><img src="images/global_header_10.jpg" width="163" height="113" alt="Workshop_Opportunities" border="0"></a></td>
		<td>
			<img src="images/global_header_11.jpg" width="169" height="21" alt=""></td>
	</tr>
    
	<tr>
		<td>
			<a href="http://www.churchsolutionsmag.com/" target="_blank"><img src="images/global_header_12.jpg" width="169" height="83" alt="Featured_Sponsor" border="0"></a></td>
	</tr>
    
	<tr>
		<td>
			<img src="images/global_header_13.jpg" width="169" height="9" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</div>


<div id="body_container">


<div id="body_main_global">
<img src="images/index_body.jpg" width="642" height="277" alt="Ask_Bob">
</div>


<div id="sponsors_global">
<!-- ImageReady Slices (sponsors.psd) -->
<table id="Global_Sponsors" width="170" height="277" border="0" cellpadding="0" cellspacing="0">
	<tr>
	  <td rowspan="4">
	  <img src="images/global_sponsors_01.jpg" width="7" height="277" alt=""></td>
		<td>
	  <img src="images/global_sponsors_02.jpg" width="163" height="19" alt=""></td>
	</tr>
	<tr>
		<td>
		  <a href="http://www.csdus.com" target="_blank"><img src="images/global_sponsors_03.jpg" width="163" height="89" alt="CSD" border="0"></a></td>
	</tr>
	<tr>
	  <td>
	  <a href="http://trane.com/Default.asp"  target="_blank"><img src="images/global_sponsors_04.jpg" width="163" height="71" alt="Trane" border="0"></a></td>
	</tr>
	<tr>
	  <td>
	  <a href="http://www.****ersonandassociates.com/" target="_blank"><img src="images/global_sponsors_05.jpg" width="163" height="98" alt="****erson_And_Associates" border="0"></a></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</div>


</div>

<div id="footer_global">
<!-- ImageReady Slices (global_footer.psd) -->
<table id="Global_Footer" width="812" height="140" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="9">
			<img src="images/global_footer_01.jpg" width="479" height="17" alt=""></td>
		<td rowspan="3"><img src="images/global_footer_02.jpg" width="164" height="93" alt="" /></td>
		<td rowspan="3">
			<a href="index.html"><img src="images/global_footer_03.jpg" width="169" height="93" alt="Brought_To_You_by_NACDB" border="0"></a></td>
	</tr>
	<tr>
		<td>
			<a href="info_building_main.html"><img src="images/global_footer_04.jpg" width="105" height="21" alt="Building_A_Church" border="0"></a></td>
		<td>
			<img src="images/global_footer_05.jpg" width="3" height="21" alt=""></td>
		<td>
			<a href="info_qualifications_main.html"><img src="images/global_footer_06.jpg" width="92" height="21" alt="Our_Qualifications" border="0"></a></td>
		<td>
			<img src="images/global_footer_07.jpg" width="4" height="21" alt=""></td>
		<td>
			<a href="info_resources_main.html"><img src="images/global_footer_08.jpg" width="90" height="21" alt="Church_Resources" border="0"></a></td>
		<td>
			<img src="images/global_footer_09.jpg" width="3" height="21" alt=""></td>
		<td>
			<a href="info_about_main.html"><img src="images/global_footer_10.jpg" width="67" height="21" alt="About_NACDB" border="0"></a></td>
		<td>
			<img src="images/global_footer_11.jpg" width="3" height="21" alt=""></td>
		<td>
			<a href="info_contact_main.html"><img src="images/global_footer_12.jpg" width="112" height="21" alt="Contact_Us" border="0"></a></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="images/global_footer_13.jpg" width="479" height="55" alt=""></td>
	</tr>
	<tr>
		<td colspan="11">
			<img src="images/global_footer_14.jpg" width="812" height="47" alt="Copyright_Information"></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</div>

</div>

</body>
</html>

Hi,

I am generating what should be a simple css layout. I have a header, some left content (which is comprised of layers that hold an image and some over the top to form a kind of navigation tablet), some content to the right of that for text, and finally a footer. Bog standard design...

The problem I have is that the content to the right of the left content is sat below both the left content and the footer currently.

What it should be doing is sitting to the right of the left content and where the text 'grows' push the footer down the page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
        padding:0;
        margin:0;
        color: #000000;
}

#wrapper {
		position: relative;
		min-height: 100%;
		height: auto !important;
		height: 100%; 
	}

#header{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:224px;
        border-top:0px solid #feffff;
        border-bottom:0px solid #feffff;
        overflow:hidden;
        color: #000000;
}



#content {
		background-color: #ccc;
		padding-bottom: 50px;
	}
	
* html #footer {/*only ie gets this style*/
        \height:40px;/* for ie5 */
        he\ight:38px;/* for ie6 */
}



#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 0px white;
}

#navlist li a { 
color: #4E261B;
text-decoration: none;
font-family: palatino linotype, helvetica, sans-serif;
font-size: .90em;
line-height: 200%;
}

a{
font-family: Tempus Sans ITC;
color: #4E261B;
font-weight: bold;
font-size: 14pt;
}

	#content {
		background-color: white;
		padding-bottom: 50px;
		padding-left: 200px;
		padding-top: 0px;
	}
	
		#footer {
		background-color: #ff0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		position: absolute;
		bottom: 0 !important;
		bottom: -1px;
	}
	
	
	</style>
	
</head>
<body>
<div id="wrapper">
		<div id="header">
			<img border="0" src="images/Banner_flat.jpg" alt="Banner" width="100%" height="224" align="left" />
		</div>
		
		
<div style="position: absolute; width: 169px; height: 243px; z-index: 1; left: 4px; top: 229px" id="layer1">
<img border="0" src="images/bridetablet1.bmp" alt="Menu" width="190" height="302" /></div>
</div>

<div style="position: absolute; width: 169px; height: 243px; z-index: 2; left: 14px; top: 257px" id="layer2">
<div id="navcontainer"></div>
<ul id="navlist">
<li><a href="hello" class="c2">Home</a></li>
<li><a href="About%20Us" class="c2">About Us</a></li>
<li><a href="User%20Register" class="c2">User Register</a></li>
<li><a href="User%20Log-In" class="c2">User Log-In</a></li>
<li><a href="Supplier%20Log-In" class="c2">Supplier Log-In</a></li>
<li><a href="Join" class="c2">Join</a></li>
</ul>
</div>


<div id="content">
			<p>Stuff.</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p><p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
			<p>Blah, blah blah</p>
				</div>
				
	
	<div id="footer">
		<p>Footer</p>
	</div>
</div>
</body>
</html>

Thanks,


G

Hello. I have no idea how to fix my problem, and I am hoping someone would be kind enough to help me.

I have set up my template to have a wrapper div with a top, middle, and bottom div inside.

What I need to do is have the footer (bottom div called (wrapper_bottom) move down when the content in the middle div (wrapper_middle) has more content added. Currently, when content is added to the middle div (wrapper_middle), it pushes the bottom div content out of the way. Maybe I have the divs set up wrong or maybe have them listed in the html file incorrectly?

I have uploaded a zip file of my files he
www (*) dpegues (*) com (slash) site_help (*) zip

Also, I have posted a live version of it at:
www (*) dpegues (*) com (slash) site_help

It contains my site images, the template in the folder called Templates, and the css file.

And one more thing if everyone doesn't mind - how do I keep the bottom buttons attached to the bottom of the footer bar?

I am learning CSS right now, and unfortunately have to teach myself. I think I have learned a lot though in the few days I have been doing it!!!

Thank you everyone.

Hello, I have a problem with a footer on a website I'm building.
I want it to my down as text fills the space between the top blue thing, and the bottom blue thing, but as you can see, the text skip past the bottom.

I want the bottom to be pushed down by the text.

Here's the site
And here's the css

Hope you can help me with this.

Hi,

1st problem :
when i try to validate the html on this document:
http://www.chocolateriewanders.com/new/new2/about_us.php

the validation failes and i have no idea why can i not just put a list in another list?

2nd problem [SOLVED AS WELL]:
the footer behaves kinda weird on my mac. i have fairly high resolution and i am not able to re-create the prob on my ibm. an image file is attached.
in firefox the footer is located above th other floating boaxes. i use no positioning and just clear and float values - i have no idea how it got there
http://www.chocolateriewanders.com/new/new2/about_us.php

___________
i am trying to re-design my existing page to get the navigational menu more integrated and to make the page more colorful. furthermore am i trying to ONLY use float to position the elements.
the only tiny obsticle is, that i couldn't get around the table in the center yet - but i am working on it

I know this is probably something very simple I'm overlooking, but I can't seem to get this page to display corrrectly in IE. The portion I'm talking about is the footer div: although the CSS clears both, in Firefox I see the footer correctly but in IE there is some encroachment of the footer background color on the right side of the screen.

URL is: http://www.readaloudproject.org/about/

Please disregard all of the other aspects of the page... this is very much still under construction and a lot more styling needs to be done. But this footer is driving me crazy because I copied working code from other sites that is now no longer working.

Help! Thanks!