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)
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.
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>© 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"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="02" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="03" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="04" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="05" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="06" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="07" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="08" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="09" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="10" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="11" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="12" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="13" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="14" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="15" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="16" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="17" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="18" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="19" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="20" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="21" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="22" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="23" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="24" alt="001"> </a><a
href="dmyfle001.html"><img src="dmyfle001.jpg" width="240" border="2" title="25" alt="001"> </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>© my page</td></tr></table> </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)
Is that really the whole source of the troublesome page? I think not.
Duh. I didn't notice the -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.
thank you, thank you, thank you.
changing the to a space fixed the image wrap around.
secondly, having the 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.
To make space clickable you might also add some padding to the links with CSS.
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:
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)