Please take a look here http://sources.freehosting.bg/1st-level.html
The footer overlaps the above content when the page gets "minimized" in the window. I have tried to resolve this for hours but with no luck.
Maximized: http://store.picbg.net/pubpic/99/2A/db640a6f9063992a.PNG
Minimized: http://store.picbg.net/pubpic/E4/96/2c1e86018b7be496.PNG
The floats are cleared, I have no idea what might be causing this. Please help me solve it...
Your setHeights is causing the problem, it is setting the heights' of #content and main .main smaller than their content so it overflows, if you take out the -20 it seems to work, but why set the heights any way as it would expand with its content.
function setHeights() {
var newHeight=$(document).height() - 290;
$('#content').height(newHeight);
$('.main').height(newHeight/*-20*/);
}
You need to remove the margin-top: -30px from #footer in your CSS.
Related
This question seems to have been asked a thousand times, and I've read through most of them and still no luck.
Here's the site i'm trying to work on http://exilion.eu
I want the top photo and the menu bar to scale to the browser.
I thought i managed to fix this, but for some weird reason the next element popped up inbetween, as you can see.
I'm styling a wordpress theme so that's why I'm not 100% sure of what I'm doing...
The elements are contained in
' #masthead '
and it has a min-height of 100%.
As does all of its parents.
Thanks for any help!
You could try:
#masthead {
min-height: 100vh;
}
EDIT: I think you may need to remove overflow:hidden from body, html to show the scrollbar.
I need a purple line along the top of the site. Instead of using an image I'm using the border-top property on the body. This works in full view but when I resize the browser window the purple line appears only in the viewport, when I scroll to the right I get a white space. Here's the fiddle so you can see what I mean. I've tried width: 100% on both the body and the container, but to no avail. Can someone suggest ways to accomplish what I need?
Thank you.
Not sure if this is the best way to accomplish it, but you can add position: absolute; to the body. This may have some undesired side effects.
If you know your documents width then you can specify a min-width.
body { min-width: 960px; }
Try the body border hack :)
http://css-tricks.com/558-body-border/
Designed for fixed position but should work for you as well.
Adding display: inline-block; to both body and container also worked. See http://jsfiddle.net/K5zVq/16/.
A secondary answer, related to skoh-fley's though maybe with less consequences, is to add float: left to the body: http://jsfiddle.net/K5zVq/20/. Though I think I would lean toward my first answer posted here (though you know your situation better than I).
On this site:
http://stmc.modulemedia.co.uk/HossIntropia
I have code that's generated by a CMS, I have stripped things back as much as possible, removing the .net code and things generated by the CMS, but still cannot see why the text (that starts Hoss Intropia...) is overlapping.
There are basically two DIVS LeftCol and RightCol, that I have moved from being side-by-side to LeftCol being above RightCol.
This is a project I'm taking over, so I'm limited as to what can be changed.
Thanks for your help!
I think you just need to increase the height of the div inside #LeftCol that is containing stuff.
Try changing the height on .menu to height: 480px. Or perhaps even remove the height.
div.Menu has a height property, and since the content is spilling out beyond that height, it overlaps the div#RightCol content.
if you remove the height from div.Menu, it works
settting the margin of the right cols should solve the problem:
#RightCol {
margin:120px 0 0 0 !important;
}
I followed this css-tricks how-to, to implement a sticky footer. I was successful but noticed that the (min)-height:100% has an negative effect on when I try to apply a margin-left of right to my primaryContent div.
At a certain height it causes a block of whitespace to show up. The only work-around I've found so far is to use padding instead of margin.
The height that this happens can be seen in my screenshot below. And I also notice if I remove the "background:inherit" line from #primaryContent div that the background of the container div stops at the same height that the margin white space problem occurs.
Any type of help is appreciated, links to the source code are:
default.css
index.html
reset.css
Screenshot:
very strage how they let that slip here is a fix :D
look for this in the default.css
html, body, #container {
height: 100%;
}
replace it with
html, body {
height: 100%;
}
Im not completely sure what the explanation for why this happens it could just be an css bug but there is always a work around.
bada-bing your done!
Click the "Reference Link" at the bottom of your example URL....it points to the original source: http://www.cssstickyfooter.com/.
If you click the "How to Use the Sticky Footer Code", you'll find that because the way their/his solution is written - padding for height attributes is proper - not margins.
I read through the documentation a week or so ago - thought I saw that caveat. <find>+padding will take you right to the notation.
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.