This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
all three footers have the same html and css code but actiing differently in each of the three pages. some times its at bottom, at other page its in the middle, at the other its at bottom but making a gap between its previous div (#main)
jsfiddle.net/BBnzW/
jsfiddle.net/6cYQg/
jsfiddle.net/USSds/
any guess why?
Please only answer after making sure in jsfiddle that it works. I have done alot of tries before.
The code is above stackoverflow code limit of 30000chars, so cant paste here.
#main { position: absolute } is causing the footer to position in the middle of your content. And .w1 { padding-bottom: ... } and #footer { margin-top: ... } are producing the extra white space. But I don't think removing that will completely solve your problem.
Seems like you are trying to get a sticky footer. Try this http://jsfiddle.net/fL4XF/18/. Simple css and no extra markup. It works in IE7.
Here's another Sticky Footer that works in IE6. However, it needs extra markup. It's up to you.
Related
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
On the page:
http://sooniwill.be/personality-test/
You can click the "Show results" button to see a table with the test results. But as you'll notice, it bleeds into the footer instead of the webpage creating room for the table.
My stylesheet is here:
http://sooniwill.be/personality/main.css (see result-facets)
I know just enough CSS to get myself in trouble. I've done several web searches for similar issues and tried implementing some CSS to fix it. Every once in a while I'll make an edit that displays it properly, but then I reload the page and it overlaps into the footer again. Any suggestions?
There's some javascript that's applying height: 1723px to the #main div. If you disable that it will fix your problem and the #main div will expand to contain the entire table.
Edit:
Alternatively, you could add a rule to your CSS to override the height.
CSS
#main {
height: auto !important;
}
Try this:
In this css document
/* Clear Floats */
.col-full:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
delete the height on this line cause you are adding this class to your <div id="content">
<div id="content" class="page col-full"> at the 255 line on your main document
or try adding a static height
if that does not work add the css overflow: scroll and a static height
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I get a big whitespace on top of my page only in firefox. The weird thing is that other pages of the website behave as expected. I inspected all elements and compared the code but couldn't find anything wrong with it.
the webpage is http://www.veema.co.uk
I have found another topic which is somewhat similar:
White space on top of page (Firefox Specific)
but didn't manage to get any answer for my problem.
please add this css property , Its is easy solution Or Please use clearfix http://www.webtoolkit.info/css-clearfix.html
.container {
overflow: auto;
}
Space is because of margin-top: 60px; on stylesheet css/style.css in line number 29.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
Having IE7 only issues with spacing on this page: http://chantalorganics.co.nz/wordpress/newsletter/
The image below shows the large space above and below the feature boxes, and above the footer content.
I can see that many people have issues with margins in IE7, but I am using padding. I am also using Eric Meyer's reset.css. However, the content is floated which seems part of the problem.
Appreciate any guidance!
I found that this big blank space is because of margin-bottom added to 'entry-content' class. This class is added to div right under H1. You can remove that margin-bottom and add it to H3 with 'Find out why' text. In my case that solved problem :)
Btw. on Chrome when You hover on Tahini Cookies image the image move's down. That is weird...
EDIT:
To repair footer blank space add in styles display inline-block like below
#footer-container {
display: inline-block;
}
Big blank space above footer is because You have height added to #primary-menu and #container. I tried to remove that but then I noticed that after that menu is not height enough so I modified both heights to min-height: 563px (number is up to You). Is that what You are expecting?
I found help at http://www.cssnewbie.com/double-margin-float-bug/
And today I don't have that wierd jumping Tahini Cookies image. Can You tell me what was that and how did You repaire this?
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
The top two containers, containing the picture of beds are of unequal heights but I have set the width and height to be the same.
http://justbedroomdesigns.com/
Sorry to ask but I have no clue why they aren't the same height?
Edit: confusion in my questions seems apparent. I mean the top two that are side by side, not the two that are in the first column.
Thanks
You have a typo in your CSS file
#title {
float: left;
idth: 410px;
}
should be
#title {
float: left;
width: 410px;
}
First things first, you are using IDs on your page more than once. DON'T DO THAT. ID's are meant to be used once per page. Switch them to classes.
Second, ASSIGN A WIDTH / HEIGHT TO YOUR IMAGES WITH PIXELS. Otherwise you will have problems like this. I can see you are using Wordpress, and you can do so in the WYSIWYG on the back end. Percentages are going to be a bad idea if you aren't sure on the exact widths / heights of where the images are being placed.
Next, check how it looks across browsers, Firefox looks good, Chrome not so much. IE7 doesn't like much at all.
Ok. So besides that, a quick fix might be.
.post-block img {
width:338px;
height:248px}
Hope this helps.
They are the same height. The box on the left is partially obscured by the box below it.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have a sharebox(div containing social site links) that I've been using with a fixed position outside the main container. I realized that when I re-size the browser window by dragging the border it causes my sharebox div to move over the top of the container.
I looked through related posts here but don't think they apply to this so sorry if I missed it somewhere.
Here is an example of the problem: http://metrotechpc.net/test/positionedbox.html
Is there a way, preferably with pure css(no javascript) to make the div stay away from the container on browser window re-size so the user has to scroll over to see it?
I've tried giving it padding, margin, different positions(absolute and fixed).
I am actually inserting this code into the top of the page with genisis_hook function on a wordpress page so that may be an issue but getting it to work in a basic html like the example link would be a great help.
Thanks
There are a few issues with your CSS:
There's a typo in the rule for #container: postition: relative; instead of position: relative;
You should move the sharebox div inside the container div.
Add position: absolute to the sharebox div's CSS and then specify right: 70px to make it start from the right border.
Lastly, there's another typo in the sharebox's CSS: margin: left:20px; instead of margin-left: 20px