Footer went all weird!

HTML & CSS
1

Need some help, this was working perfectly but the I did something and cant remember what and it went all goofy on me, any ideas what I did.

Heres the page…

http://keatinginc.ca/commercial/asbestos-abatementtesting/

Also, on other pages it looks ok but it doesnt have that image there so it may not be and seems to me that on other pages the footer should be down at the bottom but it isnt there a bit of room, any ideas what happened.

Thanks,

Mike

2

Looks ok in Firefox but in Chrome and Safari looks all messed up, so could imagine IE. Im guessing Im missing a div or something but am confused on whats going on.

3

Found it in chrome and safari. In #footer {} line 380 remove the margin-top: -380px;

In IE there is some other things going on though that will need to be addressed.

4

Thanks Jeremy, but not really what I’m looking for as need the -380px on the margin-top as it is a sticky footer. I’m not too sure what went wrong at all cause it was working not too long ago.

5

Have you managed to fix it, because it looks the same here on Firefox and Chromium (on Linux) and I don’t see any problems. :slight_smile:

6

Nope havent managed to fix it yet, still looks messed up on my Chrome and Safari but ok in Firefox

7

Sorry, that wasn’t helpful. I didn’t realize it was supposed to be sticky, and my small browser window didn’t help.

Anyways, I went through it with both firebug and and chrome dev tools. There are a lot of elements not properly clearing their containers, for instance, #main, .page-content, .page-wrapper, and the #sidebar are all shorter than their content. You may want to track down those issues and see if it straightens anything out.

8

Looks ok in chrome to me. What exactly is the problem?

You do have some errors in your stylesheet here:


.instruc {
	margin-left: 5px;
	padding-left: 15px;
	color: #F27A2D;
	background: url(../images/nav-hover.png) no-repeat;
}
​

That stray character at the bottom!

And a slash here at the end:


body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

And as already mentioned above make sure your floats are contained.

9

Ok, I can see that this page is broken in chrome and thats because (as jeremyC already said) that you haven’t contained the floats inside #main.

I assume you need visible overflow so use this instead:


#main:after{
	content:"."; 
 display:block; 
 height:0; 
 clear:both; 
 visibility:hidden;
}
#main{zoom:1.0}
10

Perfect Paul!!!

Thanks, works perfect now!!!

11

I’m wondering why you’d make that assumption, or send that mess of ugly CSS at it. Overflow+zoom, be done with it… doesn’t appear to be anything that would require more.

Though given the site is chock fully of accessibility and coding issues, I’m hardly shocked that I’m seeing four different BROKEN layouts in four different browsers here – from the first line of code declaring it is in transition from 1997 to 1998, to the mess of bloated pointless javascript, to the massive space-wasting banner garbage on the home page, to the fix width layout with illegibly small px metric fonts, to the use of DIV for paragraphs, nonsensical heading orders, to the comment placements that could be tripping rendering bugs in IE and FF… It’s a laundry list of “this is why you need to start over from scratch”.

Hardly a surprise for a turdpress template.

12

The author had this in the page:


#main {
    overflow: visible !important;
}

So I assumed there was a reason for it. :slight_smile:

But yes overflow:hidden would be my usual preference to the :after method.