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.
Related
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;}
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;
}
Borders are supposed to go outside of the width x height of a div. But this jsfiddle - http://jsfiddle.net/L33cK/5/ - shows borders being added to the width x height of a div when they're transparent. I would expect the line in the jsfiddle to be 1px when given transparent 1px borders, but it's 3px.
Does anyone understand what's going on here? I'm looking at it with Chrome.
Thanks
div#line {
margin-left:100px;
width:1px;
height:200px;
background-color:red;
border:1px solid transparent;
}
The borders are transparent, so you can see the div's background through them. It's that simple.
In this updated fiddle I've added another div that has a dotted border.
background:red; border:10px dotted yellow
And you can see the background of the div between the dots of the border.
So if you want the borders to be the colour of the body background, the solution is to not make them transparent, but to give them the same background-color as the body. Or, use margins rather than borders.
Since the div is in content-box mode(*), the CSS width property does not designate the total outer width of the div, but its content area. The outer width is equal to width plus the size of the padding plus the size of the border. (If you give the div some padding as well, you will see that the outer width gets even larger, even if the width property remains 1px.)
(*) You can change this behaviour by using the box-sizing property. See MDN page on how to use it and what vendor prefixes to apply. Basically, with box-sizing: border-box you tell the browser that width is to be taken as the outer width of the element rather than the content area.
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.
I have a problem positioning a DIV with Chrome on this page. When I enter text into the red DIV it moves it down (doesn't occur in Firefox).
This shows how it was before putting why into the red DIV.
The height of the boxes is not being considered for vertical alignment (perhaps because the height is applied by the id and the display:inline-block is being applies by a class?). To solve this just add vertical-align:top; to your .box class.
BTW, since the heights are all the same, it might be easier to just put these in a container div to control the width and use float:left;