Display: table-cell does not lineup - html

Just wondering why the containers here do not line up.
Could anyone help?
Thank you.
http://codepen.io/anon/pen/jpmtz

If you add
.column { vertical-align: top; }
then it will line it up on the top. It won't be lined up on the bottom because they have different heights. If you make the heights the same with the vertical-align: top, it'll all be lined up perfectly.

they do , it is just that you style inside element rather than the one dispalyed as table-cell;
Set vertical-align to column or even background:
http://codepen.io/gcyrillus/pen/FCltm

They do, in fact, line up vertically. Since the headers (h3 compared to h4) are of differently sized fonts, and there is 0 padding or margin, the top edge comes down.
Try changing the "recent posts" box to h1 (from h4), and you'll line up again, and hopefully that will show you the answer.

Try this:
.column { display: table-cell; vertical-align: top; }
Demo.

this is happening because two adjacent cell you are using with different size of header and your alignment is center...for second cell make align:top;

Related

Force row of images

I'm more of a designer than a coder, so apologies if this question seems bone-headed and the answer obvious.
Anyway, with that caveat out of the way... I'm trying to create a page where the images are in a row that extend off the right edge of the screen, so that the user can scroll to see more images. Other interface elements like the logo and nav are fixed in place.
You can see the page here: http://werewolf.phantomlimb.net/
and the CSS here: http://werewolf.phantomlimb.net/wolf.css
To remove the spaces between the images I have floated them left.
My question is that in order to prevent the images from wrapping, even with a height attribute on the container div and display: block I have to give the div a width value, in this case 4000px. A width of auto for example makes the images wrap onto a new line, which is what I don't want!
As I may not always know the exact width of the combined images, is there a width value I can use that will force the images to stay in a single row, or some other CSS trick?
Many thanks.
J
I would use inline-block for this kind of stuff.
Something like this:
#imgHolder{
font-size: 0px; /* Remove the spaces between the images */
white-space: nowrap; /* Prevent the images from wrapping */
}
#imgHolder img{
display: inline-block;
vertical-align: top;
height: 654px;
width: auto;
}
Here's a working example:
http://jsfiddle.net/155ukfwp/

Incorrect vertical alignment in WebKit of inline elements

I have a small definition list that I would like to center on the page both horizontally and vertically in four columns. I have the html-element set to display: table and the body to display: table-cell; with vertical-align: middle;.
See this Fiddle. If you change the font-size on line 27 to 4em; (or anything larger than 1em), you will see that on Chrome the content jumps to the wrong position, while it was correct before. On IE the font-size does not matter, it stays in the correct position either way.
If you set the dl to display: block, it works on both browsers as well but I visually need them to be displayed inline.
Am I doing something wrong or is this a bug in Chrome. If so, how can I work around it?
Add
vertical-align: top;
to your dl. Check here http://jsfiddle.net/qVcLE/6/ . Unfortunately display: inline; etc causes that type of issues.

Space under <img> tag

I have this annoying space under my picture for no reason.
I'm using www.getskeleton.com as the framework.
HTML code
<div class="four columns bottom">
<div class="box">
<img src="images/picture.png" title="" alt="">
</div>
</div>
CSS code
.box{
border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/
}
Although I'm sure this has since been resolved, I believe none of these answers are correct (or at least, the link from the "accepted" answer is dead).
The way to deal with this spacing issue (and why it isn't set in util libraries like normalize I'm not sure) is vertical alignment of the image. This'll solve it for HTML pages when using the HTML 5 doctype. Oddly, when using e.g., HTML 4.01 doctype, images will not exhibit this errant space below behaviour.
The fix:
img {
vertical-align: top;
}
I hope that helps someone who may have run into this problem.
Edit: Some extra info I noticed after writing this and subsequently researching why normalize doesn't set alignment on the img tag; the default alignment for images is vertical-align: baseline; - that's the behaviour which introduces the space underneath. Normalize's author believes this behaviour is consistent cross-browser, and so has decided not to 'normalize' this. I suppose that makes sense if you wanted text sitting next to an image to align properly with any subsequent lines of text. Some people also prefer to use vertical-align: middle as opposed to top to address this issue - so you can vary this as you wish.
However, regarding baseline alignment, in the case where I had an image that was so big that it was higher than the line-height, I'd probably be floating it or some other behaviour anyway... but there you go.
I've used the vertical-align stuff for a while now without any incident. But as always, do ensure you test for any repercussions for images no longer being aligned to the baseline.
Try this:
.box img {
display: block;
padding: 0px;
margin: 0px;
}
Try this: .box { font-size: 0; }
Your image need to be floated. Try this:
#yourimage{
float: left;}
As mentioned, more information would help a lot but i have no doubt that it is padding that is causing the border to go out of the image, reason put very simply being
margin pushes outside the element
padding pushes inside the element
as it were.
Fix then:
.box {
padding-bottom: 0px;
}
//to be sure that the image doesn't have any padding, even though OP said the .box img fix didn't help
.box img {
margin-bottom: 0px;
}
It's an age old quirk - the whitespace from your line formatting is causing the gap. Add
<br /> after the image.
Try this
.box{
display:flex
}

Vertical Align on <table> slightly off center... any idea's why?

I'm trying to center a table vertically within another div, but I'm getting results that seems to be off by a few pixels vertically (in FF at least).
Is there some default values somewhere throwing the vertical align off?
Example:
http://jsfiddle.net/9hRnp/
Note:The code is produced by Jquery and is to show the problem only so that's why i have width and height values on each <TD>
Adding a vertical-align:middle to the findpath-content id should solve your problem.
#findpath-content {
display: inline-block;
text-align: left;
vertical-align: middle;
}​

Horizontal line inline-block IE7

I would like to put 3 horizontal line in a row.
Does anyone know how to put an horizontal line displaying in inline-block in IE7 ?
Here is my CSS:
hr.small {
width: 28.9%;
margin-right: 6px;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
height: 3px;
border: 0px;
color: #7c8690;
background-color: #7c8690;
}
but it doesnt works.
here is the JSFiddle Link: http://jsfiddle.net/sRuz3/6/
If anyone has a solution.
Thanks a lot.
Here you go: http://jsfiddle.net/eq3Z2/
It works in IE7 also.
Granted, they aren't HRs. They are DIVs. Trying to render the HR as an inline element
is tripping up IE7 but I don't know of a workaround.
Does it have to be inline-block? Can you not simply float them and set a height if necessary?
Edit - Example:
hr.small {
float:left;
width: 28.9%;
margin-right: 6px; /* Choice: Use border instead or halve the margin for IE7 and lowwer (double margin float bug). */
height: 3px;
background-color: #7c8690;
}
Edit again - Question:
Is this going in a fluid layout and how big is the container? You are setting a dynamic width but a fixed margin, this will cause issues in small scale and introduce unwanted white space to the far right in large scale. If it is a fixed area then consider using a fixed width.
It seems there's a solution if you can wrap the hrs in divs.
Set the div's to display:inline (we could use spans instead but hrs are not valid in spans)¹ and also give the divs hasLayout via zoom:1
See http://jsfiddle.net/YqKDJ/1/
¹ As an aside, there's a reason why hrs are not valid in spans and it's relevant here. An hr is not primarily a way of drawing a horizontal line - it has a specific semantic meaning of "Thematic break". It makes no sense to have two or more hr elements with no content betwwen them - there's nothing for the second thematic break to break from. If you want multiple horizontal lines for presentational purposes, you should use CSS to create them, along the lines of #Cynthia's answer.