Jump to content


Photo

footer messing up


  • Please log in to reply
8 replies to this topic

#1 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 26 September 2006 - 03:20 PM

www.thecampussource.com
for some reason the footer, the part with rentals, is overlapping hte footer slightly for some reason, any ideas on how to fix it.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#2 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 27 September 2006 - 10:30 AM

Yep

add

clear: both;

to the css declarations of the footer id
follow me on twitter @PHPsycho

#3 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 27 September 2006 - 12:38 PM

I did, actually it's already there, I didn't show the css file because it can be pulled through the browser, I was wondering if anyone saw what could be causing this, it isn't because of the layout, it's because the thing ended up going down further than I thought, the area with the advertising.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#4 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 27 September 2006 - 12:44 PM

try this: put a wrapper div around your 3 columns (but before your footer), and apply the following .clearfix class to it:
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

clear: both is often not the best way to clear floats. believe it or not, IE is one of the only browsers to interpret clears properly. by definition, a clear is to clear all floats that come before it in the markup. take a look at your page in IE: the footer works fine... try out that solution and see if it helps.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#5 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 27 September 2006 - 01:33 PM

I tried it, I put the div around everything but the footer, adn put that in the stylesheet, and had a class="clearfix" to the div, adn it didn't fix it.  I took it back off now, but I tried it, and it didn't work, any more advice, I don't understand this myself, wildteen is the one who helped me put this together, and it originally worked great, but when I started putting in content it went lower than I expected, plus me adding styles to it, I don't know if that's what caused it, but now it only messes up in firefox, they are even telling me it still looks great in higher resolutions.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#6 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 27 September 2006 - 01:44 PM

are you doing anything funny with negative margins or absolute positioning? i glanced at your CSS and didn't see anything, but i didn't look in depth.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#7 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 27 September 2006 - 01:50 PM

I have found the problem. It is to do with this:
#content
{
	width: 420px;
	height:400px;
	float:left;
	margin: 0 20px;
}
I notice height:400px;

That sets the content div to a fixed height of 400px. The content will flow out side of the div if the content get greater than 400px, as the content will not resize. This results in the footer not moving and the content flows over the div. What you should do is either remove height:400px; or use min-height:400px;. if you use the latter you may need to use CSS hacks as IE6 and lower doesnt support min-height. It'll also affect other browsers too.

#8 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 27 September 2006 - 01:58 PM

if you use the clearfix class on the containing div i showed above, you don't have to worry about height at all since it will force the containing div below your longest column. just remove the height attribute completely, and you should be fine.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#9 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 27 September 2006 - 02:59 PM

At this point, simply removing the height restriction seemed to have totally fixed the problem in all those browsers, thank you all for the help, as for the clearfix, I know what it's for now, I will look into it,maybe it can help me in other situations, thank you all for the help.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users