I keep having some weird spacing issues between divs in Firefox when compared to Chrome. Firefox is computing the height of an element greater than the content inside of it.
I am already using a CSS Reset.
Tried changing box-model, float, display, margin, padding and nothing produces any results.
Seen in Firefox:
Seen in Chrome:
You need to set width for this div which is under CARD NUMBER line. Set it upto 290px.
<div class="pure-u-sm-1 pure-u-8-24 reason"></div>
width:inherit on the end div worked here.
The grid system you have chosen uses flexbox for WebKit and inline-block for Firefox, with not totally removed whitespace characters between blocks. The current version of Firefox supports flexbox (unprefixed), too, so you can add
display:flex;
flex-flow:row wrap;
to .pure-g to get the same display in Firefox as in Webkit.
Also, this grid systems relies on magic constants like -0.43em (supposed to be the width of the whitespace character but not equal to it in any of the popular fonts). It's better not to rely on such things, so try other grid systems with no such 'dark magic'.
Related
I've tried searching for this but found nothing. Might be using the wrong keywords. I made a gfycat of the problem.
https://gfycat.com/BrownHighErin
I have content, I click on it in IE, and things resize. Everything is flexbox display model, there are no anchor or button tags, it's just an image on the left and a table on the right wrapped in some divs. The project has a massive number of pages all using flexbox. This is the first I've seen this happen. I have been able to fix it with pointer-events: none but I'd rather not use that solution.
Another thing, the IE inspector does not show a change in the width of the element when this happens. It always shows the pixel width that the image should be, but not what is displaying.
Works in Edge, Chrome & Firefox
Without seeing your code, it's impossible to say for sure what the issue is. If it's only happening in IE, it's likely a compatibility issue. IE only has partial support for flexbox, as shown on CanIUse.com.
Some of the know issues with IE and flexbox include:
IE 11 requires a flex-basis property to be added
IE10 and IE11 containers may calculate any flexed childrens' sizes correctly if the container has a min-height but no height property set, and if the container uses display: flex and flex-direction: column
IE10 defaults flex to 0 0 auto, not 0 1 auto
See the CanIUse flexbox page for more details.
It seems Chrome is the only browser rendering my code the way I want.
If you notice my position:absolute is changing as the border size increases (in FF and IE) however is unaffected in chrome (which is exactly what I want).
Here is a demo Please try it in chrome/ie/ff to see the difference
The primary purpose of all of this black magic is simple, I need the .thumb:after to always be in the center of .thumb . If you know a better way let me know.
Edit: Fixed -- Checked in FF and Chrome (Don't have newer versions of IE)
http://jsfiddle.net/AyCKU/8/
Took out margin: 0 auto, just left it at using %'s for top and left and negative margins.
Basically: Used one of the methods for Vertical centering in CSS (Using 50% and negative margins) and applied it to both vertical and horizontal centering.
I messed around a little in Chrome + FF and noticed if you change:
.item .thumb:after
If you change the positioning to fixed and center it properly it will work in both browsers.
Give it a shot in IE and let me know if it works ..
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!
I've created a dummy layout for my latest design, but when I resize the window in ie7 to check that the min-width works, it kicks the content area to below the sidebar, whereas in all other browsers (including ie6) it behaves exactly as it should do.
Demo Link
Can anyone see what the problem is that's causing this random couple extra pixels that kick it off?
Yes, there does seem to be a bug in IE where the min-width elements are getting float-like clearing behaviour.
You can easily avoid it in this case by applying the min-width to the #container instead of both the child elements. (It is in general best to put layout-related min-width fixes on the highest possible parent element.)
(Also, you don't need the float-100%-width rules on the bar/content.)
I've got three columns inside of a div that is the full page width. The two on either side are 25% width and the one in the center is 50% width. This layout is working fine except in IE6 where at certain page widths it bumps the right column to the next line. Is there a fix for this? Maybe an alternate way to layout a page like this?
Edit: I'm using a cross browser inline-block hack that works great in FF, IE, S, Chrome. I'm pretty sure this quirk has to do with the way IE calculates widths on fluid content, and happens due to miscalculation (rounding maybe?). I've put up an example here. Try slowly adjusting the window width in IE6 (maybe later versions too) and watch as the green DIV gets bumped down at certain widths.
Thanks,
Brendan
It's a rounding problem in IE6's box model. Generally, you can't have a combination equal 100%. Try making your values sum to 99% of total width, and it should work fine. This solution has always worked for me.
It sounds like a piece of content in that column might have a defined width which is more than what the 25% of page width it is given. Can you provide CSS examples?
EDIT: IE6 does not support inline-block which could also be the issue.
EDIT 2: I looked at it on a 1680x1050 screen in IE6 in a virtual machine. When I drag the width slowly over time from about 800px to 1600px, it randomly moves the right column around. I suspect it's an issue with the hack that you're trying to use. Your code is so simple that I think you should consider researching an alternate hack instead. I've also never seen the *<property>: <value> hack. What's the * do, all compliant browsers?