Mon, 2020-10-05 23:16
A number of pages on my site, including this one: www.literacysolutions.com.au/resources2/mind-maps.php
have a series of images (shown under the heading 'Sample Pages'), which are floated left. At most screen widths they float left as expected. However at some screen widths when the series of images wraps, the bottom row of images floats right. The top row appears to float left.
When this happens I have queried the code in the browser (Chrome & FF) and it confirms the styling is Float: left;
Would really appreciate any thoughts about what may be going on here and how to resolve this.
The relevant html is:
<div class="sample-pages"> <div class="imagetransform"> <a href="#"> <img src="/images/resources/mind-maps-and-organisers-1.jpg" alt="" class="one" width="100px" /> </a> </div> <div class="imagetransform"> <a href="#"> <img src="/images/resources/mind-maps-and-organisers-2.jpg" alt="" class="two" width="100px" /> </a> </div> <div class="imagetransform"> <a href="#"> <img src="/images/resources/mind-maps-and-organisers-3.jpg" alt="" class="three" width="100px" /> </a> </div> <div class="imagetransform"> <a href="#"> <img src="/images/resources/mind-maps-and-organisers-4.jpg" alt="" class="four" width="100px" /> </a> </div> <div class="imagetransform"> <a href="#"> <img src="/images/resources/mind-maps-and-organisers-5.jpg" alt="" class="five" width="100px" /> </a> </div> <div class="imagetransform"> <a href="#"> <img src="/images/resources/mind-maps-and-organisers-6.jpg" alt="" class="six" width="100px" /> </a> </div> </div>
The relevant html is:
#mainContent .imagetransform a img { -webkit-transition: -webkit-transform 0.2s ease-in-out; -ms-transition: -ms-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; float: left; margin-right: 10px; } #content #mainContent div.sample-pages img { margin-top: 10px; margin-bottom: 20px; }
Thanks
Fri, 2020-10-09 14:30
#1
Gallery issues
Your link returns a 404 page not found error.
I will make a guess anyway.
When you use float and a given line has to wrap, if a previous image's height is even one pixel greater than the wrapped image, it will block the wrapped one.
See http://gtwebdev.com/workshop/layout/inline-block-gallery.php
This is an old article, and you can ignore all the support issues unless you insist on supporting obsolete versions of IE. The new IE has adopted Chrome's rendering engine which works. The older IEs with the Trident engine don't. Don't worry about it; people using the old IE know by now it is crap.
If my guess is wrong, give us a good link.
Wed, 2020-10-14 01:19
#2
Hi Gary Thank you for the
Hi Gary
Thank you for the suggestion and apologies about the link. This one is correct: https://www.literacysolutions.com.au/resources/mind-maps.php
That certainly looks like it could be the issue, however I've amended the images on that page to be a consistent height and the problem still persists.
I've also made image heights consistent on similar pages (see below) but also still getting funky rendering at some browser widths. Strangely the wrapped row does float left as the window narrows further.
https://www.literacysolutions.com.au/resources/mind-maps-writing.php
https://www.literacysolutions.com.au/resources/supporting-readers-writers.php
Any further thoughts?
Regards
David
Wed, 2020-10-14 14:36
#3
Image #4 is the speed bump
Image 4 height computes to 156px, while image 5 computes to 155.75px. If the browser truncates pixel fractions, #4 is 1px taller than #5. Boom!
g
Wed, 2020-10-14 21:32
#4
I've never heard of images
I've never heard of images having computed values different from the specified dimensions. This would seem to be a unnecessary complication in browsers?
Is there a solution to ensure an image with a specified height is designated with that height in browsers?
These images were resized in Photoshop to have the identical height in pixels.
Thanks
David
Thu, 2020-10-15 17:14
#5
{width: 100px;}
Since you set an absolute width, the browser recomputes the height to maintain the aspect ratio. Remove the width property and things should just work.
g