I was trying to position: absolute an element within a table, and found that for cells which span multiple rows, it would only reach the bottom of the first cell, and that this would only happen in IE. After some tinkering, it seemed the cause of this problem was that the table was nested in a div with display: -ms-flexbox, and removing this css meant the element could reach the bottom of the second row which the cell spanned.
Here is a JS Fiddle showing what I mean. In Chrome this would work correctly, in IE10, the green boxes aren't aligned to the base of the rowspan cell.
https://jsfiddle.net/LomLdtxg/8/
Can anyone explain how these two pieces of CSS interact, and why this happens? This seems to only be an IE explorer issue, is there some workaround / hack that needs to be done in order to have it render correctly?
Related
So I have a post-view that I can't get to work properly, and flexbox seemed like the answer from heaven that I was looking for. Except, I can't seem to figure it out properly no matter what...
If you look at this code, there's two vertical divs that should both stretch as more content gets added to either. The div where more content appears grows accordingly, but I want the other div to match in length, and so the bottom edges to be aligned to the bottom of the flex box. The repeating images behind the two founder buttons and the "LOTS OF TEXT" should then fill up empty space down to the bottom where the bottom-edge images are.
I've been at this for a good week now and can't figure it out... I'm sorry if this is a really simple thing or I'm being dense about css, I'm still learning. Any help would be greatly appreciated.
In your .forumviewright class, add this property:
height: 100px;
That brings the baselines together.
Just tested it in Chrome Dev Tools. It works. It also works in FIDDLE. But it doesn't seem to work in the CSSDesk sample you provided.
Whether or not this is the permanent solution you're looking for, you can let me know in the comments below.
EDIT
Your question begins with:
Can't get CSS flexbox to expand properly.
Actually, the flexbox is working fine. Both columns are binded to each other and expand equally, as per the flexbox rules.
If you highlight the child divs (.forumviewleft and .forumviewright) in Chrome Dev Tools or Firefox Inspector, you'll see that both columns are equal height and track each other regardless of content size on either side.
To illustrate this, I've added a background color to each column div so you can see that the flex is working properly. No other changes to the code were made. In this example, no matter how much content is placed in either column, both color-coded columns remain equal height.
https://jsfiddle.net/eympj0yq/2/
Of course, the real problem is that the child container boxes inside these columns aren't tracking each other.
This will require some fundamental adjustments to your code. For a better understanding of this problem and how to fix it, see this post:
Height 100% on flexbox column child
Hope this helps. Good luck!
I am trying to "mobilize" a site I am working on, I set it up so that the text boxes are in a column with display: flex, flex-direction: column. I then ordered the divs as they need to be displayed differently on a mobile device than on a regular browser.
This is my result: http://codepen.io/anon/pen/gpBvyg
It looks to be formatting correctly in FF so far as I can tell. But in Chrome, it doubles the height, at least it is for me. Is this a bug or am I missing something?
Let me know if I am missing any details to clarify.
Thank you!
You have br elements in between your div elements which are child elements of your flexbox. When you reorder the div elements you aren't ordering your br elements, which are occupying the top of the page and creating the blank space.
I suggest removing all of the br elements and trying to get your non-mobile page to look good without them.
Here is a codepen with all of the BR's removed. http://codepen.io/anon/pen/ZGqxzm
No space is being occupied at the top.
If you post some more code I can give you some more advice about how to have this work on both mobile and desktop more easily.
This little fiddle shows the problem I'm having.
The login form on the right looks fine under firefox (And even IE6) but when viewed in IE7+ or chrome/chromium there is a size difference.
This isn't an actual size difference, but an illusion created by some of the inputs becoming positioned lower than the others, and the overflow on the div cutting them off.
I thought it could be some invisible value such as firefoxes dotted lines but setting outline: none doesn't work either.
I've been debugging this all day and I don't know why it's not working.
Edit: Screenshot
Replace height with line-height.
http://jsfiddle.net/gnxRG/1/
Apparently vertical-align applies to the object relative to it's parent, not the objects children relative to the object. Setting vertical-align on the inputs to top fixes the problem (But I still don't know what caused it in the first place, odd)
http://jsfiddle.net/gnxRG/2/
i have a nested display table in a display table cell and i doesnt seem to apply the 100% height to IE 8 or 9 (even a extra containing div wont work), works fine in all other major browsers, here the jsfiddle it should explain everything.
http://jsfiddle.net/bDm4d/12/
try that in firefox/chrome/safari to see how it should look and check in ie8/9 youll understand the issue. Both columns should be equal height, since they are both with in a display table cell. The center (green in the right, pink in the left) have height to auto so it "should expand" like it does in webkit/ff.
A work around for ie would be great conditional or not.
Unfortunately, display: table-cell isn't supported by IE. Luckily, there are several workarounds to get divs with display: block to fill the height of their parents, creating the 'equal height' effect. I found this article to be very helpful when I was faced with a similar layout challenge. Good luck!
Though I had found the workaround for my problem, I still would like to clarify some things.
Here's what I wanted to achieve: a table with an image as separator between rows using generated content
Here was my first effort: http://jsfiddle.net/5Vqqf/68/
As you can see, the generated content in the table cells (td) doesn't seem to render anything. I expected a red line underneath each rows.
Second effort: http://jsfiddle.net/5Vqqf/69/
I insert some content to the content property, ie. content:".";
This seems to do the trick in generating the content. However, Firefox, unfortunately, doesn't render it right, in that the content is in relation to the whole page. (Notice the red line at the bottom in FF?)
Third effort: .../70/ (Same link but change the last number to 70 - Sorry, I don't have the privilege to post more than 2 links yet)
Giving the cells a float seem to fix Firefox's problem. However, the heights became inconsistent.
Last effort: .../72/
Finally, I resort to applying the content into the table rows (tr) instead. And this did the trick for all major browsers (excluding IE7, of course).
Okay, so here are my questions:
Why can't this work with an empty content like most elements do?
Why does Firefox render it in relation to the whole page (see second effort)? Is it a bug on FF side?
Is it a bad practice applying content into the table rows (tr)?
(Note: this question is regardless of the possibility of using background image directly on the cells themselves or using borders)