Footer problem

[Snitz]

Does anybody have firebug? If yes, would you please inspect my site and just tell me why is the footer behaving in that weird way.

My site: [LINK]
user: guest
pass: guest



And here is the CSS of #el-footer

#el-footer {
	color: #626A69;
	background-color: #FFFFFF;
	padding: 15px 0 0;
	position: relative;
	text-align: center;
	margin-bottom: -50px;
	
	vertical-align: bottom;
	width: 950px;
}

#el-footer small {
	color: #858783;
	font-size: 100%;
}

#el-footer ul {
	margin: 0 0 8px;
	padding: 0;
	line-height: normal;
}

#el-footer li {
	display: inline;
	margin: 0;
	padding: 0;
	background: url(../images/vline.gif) no-repeat center left;
}

#el-footer li a {
	display: inline;
	line-height: normal;
	padding: 0 15px;
}

li.el-firstitem {
	background: none !important;
}

.el-footurl {
	float: none;
	clear: both;
}

I've been trying to solve this problem but I just can't find its code.

[Rowsdower!]

Your negative bottom margin in the footer doesn't seem to have any effect at all, which is why your page is dangling above the bottom of the window. I'm not sure how to fix this yet...

A patch for now could be this:

#el-wrapper {
[B][COLOR="Red"]background-color:white;[/COLOR][/B]
margin:0 auto;
padding:0 0 [B][COLOR="Red"]70px[/COLOR][/B];
width:955px;
}

It won't bring your footer any closer to the bottom of the page but it will at least stop the background gap...

[Snitz]

Your negative bottom margin in the footer doesn't seem to have any effect at all, which is why your page is dangling above the bottom of the window. I'm not sure how to fix this yet...

A patch for now could be this:

#el-wrapper {
[B][COLOR="Red"]background-color:white;[/COLOR][/B]
margin:0 auto;
padding:0 0 [B][COLOR="Red"]70px[/COLOR][/B];
width:955px;
}

It won't bring your footer any closer to the bottom of the page but it will at least stop the background gap...

Thank you, apparently that worked...

[Doctor_Varney]

Can't look at your site, snitz, because it's got some sort of restricted access. Try to make it more widely available, if possible.

Out of two browsers, (if you're comparing IE with Firefox), I think you'll find it's IE which carries the most bugs. I was always taught to design for Mozilla and then adjust for IE.

It might well be something ABOVE the footer, which is causing the problem but since it isn't described here, I can't be sure what the problem is, exactly.

[Snitz]

Can't look at your site, snitz, because it's got some sort of restricted access. Try to make it more widely available, if possible.

Out of two browsers, (if you're comparing IE with Firefox), I think you'll find it's IE which carries the most bugs. I was always taught to design for Mozilla and then adjust for IE.

It might well be something ABOVE the footer, which is causing the problem but since it isn't described here, I can't be sure what the problem is, exactly.

There's a user/pass which I provided at the start of my topic.
user/pass: guest/guest

This site is giving me a headache, the alignment of the footer, background, menu isn't 100% accurate. The company I'm working for right now, had another developer to work on it before I got here... so I'm continuing his work and it looks like he did alot of modifications and some of them aren't applicable.

Can you please take a look and see if it's working? coz at some pcs it's loading just fine and at other pcs, the footer and the menu drift a little bit of the mainbody.

[Excavator]

Hello again Snitz,

It looks like that notch is appearing in your footer is worse on other pages. Look at the Our Products link and you'll see it 1/3 of the way up the page.

It's showing up because your #el-wrapper doesn't line up with the white space in bg1.jpg.
#el-wrapper is width: 950px;
The white space in bg1.jpg is 942px wide

Try reducing the width of #el-wrapper. You may have a lot of other things to adjust the width on to fix your box model.
It would probably be easier to photoshop your bg1.jpg so the white space is 950px wide.

[Snitz]

Hello again Snitz,

It looks like that notch is appearing in your footer is worse on other pages. Look at the Our Products link and you'll see it 1/3 of the way up the page.

It's showing up because your #el-wrapper doesn't line up with the white space in bg1.jpg.
#el-wrapper is width: 950px;
The white space in bg1.jpg is 942px wide

Try reducing the width of #el-wrapper. You may have a lot of other things to adjust the width on to fix your box model.
It would probably be easier to photoshop your bg1.jpg so the white space is 950px wide.

I photoshopped my background and made the white space 950px, you can see it on the site and it's still showing the same thing.

Anyway, I tried an alternative method. Instead of using a wallpaper background for the site, I decided to take 1 horizontal line about 27px of height and apply it with repeat-y and looks like it worked.

EDIT: It worked with the repeated background on Firefox3 and IE7 but on Firefox2 and IE7 it's still doing the same problem; footer notch and menu left border (white)

Any advise on this?

[Snitz]

Alright, one more problem out of the many I'm having on this project.

I've managed to separate the background's divs out of the of the site, I created tables and put everything inside of it with backgrounds on the left and right and its working without any error.

But if you goto the site now [LINK] (guest/guest)
Notice the footer, the white border at the bottom, sometimes it's small and sometimes its very big. I couldn't find a css property that leads to this thing... Any advise?

[Snitz]

Alright, one more problem out of the many I'm having on this project.

I've managed to separate the background's divs out of the of the site, I created tables and put everything inside of it with backgrounds on the left and right and its working without any error.

But if you goto the site now [LINK] (guest/guest)
Notice the footer, the white border at the bottom, sometimes it's small and sometimes its very big (spot it in the "Press & Events"). I couldn't find a css property that leads to this thing... Any advise?

[Rowsdower!]

Alright, one more problem out of the many I'm having on this project.

I've managed to separate the background's divs out of the of the site, I created tables and put everything inside of it with backgrounds on the left and right and its working without any error.

But if you goto the site now [LINK] (guest/guest)
Notice the footer, the white border at the bottom, sometimes it's small and sometimes its very big (spot it in the "Press & Events"). I couldn't find a css property that leads to this thing... Any advise?

You what? Tables? Nooooooooooooooooooo!

You're probably going to get some interesting posts from other users now.

Well anyway, I'm not sure if you're talking about the fact that your page is not stretching all of the way to the bottom of the browser window or if you are talking about something else. Can you clarify? Are you actually seeing a change in the size of the footer itself or are you concerned with the gap below the footer in pages with very short content?

[Snitz]

You what? Tables? Nooooooooooooooooooo!

You're probably going to get some interesting posts from other users now.

Well anyway, I'm not sure if you're talking about the fact that your page is not stretching all of the way to the bottom of the browser window or if you are talking about something else. Can you clarify? Are you actually seeing a change in the size of the footer itself or are you concerned with the gap below the footer in pages with very short content?

I'm actually concerned about the gap in the footer and that the background isn't loading on the page all the way down.

I know tables don't seem the right choice but I simply don't know what else to do to debug it.