Please note that I am not trying to resolve any specific issue, but trying to understand what's causing this issue.
I have set the width, height and display of some divs, but the height/width settings are not being honored. The text is also being pushed downward.
http://jsfiddle.net/k7esv/
1) Why does it push the text downward when height is set in table-row then BUT when height is removed, it places text at the top?
2) Why are the width/height settings not honored?
3) Why doesn't setting the margin property have any effect on them either?
http://jsfiddle.net/k7esv/1/
1) This seems to be a rendering issue specific to Firefox. Setting the vertical-align property on the divs fixes it. top, middle, or bottom all seem to work. I don't understand myself what FF is doing when there is a height but no vertical-align set; it might be a bug.
2) The width and height are honored, but they are subject to table sizing rules. When a table does not have enough room to give each of the cells the width they have specified, it will give more room to cells that have more content. This is what was happening with your example. If you look at my example below, you will see that when the parent element is wider than the sum total of the table cells' widths, the cells respect the width. The height should always work (except in the case of the FF rendering issue I mentioned above).
3) Table cells don't have margins. Use border-spacing and display:table on a parent div.
http://jsfiddle.net/chad/k7esv/3/
I will just add (seeing as it seems to have been missed) that setting the heights on individual table cells in a table row can be pointless, as all cells in the same table row will become the same height as the tallest cell in said row.
Having said that, heights may want to be added for when dynamic content is served to different cells, meaning their heights fluctuate. It may be that you want to set a particular cell to never be less than height X, which will only come in to effect when another certain cell has less content.
Related
Im working in a scrollable aside-menu for a website containg thumbnail images. I've been trying to get the images "overflow: visible" when hovering, so the image is not cut off by the container when scaled up.
The tricky part is, that I wish to maintain the possibility to scroll vertically (and thereby disabling overflow: visible). Any suggestions / hacks how to solve this? I haven't been able to find a feasible solution yet :(
Here's a pen of the code: http://codepen.io/anon/pen/lwaGv
W3C specification:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’. :(
I tried z-index and important rule too but both failed. Is this what you need?
http://i.stack.imgur.com/9uYOC.png
EDIT
Maybe you can have a look at this. I made it using multiple divs and fixed the width of divs so that they don't crop the photo on mouse hover. You can adjust the height of the containers. The background of the containers can be set to transparent.
http://codepen.io/anon/pen/pIEih
PS: If a scrollbar is needed, the inner(scrollable) div needs to be of width so that it can accommodate the photos when their size increases (onhover). Similarly the outer div's width has to be adjusted.
codepen.io/anon/pen/fhyAa
I'm using the CSS word-wrap property (set to break-word) to display a single no-spaced string in its entirety within a div element of fixed width and variable height. The div element itself is within a table cell <td>. The word break works as expected, breaking the word at the defined fixed width. However, in IE9 (with IE7 document standards), there appears to be some extra space after the div, causing the table cell to extend in width (not desired). The div width itself appears to be correct, as specified by its CSS. I used borders around the div and table cell to verify. I've tried explicitly setting the table cell width (and max-width) but neither approach works. This behaviour is not observed in Firefox or Chrome.
Edit: Added sample code here. The problem only occurs with IE (Browser_Mode=IE9; Document_Mode=IE7).
Apparently the td is making room for the full length of the word, as though it weren't breaking. You can prevent this by setting overflow: hidden on the div.
jsFiddle: http://jsfiddle.net/gmDpe/6/
I came across a similar problem once.
Have you tried to use table-layout : fixed on your table element ?
table-layout is a very little known but widely supported property which can be quite helpful in cases like this.
I want a layout with two columns, two divs, where the left one has fluid width and the right one has fixed width. So far so good - see jsfiddle below - however, the height of the right column must be in relation to the height of the left column. So that if I have some content in the fluid column and would resize the browser window, thereby increasing or decreasing the height of the left column, the right one should follow and getting the same height.
What I got so far: http://jsfiddle.net/henrikandersson/vnUdc/2/
Edit: Resolved, see comment below
Ah, the ol' two column layout. Unless you want to resort to JavaScript to track the height of one column to adjust the other, you're not going to be able to do it in the way you expect. Using height="100%" usually doesn't work in these situations, either.
What you can do is something like the old Faux Column technique. The div's don't resize, but you have a background image on the parent element that tiles vertically, giving the illusion of equal columns. Old school, yes, but effective.
You can use JavaScript to get the height of the left div, then set the right div to this height.
To get height of the left div:
var divHeight = document.getElementById('left').offsetHeight;
To set height of right div:
document.getElementById('right').style.height = divHeight+'px';
Your JSFiddle example fixed.
So, I got an answer to my question from #thirtydot (see comment above):
Do you need to support IE7? If not, you can use display: table-cell
I am working on a layout consisting of several nested Divs and I am ideally looking to get the content areas to stretch the height of the screen. This is pretty simple and I have done it in the past but not in this type of layout and am struggling with it. Instead of me pasting all of the code, I uploaded it to server that can be previewed.
http://www.danyuschick.com/theembalmed/
Any help would be great. I'm at my wit's end with this right now.
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
< percentage >
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
So whenever you use percentages as height the containing block of the element must have an explicit height to be considered.
Look at this link:
http://ninja-code.net/extra/stackoverflow_test.php
It uses a lot less DIV and will expand as you fill content. It also keeps your images as borders along the 'conent' - I wasn't sure if you were wanting it to repeat.
I didn't want to hassle with pushing the footer to the bottom though.
I have a <table> with CSS property of width: auto, which has a variable number of columns. The rightmost column has no width set. In IE8/Firefox3.6.12 the table resizes as desired according to the content width of that column. <table>). In IE7, it fills out to the right border of the containing . By setting the width of that column in CSS, I was able to get it to display with the same width across IE7/IE8/Firefox3.6.12.
I dont know if I understood right your question but, Did you try adding a width:auto; to THAT column in particularly???
What I would probably try If I would be working with tables in IE is to have most of the elements with a defined widht and height. Sometimes when there is no specification the elements doesnt display...
Maybe thats the problem...
If not, please add some code so we can see better your problem.