http://dev-lbs.vaimo.com/building-materials/bricks (This is a development environment website)
The product grid works fine on Chrome and Firefox but not Safari. It breaks in two ways:
.products-grid: display: flex; - Flex seems to add a tiny bit of space to the left of the first item, causing the first row to drop the last item down to the next row
The item heights don't match one another. This seems to break down on the .item > div styles - this div should take up the full height of the .item box, with the .product-info part of the item growing taller to take up any excess space.
I'm messed around with this for a while but can't get anywhere. I was hoping it might just be a case of adding something like 'min-width' somewhere, just some weird quirk to how Safari deals with things. Has someone encountered these kinds of Flex issues with Safari before, who may know the cause of the issues here?
Thanks
Related
Can anybody explain to me why the two boxes "Badrum" & "Sovrum" get on top of each other in Safari but in all other browsers they lay side by side.
It used to work in Safari but I can't remember any changes I've done that should affect this.
http://linusfrimodig.se/karin/
I could not figure out the cause, however if you change the flex-flow property to nowrap, it should work (overloading the line 15118 of flatsome.css):
.row, .gallery {
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
Based on what you mentioned, I can only think of 2 scenarios where such a thing can occur. This question is still too vague to answer, and to get more accurate feedback please provide us not only your problem, but also your code and what you have tried so far.
The scenarios are:
1) The <div> or whatever content "below" the overlaying div is floated, and there has not been a clear: attribute added to the immediate next <div>, or is not optimised for the browser which you see the problem in (-webkit-, -o-, -moz-).
2) The margin of the second <div> is great enough that it lays side by side the floated <div>, or otherwise doesn't get optimised by that browser you're using, and ignores the margin and overlays the first <div>.
Do provide us some code, anything you've tried, as you've mentioned "It used to work in Safari but I can't remember any changes I've done that should affect this.", which means you have tried something.
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.
If you were to look at the following website in Chrome, you would see the printers in 2 rows. Which is how it is supposed to be. But in FireFox and Internet Explorer the 4th product is aligned on the right by itself.
I have tried everything I can think of, and scoured the web. I would really welcome any help anybody can give me regarding this issue.
http://www.thewideformatgroup.co.uk/Products/general-office-use
Change float: left to display: inline-block on the items (.shop-main li, to be exact).
If you float items to do this, then the height of the items needs to be exactly the same. In this case, the items are rendered in such a fashion that the 3rd item is slightly less high than the second. That is causing the fourth item to float next to the second as well.
If a bit exaggerated, it looks like this. Notice how 3 is slightly less high, causing 4 to be stuck behind 2 as well.
This might be caused by a weird scaling of the product image, for instance, or by any other rounding difference. Also, it might look good at first, but change as soon as a user starts zooming in or out, or messes with their font settings.
By using inline-block, you basically create a long text-line of items, that will wrap as soon as the line is full. It is a better approach when you want a wrapping list of items like this, because you won't at all be affected by the rounding problems I mentioned above.
Now, you might be tempted to solve this rounding issue so every block is the same size. And you might do that as well, because it might look a bit weird when the red line that appears on hover is shifted a pixel or so. But start by using inline-block, so you prevent incorrect wrapping, so even if some unpredictable rounding errors occur, they surface only in detail and won't mess up your entire page.
Have you tried to make the elements float or give them a relative positioning? The way i'm seeing it is that they inherit their positions from the parent div but on ie and firefox it's rendered differently.
I've had this problem and the solution for me was to make everything float left and give it margins and clearing as needed, the end-result was that it had a certain margin from the top so the elements always remained at a certain distance from the top and each other while maintaining their position
Try adding height to the .inner class:
.shop-product-small .inner {
border-bottom: 3px solid #FFFFFF;
height: 140px;
}
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 have had the following problem for a while and I am really not sure how to solve it.
The problem can currently be observed here: http://www.androidpolice.com/2009/11/16/the-not-so-good-the-bad-and-the-ugly-my-list-of-20-problems-with-htc-hero/ - feel free to use this for Firebugging.
There are 2 notions here: a table of contents (toc) and notes. A note usually takes 100% of the post width and everything is fine.
However, when a note appears next to a toc, the toc starts overlapping and covering the note (I set z-index:1 on the toc because otherwise the note covered it, which was even worse).
It's interesting to point out that the text of the note doesn't get covered by the toc - only the note div itself does.
In IE7, it's even worse - the note div jumps down to under the toc and leaves a lot of empty space (2nd screenshot).
So, how can I solve this? The ideal solution would have the note div occupy 100% of the visible space - i.e. it would resize itself to fit right next to the toc when needed.
Here are some screenshots for future reference:
In IE7:
I've had about the same problem. Though I can't help for your IE7-specific issue, using overflow: hidden on the left column did the trick for the layout overlapping (and did not hide data). Specifically, in your case, you need to:
Remove the position:relative code on the relevant .toc and .note elements;
Set width:auto on the .note elements;
Set overflow:hidden on the .note elements.
Note that this will not work under IE6, but meh, it's IE6. It'll look ugly, but people using IE6 these days are forced to, and besides, it's not making the website unusable.
The result in Safari: