I have a problem with this site which I can't seem to figure out:
Link to site here
Somehow I get a white border at the bottom of the page.
When looking around people said it could be the padding so I added everywhere:
box-sizing: border-box;
and the only place it worked was making my width 100% Height is still more than 100%
I also tried but with no luck.
margin-bottom: 0;
Your footer element has display: inline-block. Add vertical-align: top to its CSS, this will remove that white space. (Otherwise it's aligned to the baseline by default, which creates some white space below that baseline)
if anyone still have this problem you can check if last div of page/bottom of page have "p"
All you need to do is p{margin:0;}
Related
I am trying to put an image in a container but for some reason, there is always a small additional space at the end of the image: Here is a fiddle with tests: http://codepen.io/anon/pen/sikAm. If you look at the last one in the right bar, there is no white because the container hides the overflow. This made me think that the problem happens because of the image, not because of the container. So the container's size gets that white because the image "pushes" an additional space inside. However, the image's size is correct and it has no margin that can add this at the bottom, so I might be completely on the wrong track:
img {
border: 0;
width: auto;
max-width: 100%;
height: auto;
}
I don't know what to do about this. What can cause that whitespace? What am I missing?
The problem is that, by default, images are inline elements, and its vertical-align property defaults to baseline. This alignment produces some space below the element.
To fix it, you can use
display: block [Demo]. This way the element will no longer be inline-level, so vertical-align won't apply.
vertical-align: middle [Demo]. This fixes the alignment problem. Other values may also work.
imgs are displayed inline by default, which creates spaces automatically for next line of texts.
Instead set the display to block. It will make those spaces gone.
img {
display:block
}
I want to make a box with content that is vertically centered, but also scrolls if the content overflows. I can use a table with vertical-align: middle to achieve the vertical centering, but td's can't overflow scroll, so I put a scrolling div inside the td and made it height: 100%. That's fine until I try to give the scrolling div some padding, which makes it too wide for the td so I give it box-sizing: border-box. Then all of a sudden there's a top and bottom margin on the div!
WAT!?
http://codepen.io/jessehattabaugh/pen/GIjiL
There shouldn't be any space between the green line and the red line, but there it is! If you change the padding on the green div the mysterious margin changes. It's as if the height: 100% is actually 100% - padding or something. If you remove padding, or box-sizing: border-box it goes away.
BONUS POINTS: why doesn't FF respect the table's height: 50% rule when Chrome/Saf do?
Update: some are suggesting that border-collapse or border-spacing fixes, but here's what it looks like after I apply those rules to the table;
The table cell's red border collapses with the blue table border, but the green div's border still has space above and below it. Maybe try resizing the height of the browser and see what happens.
Your browser is adding space around the table. In Chrome add:
table {
border-spacing: 0px;
}
I am trying to create a 100% fluid input box with a description on the left. I had it pretty much exactly how I wanted except it is now causing me problems when I put a border on the input box because it cuts it off on the right side.
Without resorting to using 99% instead of 100% width, how can I achieve this? Should I be doing this with an extra div instead of a "label"?
http://jsfiddle.net/GCt3z/18/
Indeed:
box-sizing: border-box;
Will change the box-model on the element, which would include border and padding inside of the width calculation.
Example
Just adding a padding to compensate for the border being cut off would solve your issue as easy as possible:
.fieldwrapper { overflow: hidden; padding: 0 2px}
http://jsfiddle.net/GCt3z/24/
On, e.g., this link: http://4ad.com/releases/20949, if you look at the album cover image in the top right part of the page, the black border is not quite square: there are a few extra pixels of height at the bottom.
As far as I can tell the image is 300x300 pixels in size. There are no obvious (to us!) sources of the extra 4.5 pixels of height. Does anyone know what could be creating such a discrepancy?
Since the image is inline, it's treated as text, which means a few extra pixels are added to the bottom as leading. Displaying the image as a block (i.e. adding display: block;) solves the problem nicely.
By default, images are displayed as inline-block and aligned with the baseline of the text.
The extra space is added for Descenders.
To fix it, use vertical-align: top or middle or bottom on the img. See http://jsfiddle.net/Gu6pG/3 for the difference.
Change image to be displayed as block element by adding this setting to your style.css file:
/* consolidate this CSS style */
#rightbox_packshot img {
width: 300px; /* from line 2896 in style.css */
height: 300px; /* from line 1498 in style.css */
display: block;
}
Alternatively you could use float:left (or right) in place of display:block which does make the image a block element but allows you to keep additional text (if you have it) inline.
http://phplist.xxmn.com/node/1
why the two red box which locates at the center of the page(under Tags:) doesn't have the border bottom? the two red box html label is
<span>
and i applied the
border:1px solid red;
to it. but under IE7, the border bottom isn't show, firefox is ok. the out div box (the id=vistor_comment)is too heigh than under firefox? why? how to alter it. thank you.
try giving it also display: inline-block;
I think it is because the line-height in which the span resides is lower than the height of the span including border, and so the lowest few pixels are cut off, in this case just enough for your bottom border to disappear.
Your parent container has a height: 20px;, I'm assuming that is and your various paddings are causing a height issue in IE7, therefore cropping a portion of your child container. Set an IE7 specific height to see if it rectifies the issue.