This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
The CSS properties overflow-x and overflow-y should be well supported by all major browsers. So says w3. I've just made an example where we can see that they behave poorly when the visible value comes into play.
You can find the example code here on github or a working live example.
So the irregular behaviour that I see when it comes to the visible value is what I'm trying to avoid. I would like a vertical scroll (auto or scroll), and visible overflowing content horizontally. Have just tried this on Chrome and FireFox
How can I solve this, and is this the intended behaviour?
This is expected behaviour, see the w3 Spec.
What it boils down to is that in instances where it is not possible to have visible and hidden together, the visible is set to auto instead.
Related
This question already has answers here:
What is the box-sizing property for in CSS?
(4 answers)
Closed 3 years ago.
I am actually seeking A really simple and short answer, my discord friends kept telling me that I should write it every time I start programming a website and so on I did without actually knowing what it really does and Impacts.
box-sizing:border-box; defines how the elements are calculated i.e. height and width & do they really need padding and borders, these properties are taken care of box-sizing:border-box;. With box-sizing: border-box;, we can change the box model to an unusual way, where an element's specified width and height do not get affected by padding or borders. This has become so useful which helps in a responsive design that it's found its way into reset styles. You can find this list of browsers which supports box-sizing:border-box;
This question already has answers here:
Padding-bottom/top in flexbox layout
(3 answers)
Closed 7 years ago.
I'm experiencing some weird behaviour with Flexbox on Firefox (latest).
It seems to happen in a very special case, when a child element of a flex item, has an absolute positioned element inside it.
I've created a codepen demo, it works fine in Chrome, however, on Firefox, you'll see that the image disappears.
The demo is at its simplest form. So should be pretty straight forward to know what I'm trying to do (tip: chrome)
http://codepen.io/anon/pen/QwBaLJ
You'll see that the .Item-media element is set to position: relative; with a img inside it, set to position: absolute;
Has anyone experienced this on firefox and managed to find a decent solution?
Important! It's a responsive demo, only the mobile version doesn't work in firefox.
Try prefixing your '...'-flex css
-moz-box-flex: $values
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
We use flexbox heavily for an desktop application like looking web app and it has been working out great.
But with the latest Firefox Developer Edition (35.0a2) the layout does not behave as expected (it grows beyond the viewport): http://tinyurl.com/k6a8jde
This works fine in Firefox 33.1.
I would assume this has something to do with the flexbox changes described here:
https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility
But sadly I can't yet figure out a way to get the FF 33.x behavior in FF 34 or 35.x.
Any help regarding the layout or how to better isolate the problem is appreciated.
The relevant difference there is the "implied minimum size of flex items", a new feature in the flexbox spec. (or rather, a feature that was removed and re-introduced)
The simplest (bluntest) way to restore the old behavior is to add this style rule: * { min-height:0 } (or min-width, if you were concerned about overflow in a horizontal flexbox; but it looks like your testcase only has trouble with overflow from a vertical flex container).
Updated fiddle, with that change:
http://jsfiddle.net/yoL2otcr/1/
Really, you should only need to set min-height:0 on specific elements -- in particular, you need it on each element that:
is a child of a 'column'-oriented flex container
has a tall descendant, which you want to allow to overflow (which will perhaps be handled gracefully by an intermediate element with "overflow:scroll", as is the case here)
(In your case, there's actually a nested pile of these elements, since you have a single tall element inside of many nested flex containers. So, you likely need min-height:0 all the way up, unfortunately.)
(If you're curious, this bug has more information & more examples of content that was broken on the web due to this spec-change: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 )
It is more simple than that
Just give the flex children
.flex-child {
flex: 1;
overflow: hidden;
}
without using min-width: 0 hack
none of these fixes worked for me, even though they work. In my case, I was supplying a display: table-cell fallback, which seemed to be taking over. Using SASS, including it like this, the fallback works for IE without affecting FF:
flex: auto; // or whatever
.ie & {
display: table-cell;
}
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Please list CSS bugs/issues you encounter and how to solve them or a link to a site that solves them.
Please vote on what bugs you think people will encounter the most.
Thanks!
The Internet Explorer box model bug.
Double Margin Bug (< IE7)
IE6 doesn't support min-height.
You can use conditional comments to set height, which IE6 treats as a min-height.
Or you can use the child selector in CSS, which IE6 can't read, to reinstate height: auto on everything but IE6.
.myDiv {
height: 100px;
min-height: 100px;
}
.parentElement > .myDiv {
height: auto;
}
Using techniques like this can be problematic, but all popular modern browsers work in such a way that it's a valid technique.
Almost every HTML/CSS bug that you will encounter will be in Internet Explorer. IE6 has a lot of them, IE7 a bit fewer and IE8 subtantially fewer.
Having a proper doctype is a must. Without it the page is rendered in quirks mode, and especially for IE that is bad. It renders the page more or less as IE5 would, with the box model bug and everything.
Here are some common IE bugs:
Making the content of each element at least one character high. (Can be fixed using overflow.)
Expanding each element to contain it's children even it it's floating elements. (Can be fixed using overflow.)
Elements that are not positioned but has layout gets a z-index, although they shouldn't. (Can be fixed by making it positioned and give it a specific z-index, and do the same for all elements on the same level that needs it.)
Margins are not collapsed correctly. (Use padding instead if possible.)
Vanishing floating elements. (Give them a specific size.)
lots more... (including suggestions for fixes)
The most stable fix for most of the bugs is to rearrange the layout to avoid them, or to specify stricter styles (e.g. a specific size).
Chalk another one up for IE6:
DropDownList and DIV overlapping problem, with screen shots. The iframe fix is mentioned in the article. I'm not sure if there are CSS bugs that have consistent buggy behavior across all browsers.
here a link that list all IE known bugs and how to fix it:
PositionsEverything.net
Rumor has it that IE8 will not allow you to center elements with text-align: center;, only the text inside elements themselves. Instead, you must use margin: 0 auto;. If this is in fact the case, nearly all of the interwebs will implode.