How can I remove the space to the div and the top of the screen?
There are a few pixels that can be removed with:
margin-top: -8px;
But because not all users have the same screen, so probably for anyone on it will show a little differently. How do we fix it?
Most browsers set an initial padding on body, you can remove it.
html, body
{
padding: 0;
margin: 0;
}
This is probably due to browser specific UA styles,
try resetting the UserAgent with
html,body{
margin: 0;
padding: 0;
}
for better undestanding User Agent and resets read this
Related
is there really any way to hide scrollbar in Firefox, without manipulating the padding/margin without set to absolute, and without creating a browser specific css file, I just want to know is there any clean solution like this.
::-webkit-scrollbar {
display: none;
}
Unfortunately this only works for webkit browsers.
html { overflow: -moz-scrollbars-none; }
you can use a trick
add a parent to your elements with this style
html, body{
height: 100%;
width: 100%;
overflow:hidden;
}
#container{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 10px;
box-sizing: content-box;
}
this trick send the scrollbar out of the view , it's exist but user didn't see it
If the size of the content is less than the size of the window, usually Firefox will hide the scroll.
The problem that happens sometimes is that if the size of the content changes for any reason or the size of the window changes to the content, the scroll bar will reappear and cause a mutation in the page.
If you want the scroll to always be visible in Firefox, you can use the following command
html {
overflow-y:scroll;
}
http://www.remotegoatdesign.com/sayhey/pages/edit-valentines-marc-card.html
Doing this site for an assignment due tomorrow. In the proccess of making it responsive.
I am having an issue with the last color block, although its put into its container using percentages, it keeps moving out. In chrome its outside it straight away, whereas in Firefox its only when I resize. Although the difference is only a few pixels, so I'd assume its to do with the monitor size.
Any ideas guys? I'm stumped.
Try add this code snippet into your css file.
#tab-1 > div > div
{
width: 8%;
}
You can change the width.
Good Luck!!
Try using property " display:inline-table " for the class color_container
and give margin for the smaller color divs for space inbetween
try putting slightly smaller percentages(in the color block) and test it until it looks good. also it fits right in wider monitors as you say, because you have one css, that is best for wide screens. the point of responsive design is to have more than one media queries if the one you have breaks the design in smaller screens. so either make the color blocks really small, or myou should make more media queries
Your issue here is display: inline-block;. When you use it, it adds an extra space between elements. If you want to sort out this, you have 2 fixes:
a) negative margin-right
.box {
display: inline-block;
width: 8.74%;
height: 100%;
margin-right: -4px;
}
b) font-size: 0; on the container and default font-size on the elements inside
.color_container {
width: 98%;
height: 60px;
min-height: 60px;
padding: 5px;
background-color: #fff;
font-size: 0;
}
.box {
display: inline-block;
width: 8.74%;
height: 100%;
font-size: 1em; /* or what is your default font-size */
}
I've been working on a print page for a client. After playing around for awhile I've found I get an extra blank page. The unusual thing is that if I select "Outline Block Level Elements" in Web Developer for chrome, the extra page disappears. This is all the CSS being used on that page right now:
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
height: 296mm;
border: 1px solid black;
margin: 0px; /* this affects the margin on the content before sending to printer */
}
.print_A4 {
margin: 0mm;
padding: 0mm;
height: 270mm; /*A4 Size*/
width: 210mm; /*A4 Size*/
}
.A4_content {
margin-left: auto;
margin-right: auto;
margin-top: 44mm;
height: 210mm;
width: 165mm;
}
I've done a lot of googling but I can't see anything related to this. The body border clearly shows the div ending before the end of the first page, however I still get an extra blank page for some reason.
Could it be there is something adding only 1 pixel somewhere? Since you define the page to use full 270 mm height. Even one margin/padding/border would add a new page.
Does it still happen if you decrease this value? If not, then I suggest you take a small bit off this value (you don't use full height anyway.) You can add page-break: after to .print_A4 to prevent a next page from taking the little space left on the previous page.
Really late answer, but I think my contribute can help someone with the same issue I came across making use of CSS to setup a page for printing:
creating a dynamic html content and appending it to the body element with the purpose to print only such content, I realize that only Chrome (version 46) and Opera (version 32) creates an extra blank page at beginning while printing, this only happened when the content height was greater than the page height.
The solution provided by #mewiki solved me a 2-days-of-research-and-test problem.
Indeed Chrome and Opera seemed to have default margins and setting the following rule:
body {
margin: 0 0 0 0;
}
solved the frustrating behavior which was not encountered in other browsers.
Old question, but for people with the same problem here is my solution that fixed it for me.
I found out that the margin-bottom of the body must be set explicitly to zero (Chrome and Safari seem to have a default margin).
body
{
margin: 0px 0px 0px 0px;
}
div.page {
margin: 10px 10px 10px 10px;
page-break-before: none;
page-break-after: none;
page-break-inside: avoid;
}
For each to be printed page start with a <div class="page"> and set the page margins there so the page looks nice.
So because 27.9cm turns into something like 1423.03px I suspect it's causing the print renderer to display an additional pixel. Adding this to my page fixed the issue.
.page-a4 {
width: 21cm;
height: calc(27.9cm - 1px);
}
For anyone dealing with multiple pages. I added each page content in sections then used this:
section {
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
I had a similar problem where the introduction of a page break caused a blank page.
I don't have enough reputation to comment on wiredolphin's post, but using that suggestion, the following worked for me
html, body {
margin: 0 0 0 0;
height: 99% !important;
}
.page {
height: 100vh;
page-break-after: always;
}
I know this doesn't answer the original poster's question, but it's pretty old, and this might help someone.
Also, thanks wiredolphin! You led me in the right direction.
#page {
size: auto; /* auto is the initial value */
margin: 12px; /* this affects the margin in the printer settings */
}
I was facing the same issue and Neograph734's answer gave me an important hint.
I was also getting extra blank pages, and the only thing that worked for me was adding this rule to my css (for print)
*
{
box-sizing: border-box;
}
Then I no longer need to worry about having an extra pixel added when using margin, padding or border.
Once I've added that rule, I only had to adjust the boxes positions and everything worked flawlessly.
Whenever i try to make a div with width 100%, it does not go across the whole page, it leaves small margins on either side(top bottom left and right), i would like the div to go across the whole page, such as the header bar on the top of this page.
You have to set margin and padding of body element to 0. Like this (in CSS):
body
{
margin: 0;
padding: 0;
}
And also remember about setting margin of div element to 0.
This is a body margin from the browser reset margin and padding:
body {
margin: 0;
padding: 0;
}
Try a CSS Reset:
* { margin: 0; padding: 0; }
That's a simple ones, there are thousands of more advanced ones across the web.
Do you have the body margins set to 0px? In your stylesheet set body { margin:0px; }. If you want to keep the body margins, you need to adjust the width of the div. Something like div#idOfDiv { margin-left:-10px; margin-right: -10px }
Set the padding to 0 for the body tag:
body {
padding: 0;
}
There is no need for padding as the padding is on the inside of the div and is measured as a distance from edge. Just set margin to 0px if you want a specific margin set then do it like #sho suggested and set them individually.
i tried to display a bar at the top of the web page but the bar appears about 5 px empty place at the top, right and left sides of the page. The image was 1 black line and i wanted to repeat it from left to right. How can i fix it?
ul.postinge
{
width:auto;
position:relative;
margin:0cm 0cm 0cm 0 cm;
display:block;
height:105px;
background:url(images/bar.jpg) repeat-x top left;
}
Thanks
in some browsers the body and or html elements have margins or padding. Many experienced CSS developers use CSS resets, but all you should need is:
html, body
{
margin: 0;
padding: 0;
}
I typically discourage people from using pre-built CSS resets, as I believe it's more important to have a good understanding of what styles are being set and why. That being said, re-using a core stylesheet that resets styles to the site-specific format is a good idea.
That being said, you're liable to come across:
*
{
margin: 0;
padding: 0;
}
Which may help in this particular case, however you're likely going to come across unexpected issues involving forms and tables by using this "simple" style.
Use a CSS reset like: http://developer.yahoo.com/yui/reset/
You need to reset the body tag:
body {margin:0;padding:0}
Using a reset will allow you to "normalize" the margins and padding for your lists as well, among other things
Same as others are saying, only thing I'd add is list-style and border are other good things to reset too. Generally you never want things unless you specifically specify them.
* { margin: 0; padding: 0; list-style: none; border: none; }
What * does, is it's a wildcard that effects all elements on the page. It can be used in more specific cases as well, for example: if you have container with an id of container you could make all elements within it have a red border with the following code:
#container * {
border: 1px solid #F00;
}
body { margin: 0; padding: 0; }
Also:
margin:0cm 0cm 0cm 0 cm;
are we really measuring in centimeters?
also note the extra space after the last 0
ul.postinge { width: auto; position: relative; margin: 0; padding: 0; display: block; height: 105px; background: url('images/bar.jpg') repeat-x top left; }
add this style in ur css
*{margin:0; padding:0;}
you have to do this because every element has its default margin and padding. By doing this u r setting all elements default padding and margin to zero.