The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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: 12
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
Christian J
post Sep 22 2019, 12:50 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,239
Joined: 10-August 06
Member No.: 7



I don't see any attached files in your post. Note that you must both upload them to the forum server, and then insert them into the forum post.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
koffeeman
post Sep 22 2019, 04:00 PM
Post #3


Newbie
*

Group: Members
Posts: 12
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 #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
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
Christian J
post Sep 22 2019, 05:10 PM
Post #5


.
********

Group: WDG Moderators
Posts: 8,239
Joined: 10-August 06
Member No.: 7



QUOTE(koffeeman @ Sep 22 2019, 11:00 PM) *

i guess, bottom line, if this is because of a new html rule and ALL browsers will act the way Chrome is

AFAIK the HTML spec hasn't changed recently. Browsers have always behaved a little different in how they shape tables, though. No idea if/why Chrome has suddenly changed. I don't have Chrome, but my Chromium-based Vivaldi browser doesn't behave like that.

QUOTE
what do i need in my code to get the wrap around back?

I think the scrolling is caused by the lack of whitespace between the links, and the non-breaking-space entities inside the links. Considering that, Chrome's behavior makes sense to me --basically the row of image links is treated like one long word, rather than separate words (that could then line-break).

To fix it, I'd remove the non-breaking-space entities inside the links, and instead add real spaces between the links:

CODE
<a
href="dog.html"><img src="dog.jpg" width="240" border="2" title="01" alt="001"></a> <a
href="dog.html"><img src="dog.jpg" width="240" border="2" title="02" alt="001"></a> <a

That way you'll also get rid of the little "whiskers" between images: http://htmlhelp.com/faq/html/images.html#image-whisker
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 22 2019, 07:10 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
Joined: 9-August 06
Member No.: 6



Duh. I didn't notice the &nbsp;-es. I agree with Christian. The new Chrome look on things is the correct one, as I see it.

FWIW Iron, another chromium based browser, doesn't do it either, but I probably don't have the latest.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 22 2019, 07:21 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Sep 23 2019, 12:10 AM) *

To fix it, I'd remove the non-breaking-space entities inside the links, and instead add real spaces between the links:


Yes. Or linebreaks. Which will make the markup easier to read and maintain.

QUOTE
<a href="dog.html"><img src="dog.jpg" width="240" border="2" title="01" alt="001"></a>
<a href="dog.html"><img src="dog.jpg" width="240" border="2" title="02" alt="001"></a>


Won't be whiskers even with spaces inside the links because text-decoration is removed - that I saw. tongue.gif But IMO it's ugly and kind of unnatural to put spaces there. It's like doing...

CODE
Next word should be<em> emphasized</em>


... instead of...
CODE
Next word should be <em>emphasized</em>


No validator would complain and the lines render the same. It's just that the first version is icky. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
koffeeman
post Sep 23 2019, 12:58 AM
Post #8


Newbie
*

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



thank you, thank you, thank you.

changing the &nbsp; to a space fixed the image wrap around.

secondly, having the &nbsp; beside the image and part of the trigger to link to the next html was in the specs, client wanted the jump even if the user clicked on the space between images. but he only wanted one space, therefore the "<a" for the next link was at the end of the line. puting each <a ...></a> on a separate line generated more space than he wanted between images.

with your suggestions i will be changing the html being generated to ONE line of:

<a href="file.html"><img src="file.jpg" width="x" border="2" title="x" alt="x"></a>

this looks better, easier to code in the html generator program, and WORKS as intended - if the client insists on using the space as part of the link, i guess i'll have to tell him to get new users who know how to click on the image (i wonder how that will go over Monday morning)

again, thank you very much for your help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 23 2019, 02:06 AM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
Joined: 9-August 06
Member No.: 6



QUOTE(koffeeman @ Sep 23 2019, 07:58 AM) *


with your suggestions i will be changing the html being generated to ONE line of:

<a href="file.html"><img src="file.jpg" width="x" border="2" title="x" alt="x"></a>

this looks better, easier to code in the html generator program, and WORKS as intended - if the client insists on using the space as part of the link, i guess i'll have to tell him to get new users who know how to click on the image (i wonder how that will go over Monday morning)


But there won't be no linked space unless you put it inside A.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 23 2019, 05:12 AM
Post #10


.
********

Group: WDG Moderators
Posts: 8,239
Joined: 10-August 06
Member No.: 7



To make space clickable you might also add some padding to the links with CSS.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 23 2019, 05:21 AM
Post #11


.
********

Group: WDG Moderators
Posts: 8,239
Joined: 10-August 06
Member No.: 7



Strange, with entities my (ancient) Opera12 browser doesn't wrap, but if I remove the non-breaking-space entities and use no spaces, the images suddenly wrap in Opera12:

CODE
href="dog.html"><img src="dog.jpg" width="240" border="2" title="01" alt="001"></a><a
href="dog.html"><img src="dog.jpg" width="240" border="2" title="02" alt="001"></a><a
href="dog.html"><img src="dog.jpg" width="240" border="2" title="03" alt="001"></a><a

What does Chrome do with the above?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 19th October 2019 - 06:04 PM