Anybody know why this is overlaying?

[SystemLogic]

https://www.activetuning.com/store/create_account.php

It seems that certain pages on my site have the content overlaying over the footer rather than extending itself in the content section....any idea why this is happening and how I can fix it?

I believe this is just a problem in Firefox

[Jamieharrop]

I'm not seeing any problems with the content and/or footer in Firefox or Opera, SystemLogic. Maybe you could upload a screenshot of what you are seeing?

It is quite likely being caused by the clear fix bug, but I can't be sure without seeing what is happening.

[Dan Schulz]

Try fixing your HTML errors and validating your markup .

[drhowarddrfine]

This is a bug in IE, not a problem in Firefox or any other standards compliant browser. Enclosing parent containers are NOT to expand to contain floated elements. To get modern browsers to do what old, buggy non-standard IE is doing, add overflow:auto to your #container CSS.

Another way to fix this is to remove the 100% height from your maincontentcontainer. This limits the height of that div allowing the overflow in the first place

[SystemLogic]

I'm not seeing any problems with the content and/or footer in Firefox or Opera, SystemLogic. Maybe you could upload a screenshot of what you are seeing?

It is quite likely being caused by the clear fix bug, but I can't be sure without seeing what is happening.

Here's a screenshot of the issue I was having (but continue reading for updates):



I tried messing around with the clearfix, but couldn't figure it out.

This is a bug in IE, not a problem in Firefox or any other standards compliant browser. Enclosing parent containers are NOT to expand to contain floated elements. To get modern browsers to do what old, buggy non-standard IE is doing, add overflow:auto to your #container CSS.

Another way to fix this is to remove the 100% height from your maincontentcontainer. This limits the height of that div allowing the overflow in the first place

Ok, so if I take off the 100% height from the maincontentcontainer, it does somewhat fix the issue...but it brings about a few new ones:

- In IE it doesn't overlay the content anymore
- In Firefox, if the content is longer than the set height, it does overlay the footer (note, only in Firefox):


The problem with removing the 100% height on the maincontentcontainer is that the content section of the site does not auto adjust to the bottom of page (above the footer) anymore:



Any ideas on how I can resolve all issues? FYI - if you're looking at the CSS on the actual page, make sure you're looking at osc_styles.css or secure_osc_styles.css (they should be the same aside from calling secure images for backgrounds).

[Paul O'B]

Hi,

You can't have 100% height on an inner nested element unless the parent has a specific pixel height. The height will either collapse to auto or be 100% viewport height depending on situation (see faq on 100% height for more info).

If things overlap in firefox then its usually one of two things. Either you haven't cleared the floats properly or you haven't added all the width and height attributes in the html img tag. Just missing one out can cause firefox to misplace the image while it draws the layout.

e.g. This one has the height and width missing:

<div id="header"><a href="http://www.activetuning.com"><img src="https://www.activetuning.com/i/layout/mainlogo.gif" alt="ActiveTuning - The Shape of Performance - Specializing in Nissan/Infiniti" /></a></div>

I also notice that you had an inline style setting the maincontainer to 1000px height which is not a good idea either.

You shouldn't need to set the maincontainer to 100% height anyway as long as you clear the floats because your backgrounds are contained in the image that you are using to replicate the columns.

I suggest you fix the images first so that they all have the width and height attributes correctly stated and then take it from there. If the problem still persists then check your floats are being cleared correctly or post again.

I looked at your home page locally in ie and firefox without the 100% height and I couldn't see any issues of overlap. You may need to be specific about which pages are causing the problems.

[SystemLogic]

Hi,

You can't have 100% height on an inner nested element unless the parent has a specific pixel height. The height will either collapse to auto or be 100% viewport height depending on situation (see faq on 100% height for more info).

If things overlap in firefox then its usually one of two things. Either you haven't cleared the floats properly or you haven't added all the width and height attributes in the html img tag. Just missing one out can cause firefox to misplace the image while it draws the layout.

e.g. This one has the height and width missing:

 <div id="header"><a href="http://www.activetuning.com"><img src="https://www.activetuning.com/i/layout/mainlogo.gif" alt="ActiveTuning - The Shape of Performance - Specializing in Nissan/Infiniti" /></a></div>

I also notice that you had an inline style setting the maincontainer to 1000px height which is not a good idea either.

You shouldn't need to set the maincontainer to 100% height anyway as long as you clear the floats because your backgrounds are contained in the image that you are using to replicate the columns.

I suggest you fix the images first so that they all have the width and height attributes correctly stated and then take it from there. If the problem still persists then check your floats are being cleared correctly or post again.

I looked at your home page locally in ie and firefox without the 100% height and I couldn't see any issues of overlap. You may need to be specific about which pages are causing the problems.

Thanks for the excellent response.

Ok so let me first work off the secure pages (URL to be used: https://www.activetuning.com/store/create_account.php) that we are using on osCommerce....non-osc pages on the site are using different stylesheets, and don't seem to have the same issue....it seems like only sometimes when content is dynamically put into it and the page will have a header/footer called into it. Let me know if that doesn't make sense.

The 1000px thing was a makeshift solution because it would extend that section far enough down that the content would not reach the footer to overlay it. I just removed this from the page. I also added width/height attributes to the html img tags per your suggestion. I'm still seeing issues in Firefox. I do have a clear on the footer div:

<div id="footer" class="clearfix">

So I would have figured that should have stopped the overlaying from occuring in FF. Here's a screenshot of what I'm still seeing:

[Paul O'B]

Hi,

On the link above you still haven't removed the height:100% from #maincontainer and if i make the window smaller and then scroll to the content then the footer overlaps the page exactkly the same as in your image.

You must remove that 100% height form #maincontainer and then also remove the height from your sidebar as it is not necessary either.

Remove those then upload and then we'll take another look.

(You also have some broken code but i don't think its causing the issue but it ought to be fixed all the same.)

When you apply clearfix to an element that means it will contain all floats within that element. it doesn't specifically mean that the element will clear other floats itself but that the element will wrap its boundaries around any inner floated content.

[SystemLogic]

Hi,

On the link above you still haven't removed the height:100% from #maincontainer and if i make the window smaller and then scroll to the content then the footer overlaps the page exactkly the same as in your image.

You must remove that 100% height form #maincontainer and then also remove the height from your sidebar as it is not necessary either.

Remove those then upload and then we'll take another look.

(You also have some broken code but i don't think its causing the issue but it ought to be fixed all the same.)

When you apply clearfix to an element that means it will contain all floats within that element. it doesn't specifically mean that the element will clear other floats itself but that the element will wrap its boundaries around any inner floated content.

Ok, sweet I did that, and it does resolve the content overlay issue. Now there are two other things:

1) (You also have some broken code but i don't think its causing the issue but it ought to be fixed all the same.)

What's the other broken code, I'd definitely like to resolve that

2) The main content does not automatically extend to the sidebar's height like it is supposed to. See below (URL: https://www.activetuning.com/store/login.php):



3) Also while we're on the subject, I do have one more question just to see if anybody knows why this is. When you scroll over the "Products" image on the top, in FF I have a dropdown list coming down. For some reason, it doesn't display in IE. Is there any obvious reason you can see why this is happening?

[Paul O'B]

Hi,

What's the other broken code, I'd definitely like to resolve that

1)Validator results

The main content does not automatically extend to the sidebar's height like it is supposed to. See below

2) Of course it won't - Why should it? CSS does not base one element's height depending on another completely unrelated element. Only tables do that.

You could add both the side borders and shadows of that content div to the main bg image that is drawing the left column and then they will go to the bottom at all times. You can then cap them off at the bottom using an element dragged up from the footer with a negative margin. Its a bit fiddly but it works.

Alternatively you could use the PIE layout buts its complicated and a little buggy and means that you can't have in-page links.

http://www.positioniseverything.net/...ut/equalheight

Also while we're on the subject, I do have one more question just to see if anybody knows why this is. When you scroll over the "Products" image on the top, in FF I have a dropdown list coming down. For some reason, it doesn't display in IE. Is there any obvious reason you can see why this is happening?

3) Where is the javascript routines that iE needs? IE doesn't understand hover on elements other than anchors and your menu is constructed by causing effects from hover on the list item Usually you would have a js routine for ie to mimic that functionality. If you got the menu from somewehere else then most likely thaey have the js that goes with it.

Alternatively use the suckerfish menus.

http://www.htmldog.com/articles/suckerfish/dropdowns/

Hope that helps

[Paul O'B]

Ah - I Think I found the script buried down hereor something to do with it)

 			<!--  ****** End Structure & Links ***** -->
 			<!--  This following script conditionally loads the hybrid verion of the menu for non CSS2 browsers.
 				  *Note: This script statement is required to open the menu in the visual tool!-->
 			<script language="JavaScript">nua=navigator.userAgent;ulm_ie=window.showHelp;ulm_ie7=nua.indexOf("MSIE 7")+1;ulm_strict=(dcm=document.compatMode)&&dcm=="CSS1Compat";if((ulm_ie&&!(ulm_ie7&&ulm_strict))||window.name=="hta"||window.name=="imopenmenu")document.write('<scri'+'pt language="javascript" src="imenus0.js"></scri'+'pt>');</script>
 			<!--|**END IMENUS**|-->
 		</div>

Is that path correct? It doesn't seem to be there.

[SystemLogic]

Awesome Paul, thanks again for the major help! I think I have everything figured out now