I have a slight issue with a site I am developing. I have body content colliding with a footer div, getting partially hidden behind it, and pushing out the footer content.
I've managed to duplicate these symptoms on only Chrome/Win, Safari/Win, and Safari/Mac.
You can view the page here: http://www.pacarmy.ca/blog2.php
I have validated the HTML, and the same page tests fine in IE9/win, FF/win, and opera/win.
Googling hasn't helped me, and the closest thread on Stackoverflow I've found wwas:
css chrome issue at footer cross browsers (IE,FF,Chrome)
Which isn't really the issue at all.
Can anyone advise? Speculate? Anything? :)
Thanks.
Your post is floated and parent elements never expand to contain floated elements so you need to "clear your floats". One way to do this is to add 'overflow:auto' to your section element. That causes the parent to expand on overflowing elements. However, I did not check to see if that's the best place or method to use for when you add more posts or elements on that page.
You can Google or search on SO for "clear floats" for more info and methods.
Related
the site www.sterlingfoundations.com has an intermittent overflow problem with Google Chrome. It sometimes takes three times of reloading to see the problem but it pushes all of the content below Navigation (currently id="wrapper") into a narrow column with scrollbar on the left margin (it happens on all the pages of the site). The default.css gives "wrapper" an overflow: auto. When removing the "default.css" file, the fonts go to default but the layout issue is solved. So it has to do with the CSS overflow in "wrapper" I think.
One thing I noticed is the navigation bar looks like it squishes the longer phrases like "Private Foundations" and "Financial Professionals" and forces them to wrap to two lines when the problem occurs. Not sure if that's related. Any ideas? Thank you!
It doesn't look like you need overflow-y:auto on div#wrapper.
My website has a footer overlap in IE7, while fine in all later browsers.
here's the link:
http://www.kindreviews.com
i have tried finding a solution via google, but answers seem so variant.
Please help!
Thanks,
zeem
You've got bad encoding in your copyright area: Markup Validation of kindreviews.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code. Fix that and then revalidate and see if there are other code errors.
And you have a low answer acceptance rate; see the FAQ https://stackoverflow.com/faq and accept answers to your old questions.
I have to say that the site layout is a bit messy: container DIVs with smaller widths and heights than the contents, too many negative margings, and the like..
For instance, the DIV #cuber_div containing the flash banner, having an height set to 515px, is overlapping the text, so the upper part of text isn't selectable.
Besides, the #footer DIV is outside of the #wrapper DIV, so relative positioning in buggy browsers such as IE < 8 gets messed up.
My personal suggestion would be to fix the mark-up and re-style the whole site from scratch.
It may take time, but far less than keeping the site like that and having it to break up every once in a while for seemingly no reason, and then go figure..
It's up to you to decide.
My situation looked just like the problem discussed here:
Clear float issue
That is:
"I have a page with the standard navigation bar on the left and the content area taking up the rest of the horizontal area to its side. …
This works fine except when the content area itself has floated elements and I try to use clear. My goal is to displayed the clear element right after the content area floats but instead it gets shoved down below the nav area."
but the solution given there didn't work for me. I've read about the issue; the following page seems to discuss most of the solutions:
http://css-discuss.incutio.com/wiki/Clearing_Space#Clearing_space_beneath_floated_elements
but none of these solutions worked for me either.
In IE8 only, I get a large gap above the table, all other browsers that I tested are fine. I'd really appreciate another set of eyes.
The page is at:
http://www.diabetesgoaltracker.com/home.html
Thanks.
Your webpage is now served in quirks mode, meaning the browser renders it not according to the spec. Add a doctype, such as <!DOCTYPE HTML> to the top and that should resolve it.
The problem is a footer on a web page that seem to not follow the correct flow like it does in FireFox. The problem feels like it is an Internet Explorer related bug, because the layout will "magically" snap into place when i move the mouse over the link "Legg til i handlelisten". On pages where the "description" part of the page is longer then the left column, the footer displays correctly. From what I can gather the bug is only active in IE8 when its running in "IE8 Compatibility Mode" or "IE7 mode". I am not able to recreate the bug when running IE6.
I was wondering if anyone is able to find a solution to this bug, maybe some CSS property I can set or a tag that needs modification.
These two images show the error and what its supposed to look like:
http://tinyurl.com/layout-error
http://tinyurl.com/layout-fixed
The page referred to is here: http://tinyurl.com/yb9h34d
Edit: Clear: both; doesnt seem to do anything to solve the problem.
Yes... it looks like a float-caused problem.
Try adding this line into your HTML, just before the footer:
<div style="clear: both;"></div>
I think it is expecting an item that clears the floats.
Try floating the div.container or remove it, as it is useless and a mild case of divitis.
In older browsers, the float property in CSS removes the height from the element. Therefore an element which is floated to the left or right which would normally have a height of say 100px would now have a height of 0px and whatever content is below it would move up to fill that space where the content is supposed to be. Most browsers have fixed that error by now, but it still reappears in even the modern browsers. There is a very simple fix that you can add to your footer container in the CSS:
clear: both;
This will cause the element to clear any boxes that may be floating around and start fresh on its own line, or should anyways. It never hurts to try.
Read more about the clear property: http://www.w3schools.com/Css/pr_class_clear.asp
What happens exactly is that the left column gets shorter by a line when you hover the first link in the leggtilihandleliste div, and it gets longer by a line again when you hover the second link. It's only the left column div that is affected, not the link, the list containing the links or the div containing the list.
I don't know exactly why this is happening, but if you specify a height for the div containing the links, it stops happening (eventhough it's not that div that changes size).
Why does DIV#footer have display:none on it?
Anyway, if you float: left on .footerWithRightAndLeft you should be ok.
You can inspect things in IE if you hit F12, in case you didnt know. It's not as good as firebug, but it's something.
I have problem with displaying adsense ads in ie7
google adsense adds an iframe to display ads with id google_ads_frame1 with position:absolute the problem is this absolute position makes the ad stay there even if the page size changes (in ajax)
so how can i force it to have position:relative, i tried wrapping it in div and applied every possible property like positions, display, wrapping the whole content in a table, floats, zoom, height & width.
i also tried adding a css below the adsense
<!--[if IE7 ]>
<style type="text/css">
#google_ads_frame1 {
position:relative;
}
</style>
<![endif]-->
can anybody please help me, this thing has made me crazy...
the ads got unpositioned only when the page resized so everytime a function that cause change in size of the page i added one more javascript to it.
var googleAds = document.getElementById('googleAds');
googleAds.style.paddingTop= '1px';
googleAds.style.paddingTop= '0';
it you have better solution please let me know
you should be able to wrap the iframe with a div set with position:relative. are the elements on the page that change size with ajax set with position:absolute or floated as this may cause issues too.
Josh
I've had the same problem and I 'fixed' this by removing a 'background-color' on a wrapping div. Don't ask me why, this has to be the weirdest IE bug ever :)
The wrapping div encompasses almost everything on the page and is fairly unrelated to the table cell that contained the AdSense banner, I have absolutely no idea why this background-color had any effect on the positioning of the banner.
I found this 'solution' by just stripping the page bit by bit. At one point almost all HTML was gone but the problem still persisted. I the removed the CSS file after which the banner behaved normally. Then started stripping the full CSS until I found the line that (seems to) have caused the problem.
Making a proper test case of this is still somewhere on my list but haven't come around to doing that. Also pretty unsure that this is a generic solution. Main advise for now: If you see this problem, remove all CSS and see if that fixes the problem, if it does figure out what part of the CSS seems to be responsible and get rid of that :)