Whitespace at top of webpage - html

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!

Related

How can I get rid of extra white space at the top?

it's me again, as im trying to learn I got to a frustrating part. First theres extra space enter image description here at the top with every browser.
I alredy tried body {overflow:auto;} in the css but aparently only works till certain point and desapeared the extra space at the right but not at the top. I already tried resetting the margins and paddings in my css but with no luck.
Also for some reason the cover image isn't showing.
Any sugestions?
You can check the prokect here: https://github.com/flukec777/MarsLandpage
You need to remove .col class from <div class="col span-1-of-2 bg"> on line 26.
Editing the .col port in css file can have effect in your other tags as well, as you have used that class elsewhere in the document too.
The extra space is being caused by the .col class in Grid.css. The .col class contains:
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
One solution to this problem is to remove or edit the margin property located in the .col class. You can do this dynamically through JavaScript, of course.
The reason behind extra space on the top is the div with class .col.span-1-of-2.bg inside header we can remove this space using margin.
html, body {
overflow: initial;
}
header .col.span-1-of-2.bg {
margin-top: 0;
}

Removing unwanted white boarder surrounding full page

My site is https://ized.online
I have tried setting the margin and padding of h1 and my divs to 0px in my CSS, but the border remains, and it seems like its either my main container div or the CSS properties of or , as inspecting the element links back to both of them in a non-descriptive form, and similarly trying to set margin or padding to 0 gives no result.
What would you suggest to remove the white boarder surrounding my page?
Each browser has its own set of preset css rules, on divs, body, etc. try using something like https://github.com/csstools/sanitize.css which removes them, or simply use
body{ margin: 0 }
It seems you need to remove default margins from the body: body{margin:0;}
In css you can see
border: (px style color)
And that should solve the issue if you delete that settings.
Also, border: none on the element should be an option, but probably you missed the border settings.
Bellow is CSS you need. I suggest you to look up how position: absolute works with properties top, bottom, left, right.
.text2 {
position: absolute;
z-index: 1;
bottom: 0;
color: grey;
}
body {
margin: 0;
}

Separation of head and body

I'm having some trouble with an area of space between the top of the browser window and my 'head' element, and the 'head' element and my 'body'.
Thus far, adding the following class has not resulted in any improvement:
.header{ <=== I have also attempted .head with no effect
position: absolute;
top: o;
}
I have also experimented with padding and margins, but simply cannot get the head content to "kiss" both the top of the screen and body content.
You can see a rundown of my HTML and CSS here: https://jsfiddle.net/2w3vzstf/
How do I overcome this?
body {
margin: 0;
}
The lower spacing you dont like is the #menu having a margin-top of 10px
Should sort out the spacing above the page.
Try, commenting out the top margin in the menu CSS definition.
#menu {
/* margin-top: 10px; */
Is this what you wanted?
JsFiddle
Your fiddle shows some markup problems.
<head> is not the place for any page content, even the "header". That should all go in the <body> tag.
I have modified your fiddle to show how the css can be modified to get the effect you want:
https://jsfiddle.net/1kn4tnjz/
Basically you set
margin: 0;
for the <body> and <div id="menu"> elements

Getting rid of white space below footer

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.

Why is there extra space on the bottom of page?

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
}