I don't get it. I have …
body, html {
height:100%;
margin:0;
padding:0;
}
However my browser is always showing the vertical scrollbar even if the content is not as hight as the window.
In the following screenshot you can see that there is this little spacing on top if I inspect the body. The htmldoes not have this spacing.
Any idea what could cause that?
You probably have an element with margin-top as one of the first children of body.
Read up on collapsing margins.
Purely as a simple test, set padding: 1px on body. If the gap goes away, I'm right.
Late to the conversation, but thought this might help some...
If this a WordPress based site, it is likely that WordPress is adding:
html { margin-top: 32px !important; }
It is doing this in order to make space for the admin bar, which, apparently, for some reason isn't showing up.
To resolve this, add the following to your theme's functions.php file:
add_filter('show_admin_bar', '__return_false');
I had this for a completely different reason: I was inadvertently inserting textual characters (specifically, semicolons) in the head, which were somehow translated into the body, where they were hidden by other markup and/or css. But, the space remained.
In my case, neither the body itself, nor any obvious first-child elements had any top margin or padding. Extra text did show up as the first (textual) child of the body, however it did not exactly correspond to the text I needed to remove in order to solve the problem. Specifically, I saw the following text, with a lot of extra white-space:
<body>
";
<!-- rest of stuff here -->
Note that I am using an HTML templating engine (specifically Razor), so all bets are off as to how this transmutation from ; ; to "; occurred.
try
body {
margin: 0;
padding: 0;
}
Related
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
I'm new to CSS. I've got a deceptively simple problem. This is a fiddle of a simple page.
http://liveweave.com/c6j68I
The objective is to show a fixed 900px white div centered against a coral background.
I've tried to achieve this using two divs maked #outerWrapper and #wrapper.
However, the whole page still seems to have a white background, which seems to be connected to the body tag. (Please use the fullscreen mode to see it).
If I give the body the background color of the #outerWrapper, again, the color appears on the top and bottom of the page too, which is undesired. (Please uncomment the CSS of body to see this.)
I've tried using the article tag; using negative margins; and changing dimesions of the body tag. Nothing seems to work.
In simple terms, a want a 'columned' look: coral-white-coral; instead of the 'boxed' look I currently have.
Please help.
Just add a style for the body in your CSS and set the margin to 0px, like so:
body {
margin: 0px;
}
Because most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
If you want to change it, you can just do this, add it on your css
* {
padding:0;
margin:0;
}
Want to be more complete?
use normalize.css. It resets a lot of default values to be consistent across browsers.
Try adding the following
<style>
body,html {height:100vh; width:100vw; padding:0; margin:0;}
</style>
Body has default margins set by the browser (most browsers set default styles to different elements and they can vary depending on the browser) as seen below in developer console.
Note: In most browsers you can open the developer console by pressing F12 on your keyboard:
Just set the following css to avoid it:
html, body {
margin: 0;
padding: 0;
}
Demo: http://liveweave.com/EzWH0o
We are using twenty sixteen word press theme.
The theme has lot of header and footer spaces which would like to remove.
Eventhough we didn't provide any banner or any other images it still have more spaces before the table gets generated in the page or page content
any suggestion on how or where to fix this?
Thanks.
You can just right click on the empty space annoying you and click inspect in chrome. It will show you something like this...
Here... Faint Green outline is the padding... this is causing that annoying whitespace,
.site-header {
padding: 5.25em 4.5455%;
}
Just kill it with CSS, you need higher specificity ( Learn more here https://developer.mozilla.org/en/docs/Web/CSS/Specificity ) for beginners simply prefix body before selector and it will have higher specificity and will work like a charm...
body .site-header {
padding: 0;
}
You can also use !important...
.site-header {
padding: 0 !important;
}
Using !important is not a good practice coz it breaks the heirarchy but since you are designing the site not writing a plugin it's up to you ;)
You can use this for any element, try yourself for footer 😉
You can add the CSS by using a plugin like https://wordpress.org/plugins/simple-custom-css/
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
I have a web page that prints correctly on Chrome, Safari and IE, but has the followign problem on Firefox:
It prints just the header on the first page. The rest of it is blank.
The actual content is shown only on page 2.
Googling a bit about it i found that the "float: left" style is causing it.
If i remove the "float: left" it prints ok, but it does not look as it is supposed to as it needs to display 2 columns beside each other in print as well as on screen.
Is there a solution to this problem?
Thanks.
Hi I had a similar problem but I had an extra blank page at the END when I printed. IE would do the same thing, so I figured I had CSS issues.
Long story short, I found that if you have a paragraph as the first element in the body element, and the paragraph has the 'margin' property set in CSS, it printed a blank page at the end. Interestingly, it only printed a blank page if there was only one page. If I removed the margin from the style OR added an element before the paragraph it did not print the extra blank page.
JAB
I found that setting the page height in your HTML a little smaller than indicated in the printer's page height prevents the blank page issue.
Try using a print style sheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
In this style sheet you will be able to remove the float:left for print and not have it effect the layout in the browser.
Al
The extra blank page in Firefox can also be caused by the use of display: flex and min-height: 100vh, which I had used to create a sticky footer.
To fix, just add a print style setting display: block and min-height: 100%.
Had the exact problem - header followed by a blank page or half a page. If your layout relies heavily on tables, it could be a vertical-align rule set to anything but middle or baseline.
Setting the rule to middle as shown fixed it
#media print {
table tr td {
vertical-align: middle;
}
}
I have my content in a table and this fixes the problem.
tr { page-break-inside: avoid; }
After a lot of tries, I found that if you have page-break-after: always; Firefox would show an empty page at the end if you're applying it to the last element. You can use something like :not(:last-child) to prevent it.
I also had a blank page as my FIRST page.
I got around this by using:
position: absolute;
top:0;
This forced the content to the top of the first printed page (you need to apply it to whatever you want to be at the top of the very first page). I am using tailwind css and had the print:hidden class on all of my other layout items. (such as nav and footer)
#media print {
.print\:hidden {
display: none;
}
}
I think the problem was an artifact from switching to print mode was remaining somewhere. When I switched to the print emulator in Firefox dev tools there wasn't anything above it looking at the box model, so I was stumped. luckily the above band-aid solution worked like a charm.
Would have liked to been able to figure out the root problem tho...
For those who use Bootstrap:
In imported _print.scss file they set
page-break-inside: avoid;
on tr element. That was causing extra blank first page in my case.