5 replies [Last post]
Ehmer2
Ehmer2's picture
Offline
newbie
Last seen: 3 days 4 hours ago
Timezone: GMT+10
Joined: 2020-10-05
Posts: 3
Points: 4

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 8 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

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.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ehmer2
Ehmer2's picture
Offline
newbie
Last seen: 3 days 4 hours ago
Timezone: GMT+10
Joined: 2020-10-05
Posts: 3
Points: 4

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 8 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ehmer2
Ehmer2's picture
Offline
newbie
Last seen: 3 days 4 hours ago
Timezone: GMT+10
Joined: 2020-10-05
Posts: 3
Points: 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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 8 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

{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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.