I'm using the bootstrap 3.0 framework and no matter what I do I cannot get the little white space after the footer to disappear.It only shows in Chrome though, in IE it's fine.
I've used min-height, overflow:hidden,different margins still nothing.
http://www.bootply.com/XonUL6Vq2C
I'm sure there is some simple fix that eludes me.However it is driving me mad.
Can anyone offer a solution to this?
In your CSS, you are using 50px margin for both the top and bottom of the footer.
Remove the margin from your footer.
If you want to apply margin only on the top of the footer, use this:
footer {
margin: 50px 0 0 0; /* or just use: margin-top: 50px;*/
}
UPDATED CODE
You are using min-height and padding bottom in #cfoot.container. Remove that and you'll get as you expect.
working demo
Just add a negative margin-bottom until the white space is filled.
E.g
footer { margin: 0 0 -50px 0;}
It sometimes also happens when you forget adding a closing tag of a section.
Related
I am having an issue with around 20px of whitespace at the top of my webpage. It is hard to see but when you inspect element you can see the little gap at the top.
www.craigengland.co.uk
I have adopted
* {
margin: 0;
padding: 0;
}
but to no avail
Any suggestions?
I have tried "normalize" locally and it still doesn't fix the problem.
svg tag content after the body tag and before the header tag is causing that. Remove that whitespace issue will be fixed or if you want to do this using CSS, Add the following code to your css file.
svg{display:none;}
Add style="display: none" to your svg element and it should work.
Remove margin-top from header.
header {
margin: 14% 0 0; /* remove this from main.css */
}
well, while inspecting your web page. its show this whitspace in the header because of the margin you have given to it in the css
margin: 14% 0 0% 0%;
when I disable the margin you have given, the white space is no more to be seen . Header tag looks fine without that margin setting you gave.
I don't see any other error!
I have looked for other answers on SO that should answer the question, but I'm having a hard time finding relevant help.
On my webpage, I have two nav bars, one each for the top and bottom. My problem is that my "body" is getting eaten up by the two nav bars. I would prefer to have the content scale to the edges of each nav bar rather than extending into them.
The sample code can be seen in this fiddle: http://jsfiddle.net/qLjcao3p/
Thanks for all help.
The reason your content is displaying under the header and footer is because the header and footer have fixed positions. These elements space is not taken into consideration when rendering your page. So the content will be generated as if the nav are not there.
Adding margins as suggested will solve the problem by giving extra white space that will allow you to scroll from beginning to end for your content.
Are you using jQuery mobile?
Adding some margin or padding on the body will help. If that is what you were looking for.
// em or rem values recommended
body {
margin:60px 0 40px 0;
}
You have only to add margin to body like:
body{
margin : 60px 0; // 60px for top and bottom side and 0 for left and right side
}
Try this example
Add a padding to bottom and top of your container:
#bodyContent {
padding:60px 0;
}
60px looked fine. That is really the hight of your Nav.
Please take a look here, on my code. I am trying to make a responsive web page, but there is weird margin from top and bottom of first article column. I am talking about margin between top navigation and content column and between footer and content column, and I just set 10px margin to right column like below.
.content {
width: 69%;
float: left;
margin:0;
padding:0 10px 0 0;
}
I am new to web designing, and I don't know what wrong I am doing here. Please help me
Using
.topcontent{
display: inline-block;
}
should solve your problem.
You're experiencing the way margins collapse together. Set the top-margin on the H2 tag to 0, and the bottom-margin on the last paragraph to 0. Then to restore the white space, add top and bottom padding to the article element.
More info about margin collapse here:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
This is the code I am working with:
http://jsfiddle.net/BTYA7/
I can't work out why the toolbar (blue) is extending past the right side of the text box. There doesnt seem to be any padding or margin a miss.
I applied it in blue and pink to help show it:
.uEditorToolbar {background-color: blue;}
Can anyone give some guidance please?
The uEditorToolbar has two extra pixels of padding. width:100% sets the width not including padding. If need the padding, you can remove the width:100%, and the blue bar doesn't extend too far.
Is that what you need, or am I missing something.
The default layout style as specified by the CSS standard means that the width and height properties are measured including only the content, but not the border, margin, or padding. So the combination of width:100% and padding: 0 0 0 2px; is pushing the content out by 2px.
The default display for <ul> is block so the width:100% is probably unnecessary anyway.
If you remove the width:100% or the padding-left will fix the problem.
Alternatively, the CSS3 box-sizing property can be used to correct the layout by using box-sizing: border-box; (if all browsers you are targeting support the property).
There appears to be a 2px padding. If I remove the padding then it looks ok.
.uEditor .uEditorToolbar
{
list-style: none;
width: 100%;
height: 48px;
margin: 0;
padding: 0 0 0 2px;
}
http://jsfiddle.net/BTYA7/5/
Remove width:100%; padding: 2px; from the .uEditor .uEditorToolbar CSS class. It will work.
I'm trying to make a sticky footer for a site I'm working on and I can't get rid of an extra white space at the bottom. I see it in Chrome and Safari (I haven't tested other browsers yet). When the page first loads, you don't see it, but if you scroll down there is about 2-3px of just white space. How to I make it so that my footer sticks to the bottom?
This is the site:
http://ec2-23-23-22-128.compute-1.amazonaws.com/
And this is what I'm trying to accomplish:
How do I get rid of the extra white space at the bottom of the page?
NOTE: I know there are a couple of other rendering issues, but the only one I'm worried about right now is the extra pixles on the bottom of the page. I've been playing with negative margins, 0 margins, paddings, etc all day and I'm not getting anywhere with it :/
It disappears when you give the image in the div with class "img-wrapper" display: block. This is common with images, I see you are doing this for a css reset:
* {
margin: 0px;
}
I would suggest against this. A proper css reset or normalize would go a long way to easing these kind of headaches.
Edit: I know you said it's a work in progress, but just as a heads up if you haven't noticed the window also scrolls when you don't need it to. This is the issue:
#b-container {
background-color: #F1EFE6;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -170px; // originally this was 0 auto -150px
}