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;
}
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 have a really weird issue thats seen in Safari and Chrome. Somehow it works just fine in Firefox.
Look at this URL in one of the above browsers: https://musik.dk/therollingstones/videoer
If you scroll down, you'll notice a videothumb that floats very different than the rest. The "sinner" is the video starting with the name "Arrive in Japan" thats just a single pixel height than the rest.
I've looked into the inspector, but everything is exact as heigh and wide as all others (its the same template) and the image is 100% the same height and width. It could be a render issue, but its the same video all the time.
Can anyone figure that out?
Screenshot:
The floated article in question is "snagging" on the article to the left above it, which is slightly taller than the others. That's the problem with floating.
My advice would be to remove all of the float: left; declarations (there are two for desktop and various instances within media queries as well) and use display: inline-block instead, perhaps with a reduced right margin of, say, 0.5% (although these get a bit inaccurate).
Instead of right margins, you could apply text-align: justify to the container of all those articles. That will only mess up the last row if there aren't 4 articles, but that's fixable, too.
Or you could use flexbox, which is the modern way to do this, though not fully supported across the board yet.
The reason is due to that video having japanese characters in the name. For whatever reason, they render slightly larger, making the .ellipsis box 1px larger.
As mentioned by ralph.m I would make then display:inline-block; and remove the float, then set margin-right: 23.8%;
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/
Anyone know why these <li> tags that contain the thumbnail pictures are not stacking up appropriately?
This is blowing my mind away.
http://hqinternetsolutions.com/Websites/NuPhase/index.php?id=4
All the floats, are right, and there's enough width.
Update
I'm using Firefox 6.0
There's nothing strange here - the behaviour is expected.
Most of your lis have a computed height of 58px. However, some of them are slightly different, for example 64px or 57px. The reason for this is that some of the images are a different height.
The best fix is to simply make all the images the same height.
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: