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 ..
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.
I know there are many questions about this and I have looked at all of them. I have a site where I need the left <td> to extend by 100%. I have all the containing blocks set to 100% and this works great in chrome and safari. However it does not extend to the base of the screen in IE or Firefox. I have a rough sketch of it here since the code is too long to paste. I have also included the css in the page to make it easier to view.
I used these two posts but neither has fixed my issue.
CSS 100% height in ie
Div 100% height works on Firefox but not in IE
Am I missing a container or is there a special way to make this happen in IE and Firefox? This is my first time messing with 100% height in css.
It's because of this line of css in td.left:
display:inline-block;
Remove it so it stays the default: display:table-cell. Then it works in IE.
I strongly encourage you not to use tables for this sort of layout though. Here's a good tutorial that will show you how to do this using divs+css: http://learnlayout.com/
The best way I can think of is wrapping both panels with a bigger absolute DIV and that way you can give the inner div a (working) style like this:
height: 100%;
I've made an example here:
Result - http://fiddle.jshell.net/E8SK6/1/show/
Code - http://jsfiddle.net/E8SK6/1/
The issue I'm having can be found here:
http://jsfiddle.net/boblauer/5uVrK/
If you look at it in Chrome, you'll notice that when you scroll to the right, it stops immediately at the right edge of the last green box. However, in FF and IE (haven't tried others), it will correctly scroll a bit past the last green box.
Since .lane-container has a width of 2000px and the boxes should take up a width of 1700px, there should be 300px extra to the right of the last box, but in Chrome there is not.
Any ideas on why Chrome behaves differently than the others, and how I can work around it?
Setting the display to inline-block instead of float: left fixed the issue for me. Floating block level elements takes them out of the dom flow. That doesn't really explain why this doesn't work, but this is a workaround. I always prefer inline-block over floating left.
Edit
After some more jsfiddling, it seems chrome isn't showing the container div's full width because it's empty. As soon as you add a border around lane-container it works as expected, although, since you're floating the inner divs left, they aren't in the dom float and lane-container appears to have a height of 0.
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 had quite a few problems with IE6 and our website.
http://www.sweetlets.com/w/solutions/click-stream/features/
At the very top the teaser boxes have scrollbars in IE6, but not IE7, IE8, FF or Chrome. Does anyone have an explanation for this?
Same effect in the footer with the 3 boxes in one row. Also scrollbars. Mathematically all fits into the row of 960px. I added up paddings, margins, borders and width and even kept some pixels left...
I simply don't know what is wrong. Any ideas?
Not sure if it'll fix it but I'd put a clear: both on #cf_content and remove overflow on the following:
#main
#content
#cf_content
#cf_content_teaser
You can set overflow:hidden; on the #cf_content_teaser to get rid of the scrollbars. Dunno if it's worth investigating further if that resolves the issue. You can apply the same to whatever other div it's happening on.