SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
-
Oct 11, 2006, 09:58 #1
- Join Date
- Jan 2001
- Location
- Northern VA
- Posts
- 194
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Anybody know why this is overlaying?
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
-
Oct 11, 2006, 10:12 #2
- Join Date
- Mar 2005
- Location
- West Yorkshire, UK
- Posts
- 211
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Regards,
Jamie Harrop
-
Oct 11, 2006, 11:51 #3
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try fixing your HTML errors and validating your markup
.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 11, 2006, 12:14 #4
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
-
Oct 16, 2006, 07:20 #5
- Join Date
- Jan 2001
- Location
- Northern VA
- Posts
- 194
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Jamieharrop
I tried messing around with the clearfix, but couldn't figure it out.
Originally Posted by drhowarddrfine
- 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).
-
Oct 16, 2006, 10:24 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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:
Code:<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>
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.
-
Oct 16, 2006, 11:25 #7
- Join Date
- Jan 2001
- Location
- Northern VA
- Posts
- 194
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
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:
Code:<div id="footer" class="clearfix">
-
Oct 16, 2006, 12:35 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
-
Oct 16, 2006, 12:46 #9
- Join Date
- Jan 2001
- Location
- Northern VA
- Posts
- 194
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
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?
-
Oct 16, 2006, 13:17 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
What's the other broken code, I'd definitely like to resolve that
The main content does not automatically extend to the sidebar's height like it is supposed to. See below
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?
Alternatively use the suckerfish menus.
http://www.htmldog.com/articles/suckerfish/dropdowns/
Hope that helps
-
Oct 16, 2006, 13:23 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Ah - I Think I found the script buried down here
or something to do with it)
Code:<!-- ****** 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.
-
Oct 16, 2006, 13:36 #12
- Join Date
- Jan 2001
- Location
- Northern VA
- Posts
- 194
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Awesome Paul, thanks again for the major help! I think I have everything figured out now
Bookmarks