|
CSS - Layout Footer Problem
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> </td>
</tr>
<tr>
<td colspan="3">
<img src="images/global_header_04.jpg" width="480" height="52" alt=""></td>
<td> </td>
<td> </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>
Similar TutorialsHello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Hi I was hoping someone could help me with a sticky footer layout. What I've got so far kind of works, but not quite perfectly. Basically, I want the top & bottom of the container div to always be 20px from the edge, and for the footer to stick to the bottom of the container. I've kind of got it working, but because of the padding on the body there's always a scrollbar present, plus with some browsers, the footer only seems to stick when resizing the window from the corner. Here's the code: 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>
<title></title>
<style type="text/css">
html {
height:100%;
}
body {
padding:20px 0 20px 0;
background:#d9e7ea;
margin:0px auto;
font-size:11px;
font-family:"Trebuchet MS", Verdana, Helvetica, sans-serif;
color:#000;
height:100%;
}
#wrap {
margin:0 auto;
position:relative;
width: 950px;
min-height:100%;
background-color:Red;
overflow:hidden;
}
#header {
margin:0 20px;
height:100px;
background-color:Green;
}
#content {
margin:0 20px;
padding-bottom:50px;
background-color:#ffffff;
background-color:Blue;
}
#footer {
color:#000;
position:absolute;
bottom:0px;
background-color:Yellow;
height:50px;
width:950px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
header
</div>
<div id="content">
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
</div>
<div id="footer">
footer<br />
</div>
</div>
</body>
</html>
Thanks for any help. First, I should share this fantastic piece of code for sticky footers (footer stays at the bottom even when content is short): http://scott.sauyet.com/CSS/Demo/FooterDemo1.html It works great for a liquid layout in FF and IE6. However, for fixed width layout, the container is left justified instead of centering the container. See: http://shawkey.com/stickyfooter/fixedlayoutstickyfooter.html Anyone want to hack at this with Firebug and see if they can get the container to be centered? Thanks! Hey gang, Ok, this is embarrassing, but I'm currently working at redesigning my website (here), and would love to get rid of the craptacular tables-based layout. I've spent the last few days googling for a good two-column header and footer tutorial but I can't see any that works well and explains what is going on ( I'd rather know what's working than cut'n'paste someone's css scheme ). I'm not too worried about <IE5.5/etc compatibility as most of the data on the page is UTF-8 ( and IE5.0 - 5.5 makes up 1.49% of my visitors ). This is what I have so far - I just need to get rid of those two cells! Can anyone point me in the right direction (or laugh hard at my crappy google-skills ). Hi all, I am trying to basically have a centre column of data on my page. Within this centre column, I am trying to place a header and footer. The CSS is working quite well with the exception that the header and footer seem to be shorter than the width of the main column. In other words, there seems to be a margin on the right and left side between the end of the footer/header and main column. I am not sure what is going on as I have made the widths the same. I am sure I am over-seeing something small. I was following the example found http://www.pmob.co.uk/temp/1colcentred.htm Code:
html{height:100%;}
body {
padding:0;
margin:0;
height:100%;
background-color: #98AFC7;
color: #000000;
}
#outer{
min-height:100%;
width:800px;
background:pink;
color: #000000;
margin:auto;
text-align:left;
position:relative;
}
* html #outer{height:100%}
#header {
border-top:1px solid #000;
border-bottom:1px solid #000;
background:blue;
left:-1px;
width:800px;
height:40px;
overflow:hidden;
color: #000000;
z-index:100;
//margin-left:6px;
//margin-right:6px;
}
#footer {
position:absolute;
bottom:0;
left:0;
background:green;
height:40px;
border-top:1px solid #000;
width:800px;
//margin-left:1%;
//margin-right:1%;
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
<body>
<div id="outer">
<div id="header">Header</div>
<p>middle</p>
<p>middle</p>
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Hello! I am in need of some help with my css. I know, I am a total newbie but need some help with getting the css working properly. It seems that some parts work for IE and other parts work for Firefox. It seems like my left bar shows differently in IE and Firefox. Furthermore I have checked with IE on Mac and the main body doesn't show correctly either. It is displayed too short, doesn't fill the box. If anyone please could take a look at the code and see if they can help me I would appreciate it. Please anyone help me. You can see the page at: http://www.galakse.no/test/index.php/tscm/news The css is located he http://www.galakse.no/test/design/tscm/stylesheets/tscm.css Any and all help is very much appreciated! Thank you! I am working on this layout. I have a header contained in an ap div that stretches the whole screen, A body with 2 sections, the upper portion scales all the way across, and the lower portion is centered in the middle, and I need to add a sticky footer that stretches across the whole page on the bottom. I can't figure it out and have tried a few options but none seem to work. Does anyone have any ideas on how to accomplish this. I know I can absolute position a footer at the bottom but I do not want a floating bar running across the screen incase someone with a super high resolution one day decides to view the page. Here is my code. If anyone can help I'd really appreciate it. <!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" /> <title>Untitled Document</title> <style type="text/css"> <!-- #headerDiv { position:absolute; left:0px; top:0px; width:100%; height:219px; z-index:1; background-image:url(images/header_bg.jpg) } #leftcontentDiv { position:absolute; left:0px; top:0px; width:50%; height:219px; z-index:2; } #headermenuDiv { position:absolute; width:263px; height:19px; z-index:2; margin-top:5px; margin-left: 10px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #FFF; left: 26px; } #rightcontentDiv { position:absolute; right:0px; top:0px; width:50%; height:219px; z-index:2; } #logoDiv { position:absolute; left:0px; top:0px; width:511px; height:101px; z-index:2; background-image:url(images/ogo.jpg) } #searchDiv { position:absolute; left:90px; bottom:0px; width:330px; height:42px; z-index:2; background-image: url(images/search.jpg); } #logosearch_containerDiv { position:absolute; left:1%; top:25px; width:511px; height:146px; z-index:2; } #signupDiv { position:absolute; width:212px; height:19px; z-index:2; margin-top:5px; right:5px; font-size:12px; font-family: Arial, Helvetica, sans-serif; color: #FFF; } #loginDiv { position:absolute; right:0px; top:24px; width:233px; height:119px; z-index:2; background-image:url(images/login.jpg) } #bodytopDiv { position:absolute; left:0px; top:219px; width:100%; height:401px; z-index:2; } #photoDiv { position:absolute; left:0px; top:0px; width:589px; height:349px; z-index:3; } #titlecontainerDiv { position:absolute; right:2px; top:0px; width:50%; height:349px; z-index:3; text-align: left; } body { text-align: center; } #bodytopbottomDiv { position:absolute; left:0px; top:348px; width:100%; height:51px; z-index:3; background-color: #0361C1; } #bodytopDiv #bodytopbottomDiv table { text-align: center; font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 12px; } #newalbumsDiv { position:absolute; left:0px; top:620px; width:301px; height:301px; background-image: url(images/newalbums.jpg); } #topalbumsDiv { position:absolute; left:318px; top:620px; width:301px; height:301px; background-image: url(images/topalbums.jpg); } #videosDiv { position:absolute; left:636px; top:620px; width:386px; height:301px; background-image: url(images/videos.jpg); } #lowerbodycontainer { width: 1024px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; left: 0px; top: 0px; } --> </style> </head> <body> <div id="headerDiv"> <div id="leftcontentDiv"> <div id="headermenuDiv">Home | About us | FAQ | Help | Reach us here</div> <div id="logosearch_containerDiv"> <div id="logoDiv"></div> <div id="searchDiv"></div> </div> </div> <div id="rightcontentDiv"> <div id="signupDiv">New User? Signup | New Artist? Sign up</div> <div id="loginDiv"></div> </div> </div> <div id="bodytopDiv"> <div id="photoDiv"><img src="images/girlcap.jpg" width="589" height="349" /></div> <div id="titlecontainerDiv"><img src="images/logo.png" width="519" height="118" /></div> <div id="bodytopbottomDiv"> <table width="777" border="0" align="center" cellspacing="10"> <tr> <td width="145">text goes here</td> <td width="150">text goes here</td> <td width="126">text goes here</td> <td width="161">text goes here</td> <td width="125">text goes here</td> </tr> </table> </div> </div> <div id="lowerbodycontainer"> <div id="newalbumsDiv"></div> <div id="topalbumsDiv"></div> <div id="videosDiv"></div> </div> </body> </html> I was looking for ways to make the layout work with header, body and footer that work in IE, Gecko, Safari, etc.. I thought I found a good solution via Google surfing and it looked great. Then I discovered that it doesn't have the "<!DOCTYPE ...>" tag, so I added it and now it is thrown out of wack in most browsers. Does anyone know of a valid css layout that would include the header, the body and the footer that work. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
/* colored borders put on for visual effect only */
body{
height: 100%;
margin: 0;
padding: 0;
}
#spacer{
height: 95%;
float: left;
width: 1px;
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: red; /* visual effect only */
}
#contentwrap{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#content{
padding: 30px;
border-width: 1px;
border-style: solid;
border-color: blue;
}
#footer{
clear: both;
height: 5%;
border-width: 1px 0 0 0;
border-style: solid;
border-color: red;
vertical-align: middle;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="spacer"></div>
<div id="contentwrap">
<div id="content">
<p>this is the content div</p>
<p> </p>
<p>more content</p>
<p> </p>
<p>and even more</p>
<p> </p>
<p> </p>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="footer">footer</div>
</body>
</html>
I thought I can do this but it doesn't really work as the footer doesn't go all the way down to the bottom when needed... Code: <div id="header"> .... </div> <div id="main"> .... </div> <div id="footer"> .... </div> Thanks, FletchSOD Hello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look: http://www.chcs-ut.com/support.php?section=technical 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.... 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 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;} 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 ? 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 am having problems with the footer of our site on the homepage at http://www.themax.co/ . This problem is ONLY occurring in the AOL browser (yes, it's annoying). See the attached image... In the AOL browser, the footer links (HOME, ABOUT, etc.) are sitting ontop of the READ MORE buttons (in the 3 bottom boxed). I tried adding a <div style="clear:both"></div> between the footer and the boxes, but that didn't work. Then I tried a min-height hack - I added the <div class="prop"></div> and <div class="clear"></div> tags to each of the boxes. But that didn't work (the prop and clear class are defined in my stylesheet) ... but that didn't work either. Ug. Running out of ideas. Please help. 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/ |
|||||||