CSS - Firefox Is Compressing My Footer
On the front page of my site, I have a footer that seems to slide into the left column if there is not enough content (In FireFox). I've tried to use style="clear:both" just before the footer begins, but to no avail. Any idea what is going on here?
http://www.hawaiipca.net/ (the aren't affected, just the front page) Similar TutorialsI have a css file which looks good enough in internet explorer 6 but when i check it in firefox the footer box goes to the top of the page and the footer links go to the right column box. Where am I going wrong with this? Can anyone please point me in teh right direction please? Here is the css:- Code: body { background-color: #4A4237; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; background-image:url(../../../My Pictures/page_background.gif); } * { margin: 0px; padding: 0px; } html {height:100%; margin-bottom:1px;} #wrapper { width: 700px; margin-right: auto; margin-left: auto; background-repeat: repeat-y; text-align: left; background-color: #FFFFFF; } #nav { background-color: #775d42; padding-top: 10px; padding-bottom: 5px; padding-left: 15px; } #navlist li { display: inline; list-style-type: none; padding-right: 20px; text-transform: capitalize; } #navlist a { text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 15px; font-weight: bolder; } #navlist a:hover { color: #AF9981; } #col1 { float: left; width: 500px; } #col2 { float: left; width: 200px; } #col1content p { margin-bottom: 10px; color: #666666; font-size: 12px; line-height: 140%; text-align: justify; } #col1content { padding: 0px 15px 15px; } .footer { BORDER-TOP: #a4d0ed 2px solid; FONT-SIZE: 10px; PADDING-BOTTOM: 20px; WIDTH: 700px; COLOR: #707070; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #333333; TEXT-ALIGN: center; height: 60px; } .footer A:link { COLOR: #9ebd18; TEXT-DECORATION: none } .footer A:visited { COLOR: #9ebd18; TEXT-DECORATION: none } .footer A:hover { COLOR: #a5cfeb; TEXT-DECORATION: underline } .footer A:hover { COLOR: #a5cfeb; TEXT-DECORATION: underline } #col2content { padding: 15px; text-align: center; } .imageborder { padding: 5px; border: 1px solid #3A4A14; background-color: #F2F3F4; } .subhead { font-size: 11px; color: #78442C; margin-top: 5px; margin-bottom: 5px; } .sidebar { margin-bottom: 10px; color: #666666; font-size: 10px; line-height: 140%; } h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 36px; color: #DAD6CF; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 15px; } h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color: #B4AA9E; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 15px; } h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color: #B4AA9E; padding-bottom: 10px; padding-top: 5px; } #footer p { color: #EEEBE8; font-size: 9px; padding-top: 2px; padding-bottom: 3px; padding-left: 15px; } a:link { color:#0059b4; text-decoration: none; } a:visited { color:#0059b4; text-decoration: none; } a:hover { color:#0059b4; text-decoration: underline; } a:active { color:#0059b4;} If anyone can help me it would be very much appreciated as i am absolutely puzzled. I am not sure if i have put something wrong in the footer or if it is the wrapper. Thanks in advance Hello everyone I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6 Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE. The style sheet is no from me. I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input Eva Here it is: /***********************************************/ /* 3col_leftNav.css */ /* Use with template 3col_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png); background-repeat: no-repeat; background-position: left top; font: 13px Verdana, Arial, Helvetica, sans-serif; /* size: 100%; */ color: #333333; line-height: 1.3; margin: 0px; padding: 0px; } img{ border: 0; } a{ color: #006699; text-decoration: none; } a:link{ color: #006699; text-decoration: none; } a:visited{ color: #006699; text-decoration: none; } a:hover{ color: #006699; text-decoration: underline; font-weight: bold; } h1{ font-family: Verdana,Arial,sans-serif; font-size: 114%; color: black; margin: 0px; padding: 0px; } h2{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h3{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h4{ font-family: Verdana,Arial,sans-serif; font-size: 100%; font-weight: normal; color: #333333; margin: 0px; padding: 0px; } h5{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: #334d55; margin: 0px; padding: 0px; } ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } label{ font-family: Arial,sans-serif; font-size: 100%; font-weight: bold; color: #334d55; } table{ padding: 5 px; } /***********************************************/ /* Layout Divs */ /***********************************************/ #masterhead{ padding: 30px 0px 0px 0px; /* border-bottom: 1px solid #cccccc; */ width: 950px; } #navBar{ float: left; width: 195px; margin: 0px; /* 19.08.2008 padding-top: -5px;*/ padding-top: -5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; /* background-color: #e4f2f9; */ /* 19.08.2008 border-right: 1px solid #cccccc; */ } #headlines{ position: absolute; left: 690px; top: 135px; font-size: 85%!important; /* font-size: 90%; */ /* float:right; */ width: 230px; margin-top: -30px; /* border-left: 1px solid #cccccc; */ /* border-bottom: 1px solid #cccccc;*/ /* padding-right: 10px; */ } #headlines h3{ margin-top: 3px; margin-bottom: 3px; margin-left: 10px; padding-top: 1px; padding-bottom: 1px; font-weight: 900; } #content{ float: left; padding-left: 24px; width: 460px; font-size: 107%; line-height: 1.4; /* position: absolute; top: 184px; left: 210px; */ } #content h1,h2 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 130%; font-color: black; } #content h3 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 120%; font-height: 90%; font-weight: 900; } /***********************************************/ /* Components */ /***********************************************/ #siteName{ margin: 0; padding-top: 0px; padding-right: 0; padding-bottom: 0; padding-left: 200px; /* font-size: x-large; */ color: #FF9900; } /************* #globalNav styles **************/ #globalNav{ /* border-bottom: 1px solid #CCC; */ color: #006699; text-align: center; /* font-weight: bold; */ margin-top: 40px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; /* 19.08.2008 border-top: 1px solid #cccccc; */ } #globalNav img{ display: block; } #globalNav a { /* font-size: 120%; */ padding: 0 4px 0 0; } /*************** #pageName styles **************/ /* #pageName{ margin: 0px; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } */ /************* #breadCrumb styles *************/ #breadCrumb{ font-size: 80%; padding: 2px 0px 0 10px; } /************** .feature styles ***************/ .feature{ padding: 2px 2px 10px 10px; font-size: 80%; } .feature h3{ padding: 30px 0px 5px 0px; text-align: center; color: #006699; } .feature img{ float: left; padding: 10px 10px 0px 0px; } /************** .story styles *****************/ .story{ clear: both; font-size: 80%; padding-top: -40px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .story p{ padding: 0px 0px 10px 0px; } /************* #siteInfo styles ***************/ #siteInfo{ font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; text-align: right; border-top: 0px none #cccccc; /* border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; */ } #siteInfo img{ padding: 4px 4px 4px 10px; vertical-align: middle; } /************* #search styles ***************/ #search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%; } #search form{ margin: 0px; padding: 0px; } #search label{ display: block; margin: 0px; padding: 0px; } /*********** #navBar link styles ***********/ #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; /* border-bottom: 1px solid #006699; */ font-size: 90%; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; /* border-top: 1px solid #006699; */ padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ /* background-color: #dddddd;*/ } .navigate { overflow: hidden; width: 204px; padding-bottom: 1px; } /**Navigation Menu **/ .navigate ul, .navigate li { list-style: none; margin: 0px 0px!important; padding: 0px 0px!important; line-height: 1.5em; } /**erste Navigationseben**/ .navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { display: block; border: 0; border-bottom: 1px solid #86c2e3; border-top: 1px solid #fff; border-right: 1px solid #86c2e3; width: 100%; text-decoration: none; margin: 0; padding: 5px 5px 5px 15px; font-size: 1.0em; font-weight: bold; } .navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active { width: auto; } .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px; padding: 5px 5px 5px 15px; color: #000; font-weight: bold; } .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px; } .navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } .navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } /*********** .relatedLinks styles ***********/ .relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a:link, .relatedLinks a:visited { display: block; } /************** #advert styles **************/ #advert{ padding: 30px 0px 10px; } #advert img{ display: block; } /************** #headlines styles **************/ #headlines{ margin: 0px; padding: 10px 0px 20px 10px; } #headlines p{ padding: 5px 0px 5px 0px; } /**Footer**/ #footer { clear: both; position: relative; border-top: 4px solid #CCECF4; font-size: 11px; padding: 4px 4px 8px 10px; margin-top: 4px; bottom:0; zoom: 1; } #footer .left { float: left; width: 700px; bottom:0; } #footer .right { float: right; width: 150px; text-align: right; margin-top: -2.3em; zoom: 1; position: relative; z-index: 0; bottom:0; } #footer p { color: #000 !important; padding: 0; margin: 0; bottom:0; } #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active { color: #306479; text-decoration: none; font-weight: bold; } #footer a:hover, #footer a:focus { text-decoration: underline; } #navispalte { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; width: 202px; float: left; } http://www.pearl.ru/isdunyasi/vnewsall.asp Everything appears right with Firefox and Safari. Footer floats right with IE. Can anyone tell why. Thanks. Using my http://www.thatspotonline.com as an example I'll explain my problem. I'm trying to use a 3 column fluid layout with a header and a footer. I've gotten past the browser problem with IE and now face a new problem with proper display in firefox. With the included css and attached xhtml layout I end up with a rather large gap on the bottom of the design without adding quite a bit of content to make the page length grow. I've tested with about everything else and this problem doesn't show up. I would gladly take some advise if anyone has any thanks. Code: * { margin:0 auto; padding:0; } h2 { font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif; color:#8B9F86; } h3 { font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif; color:#845697; } a { color:#4C53E0; } a:focus, a:hover, a:active { color:#EB8518; } body { background:#000000 url(images/body2.jpg); background-repeat:repeat; background-position:top left; font-size:90%; margin:0 auto; padding: 24px 0; } #outer { margin:0 auto; width:80%; min-width:40em; max-width:70em; border:10px solid #EEEEEE; border-width:0 5px; background:#EEEEEE; } ul#nav:after, #outer:after, #sub:after, form:after, form div:after { content:"."; display:block; visibility:hidden; clear:both; height:0; } * html #nav, * html #content, * html form, * html form div { height:1%; } ul#access, .off { position:absolute; left:-1000em; top:-1000em; } hr {display:none} #header { background:#EBEBE9 url(images/banner-bg2.jpg) repeat-x left bottom; } #header h1 { padding-left:.6em; font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */ letter-spacing:1pt; color:#FFFFFF; background: transparent url(images/banner2.jpg) no-repeat right bottom; } #header h1 a { color:#FFFFFF; text-decoration:none; } ul#nav { list-style:none; margin:3px 0 1em; text-align:center; background:#FFFFFF; border-top:2px solid #444444; border-bottom:2px solid #444444; } #nav li { list-style:none; margin:0 auto; width:94%; min-width:40em; max-width:70em; display:block; text-align:center; background:#000000; } * html #nav li { width:24.9%; } #nav a { display:block; font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif; text-decoration:none; color:#444444; margin:1px; background:#FFFFFF; } #nav a:focus, #nav a:hover, #nav a:active { border:1px inset #8B9F86; margin:0; color:#EB8518; text-decoration:underline; } ul#nav li#active { background:#FFFFFF; font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif; color:#000000; text-decoration:underline; } #sub, #right { font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif; word-spacing:.1em; margin-bottom:1em; } #sub { width:74%; float:left; position:relative; } #center { width:65%; float:right; } #left { width:33%; float:left; } #right { width:25%; float:right; } #center p { margin:.5em 2% .5em 0; } img.img-right { float:right; } #left h2 { color:#845697; font-size:1.5em; } #left p { font-size:.9em; } #right { font-size:.9em; } #right h2 { font-size:1.2em; } /** Footer **/ #footer { clear:both; margin-top:1em; font: 0.9em/1 'Lucida Grande', arial, tahoma, verdana, sans-serif; border-top:3px double #C8DCC2; } #footer p { margin:1em 1em 1em 0; text-align:center; padding: 21px 0; } #footer ul { list-style:none; margin-top:.7em; } #footer li { display:inline; border-right: 1px solid #C8DCC2; padding:.3em 2%; } I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts! Thanks again everyone HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)"> <html> <head> <title> Attorneys at Law, New York Lawyer</title> <meta name="" content=""> <META NAME="Generator" CONTENT="Microsoft FrontPage 5.0"> <meta name="KeyWords" content="HTML"> <link rel="stylesheet" type="text/css" href="index.css" /> <script src="index.js"> </script> </head> <body> <div id="mainContainer"> <div id="topBar"><img src="webbanner.jpg" width="760" height="100"> <!--#include file="left_bar.shtml" --> <!-- Main Content--> <div id="mainContent"> <!-- Google Search--> <form action="" id="cse-search-box"> <div align="right"> <input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </div> </form> <script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script> <!-- BreadCrumb Nav--> <div id="navBreadCrumb"> <a href="(URL address blocked: See forum rules)">Home</a> <img src="breadcrumb_arrow.png" width="8" height="5" /> <a href="">Areas of Practice</a> <img src="breadcrumb_arrow.png" width="8" height="5" /> <a href=""> Real Estate</a> <img src="breadcrumb_arrow.png" width="8" height="5" /> <strong>Foreclosure</strong> </div> <h1><font face="times new roman, times, serif" size="5">About Our Firm</font> <hr size="2" width="100%" /> <!-- end content --></h1> <p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... and ... Counties. As the largest suburban general practice in ..., we have a skilled team of 31 attorneys, including a physician-attorney, as well as two on-staff Registered Nurses and an extensive support staff to serve our clients.</p> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p> <h5>Why should you choose .... at your New York Attorney?</h5> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv </p> <p align="justify">individual circumstances.</p> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p> <h5>Affiliations</h5> <p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p> <p align="justify">Please visit our <a class="con" href="practice_areas.php"> areas of practice</a> for further information on our legal services or <a class="con" href="email.php"> contact us </a>directly for an initial consultation.</p> </div> </div> </div> </body> </html> CSS Code: html{ height:100%; } body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; font-size:0.8em; margin:0px; padding:0px; background-color:#001b4f; text-align:center; } .clear{ clear:both; } #mainContent{ padding-right:10px; padding-left:210px; padding-bottom:10px; background-color:#fff; } #mainContainer{ width:760px; text-align:left; margin:0 auto; background-color: #fff; border-left:1px solid #272727; border-right:1px solid #272727; padding-bottom:10px; } #topBar{ width:760px; height:100px; padding-bottom:0px; padding-top:0px; border-bottom:2px solid #272727 } #searchbox{ position:absolute:0,0; } #leftMenu{ width:200px; padding-left:10px; padding-right:1px; float:left; background-color: #fff; padd padding-top:25px; } #botTable{ display: table-footer-group; float: top; bottom: 100% Hey All, I'm stumped on a problem I'm having with css. Here's the website I'm working on: johnraymondonline.com/mjbfoundation/ It's wordpress and I was working to modify a template. The problem I'm having is with the div for the footer. I've made the width 100% and it's not expanding the full width of the page. I've checked to see if it was encased in a div and it appears as if it isn't. I'm not sure what to do at this point...use absolute positioning? Any help would be appreciated. Thanks in advance!!! I want my footer to have no whitespace under it (like 1px ). I have it set like this: #footer { border-top:1px solid; text-align:right; margin:0px; font-size:smaller; padding-bottom:0px; } and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org . I've read through a few CSS documents and I can't find any references to this, so excuse me if I've missed something (which I hope I have!). I want to be able to place a footer on my pages and always have it stuck to the bottom of the browser window, regardless of the amount of content in the page. So even if the page were nothing but the header and footer, the footer would be right at the bottom of the page. Can I do this in CSS? So I have this site and I'm not great with css, but this one has to be done all in css I think. And I've got everything working except for the footer. The footer needs to display below the background image which is aligned center top. So if there is plenty of text, the footer should display below all of the text, and if there isn't much text then it should display under the background image. This is how its currently set up: container div header div wrapper div wrapper div left div middle div right div footer div wrapper div the footer has position: absolute; bottom: 0; the container with position: relative puts the footer up the top over the top of the header. With position: absolute it does something else weird, and with neither it puts the footer at the bottom of the screen over the top of the content. the wrapper has relative position, which seems to be why the left, middle and right divs are positioning correctly with their positions as absolute. I think the header just positions correctly since its up top. So it would seem I'd need the footer to be inside another div that is position relatively. I just tried that, but it also positions the footer at the bottom of the screen with more content under it.. I guess what I want really is to have the site split into three horizontal divs, header, main and footer. Then within each of those to center all of the content to only 975px wide. And really its only the main div that needs the background image at all. Can anyone help? Here is my page: http://dev.donmyersministries.com/ The CSS in on the page itself still. My problem: I want my footer to go at the bottom after the two columns, but I just can't figure it out. I have read several tutorials on keeping the footer at the bottom, but nothing has worked for me. This is my first (good) CSS only layout. Help! Thank you all. later Hello All, My question regards footers using CSS. How would you have a footer like they do on Linkworth(dot)com so that it fluctuates depending on how long the page is? So if you have a really long scrolling page, the footer is at the bottom and likewise if the page is really short, the footer is also at the bottom, but so there is never any white space below it. I have a similar design I am working on, but when there is too much type, it runs behind the footer image and the footer never moves down accordingly. Thank you for your help - appreciated. Hi all, I'm having troubles with my footer and I hope someone will be able to help: test.katiefleming .ca (remove space) User: wendy Pass: letmein The footer is supposed to span across the bottom forever should the user increase the browser window (this works). However, my text moves as the window is expanded/contracted. I want it to be fixed. No idea how to do this. Any help would be great! Hi, Im trying to make my footer on my page be a certain height of around 150px. BUT I want it to fill to the bottom of the page even when there is less content or the window is made larger or smaller. So basically a sticky footer which fills to the bottom of the page. An example would be the footer he yoast.com My current CSS is he #fwrap { background-color:#BAAE9F; border-top: 1px solid white; border-top-width: 1px; border-top-style: solid; border-top-color: white; width:100%; height:100%; height:145px; } Any help would be appreciated! Thanks Code: http://xbox-free.co.uk/ Can anyone advise as to why my footer is overlapping/floating to the right? Cheers, Neil Ok, I have this page where the footer <div> isn't paying attention to where the menu <div>'s are. If you look -> Here, you will see how the site is meant to look, i.e. the footer is below everything else. But, if you look -> here, you will see that if the contents of the main <div> are shorter than the menu ones, the footer follows it up the page, and goes underneath the two menu divs. Both menu's are absolutely positioned, so I don't really know how to get the footer to notice they are there, and position itself accordingly... Any thoughts anyone? Cheers, Jon. Hi I've been coding amateur websites and PHP applications for years, but I recently decided to try and learn how to design a website professionally - that is, using Photoshop to mock it up and create a logo, and holding the contents in place using CSS. I'm very pleased with the result (which can be found at haruhi.kg13.com), but there is one bug that I've been trying in vain to resolve, and that is the footer. It took a while to make the footer stay in place, and now it permanently stays on top of any content, which is obviously an issue where I intend to be creating rather long pages without the use of iFrames or any other page-within-a-page technique. Essentially, what I want is for my footer to stay at the bottom of the page (not the browser window) with a 15px margin above it so that I can display as much text as I like on any given page. It's best displayed on the "legal" page, if you increase the font size a bit. Here is my source code. I know some of the CSS elements look unnecessary; I've tried several tutorials for this problem, and this one told me to add a lot of CSS classes. CSS: Code: main.css @charset "utf-8"; /* CSS Document */ body { font: 9pt/17pt arial; margin:0;padding:0; height:100%; background-image: url(../img/sitebg.gif); background-repeat: repeat-x; background-color: #dbe4f7; margin-bottom:10px; } #clear { clear:both; } p { font-size:14px; } a { color:#FFFFFF; } #content { position:fixed; margin-left:200px; margin-right:200px; /* margin-bottom:30px; */ margin-top:20px; line-height:25px; min-height: 100%; margin-bottom: -36px; } * html #content { height: 100%; } #content p { text-align:right; font: 12pt/14pt arial; } #content a:link { display:inline; color:#0094FF; text-decoration:none; } #content a:hover{ display:inline; background:#004A7F; text-decoration:none; } #header_contain { width:935px; height:111px; background-position:bottom; display:block; margin:0 auto; } #header_contain p.logo { display:inline; width:339px; height:111px; text-indent:-5000px; float:right; background-image: url(../img/logo.png); } #header_contain p.logo a { display:inline; width:339px; height:111px; text-indent:-5000px; float:right; background-image: url(../img/logo.png); } ul#top_header { font-size:18px; list-style-type:none; float:right; margin:0;padding:0; clear:right; margin-top:-60px; margin-right:180px; } ul#top_header li { float:left; margin-right:50px; } ul#top_header li a { display:block; color:#FFFFFF; text-decoration:none; } ul#bottom_header { list-style-type:none; float:right; margin:0;padding:0; clear:right; margin-top:17px; } ul#bottom_header li { float: left; margin-right: 15px; } ul#bottom_header li a { display:block; font-size:14px; text-decoration:none; } #footer-spacer { height: 36px; } #footer { display:block; position:absolute; bottom:0; width: 100%; background:#c3cdda; height:36px; } ul#bottom_footer { list-style-type:none; float:right; margin:0;padding:0; clear:both; margin-top:8px } ul#bottom_footer li { float:left; margin-right: 15px; } ul#bottom_footer li a { display:block; font-size:18px; text-decoration:none; bottom:15px; } #top { position: absolute; } HTML (ignore the .php file extension, I'm generating content using includes) Code: index.php <link href="css/main.css" rel="stylesheet" type="text/css" /> <title>KieranJones.org | Home</title> </head> <body> <div id="top"></div> <div id="header_contain"> <p class="logo"><a href="index.php">KieranJones.org</a></p> <ul id="top_header"> <li><a href="index.php?action=blog">Blog</a></li> <li><a href="index.php?action=portfolio">Portfolio</a></li> <li><a href="index.php?action=contact">Contact</a></li> </ul> </div> <div id="content"> <?PHP include("action.php"); ?> <div id="footer-spacer"></div> </div> <div id="footer"> <ul id="bottom_footer"> <li><a href="index.php?action=advertising">Advertising</a></li> <li><a href="index.php?action=legal">Legal</a></li> </ul> </div> </body> </html> Thanks Kieran |