The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> has there been a change in the way Chrome renders images in html ?
koffeeman
post Sep 22 2019, 12:37 PM
Post #1


Newbie
*

Group: Members
Posts: 14
Joined: 17-September 19
Member No.: 26,991



the rendering of images in chrome has changed on my web pages.

i have web pages that display any number of images (and thumbnail images) on an html web page.

before: images would display until the rightmost edge of the screen or browser window was reached and continue on the "next line" making all images viewable (at least until the bottom of the screen or window is reached)

now: images continue to display on "one line" and a scroll bar is added to scroll the page to the images off screen/off window.

i have attached a zip file with directories and html and jpg & gif files

am i allowed to say that Edge still displays (as of today) the pages as i intended

Chrome *USED* to work this way up to about early September (that is: render as many images and wrap around to the next line as required). in my example change from full screen to a smaller browser window.

Has some html spec changed for rendering images ? Will Edge (and all other browsers) work this way in the future?
- or is this a bug ?
i have tried many other"max-width" type tags to no effect.

if this IS the correct action now, can someone help me with "what to add/what to do" to get it to work and display as many images it can (on multiple lines) regardless of screen width (1377, 1280, etc) or window width ?

thank you (and please tell me if i have included this question in the wrong section)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
koffeeman
post Sep 22 2019, 04:00 PM
Post #2


Newbie
*

Group: Members
Posts: 14
Joined: 17-September 19
Member No.: 26,991



thank you Christian, i was having problems earlier posting my question (from a coffee shop) - i did not realize it was posted.

instead of the .zip file (it is at home), here is an example of the html code that demonstrate the problem/change:

<!doctype html><html>
<head><title>hdg</title><meta http-equiv="content-type" content="text/html" charset="UTF-8"><style type="text/css">
a:link { font: 11px tahoma; color: black; text-decoration: none; }
a:visited { font: 11px tahoma; color: black; text-decoration: none; }
a:active { font: 11px tahoma; color: black; text-decoration: none; }
a:hover { font: BOLD 11px tahoma; color: black; text-decoration: none; }
body { margin: 0; background: #c8dcf0 url("gB.gif") fixed no-repeat; }
td { font: 11px tahoma; color: black; text-decoration: none; }
p { font: 11px tahoma; color: black; text-decoration: none; }</style></head>
<body><table border="0" cellspacing="3" cellpadding="3"><tr><td><img src="bkfldr.gif" border="0" onclick="history.back()" title="back" alt="back"></td><td>&copy; my page</td></tr></table><table width="100%" border="0" cellspacing="3" cellpadding="3"><tr><td bgcolor="#3b6d9f"><font color="#ffffff"><b>
title
</b></font></td></tr></table><table border="0" cellspacing="3" cellpadding="3"><tr><td><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="01" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="02" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="03" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="04" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="05" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="06" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="07" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="08" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="09" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="10" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="11" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="12" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="13" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="14" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="15" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="16" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="17" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="18" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="19" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="20" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="21" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="22" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="23" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="24" alt="001">&nbsp;</a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="25" alt="001">&nbsp;</a>
</td></tr></table><table border="0" cellspacing="3" cellpadding="3"><tr><td><img src="bkfldr.gif" border="0" onclick="history.back()" title="back" alt="back"></td><td>&copy; my page</td></tr></table>&nbsp;</body>
</html>

ignore dmyfle001.html and a) rename an existing image that you have to dmyfle001.jpg or b) do a changeall in the html code to an existing .jpg file you have.

my icon/control .gif should not pose a problem.

this html code still works correctly, as i intended it to, in Edge,
but works differently in Chrome, now - images do not wrap around
up to early September Chrome rendered the images the same way as Edge (they wrapped-around)

also, while in Edge, change from maximum screen to a smaller window (say, 600 x 300) and note how the wraparound works on the images - this worked the same way in Chrome up until early September.

i guess, bottom line, if this is because of a new html rule and ALL browsers will act the way Chrome is, what do i need in my code to get the wrap around back?
- help (and thanks in advance)

This post has been edited by koffeeman: Sep 22 2019, 04:07 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 22 2019, 05:05 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Is that really the whole source of the troublesome page? I think not.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:42 PM