Printable Version of Topic

Posted by: derekweaver Nov 29 2020, 08:41 AM

I am learning responsive design for a site we are working on. Everything is in a local directory, all .css, html and img are in the same folder. When viewing this in Safari everything looks as it should.

However, Opera, Chrome or Firefox show only one img (the cover, which is jpg). The problem links are .tif files. Thought that becasue they had layers it was the problem, so I flattened and resaved. Nope.

Then tried saving the image as .jpg and relinking. Nope.

Then tried to empty cache. Nope.

This is beyond frustrating.

I have loaded most css, the html, one image that has a broken link.

Anything else that is needed I will do.


Attached thumbnail(s)


Attached File(s)
 index.html ( 3.29k ) Number of downloads: 59
 screen.css ( 1.34k ) Number of downloads: 39
 master.css ( 56bytes ) Number of downloads: 40

Posted by: pandy Nov 29 2020, 08:47 AM

The problem is the file format. For the web you are basically limited to JPG, PNG and GIF. TIF files are also large, so that's another reason they wouldn't be a good choice for a web page, even if browser support was there.

Posted by: derekweaver Nov 29 2020, 08:48 AM

Turned off "Ad-Blocker" in Chrome, Nope

Posted by: derekweaver Nov 29 2020, 08:50 AM

It is 40kb

Posted by: derekweaver Nov 29 2020, 08:51 AM

OHHHH, it is a TIF file, DUH what an idiot I am. Thank you.

Posted by: pandy Nov 29 2020, 08:58 AM

Posted by: derekweaver Nov 29 2020, 08:59 AM

Therein is the problem with allowing graphic designers anywhere near html.

Thank you, it has been making me nuts and it was so obvious that a head smack would probably not helped.

Posted by: pandy Nov 29 2020, 09:05 AM

I can provide that too. Maybe it does help.

Posted by: derekweaver Nov 29 2020, 11:21 AM

That only made more questions, that'll teach YOU.

I am trying to change one image three times using srcset. About 2/3 through the html:

<img src="logo.png" srcset="logo_450.png 450w, logo_600.png 600w" sizes="(max-width: 750px)">

"Logo" has two lines of text, "logo_600" has four lines of text and "logo_450" has six lines of text.

For some reason only "logo_600" is loading in all the break points.

css and html are in the first post.

Posted by: derekweaver Nov 29 2020, 11:30 AM

It looks as if I should be using <picture> to do this, Yes ?

Posted by: pandy Nov 29 2020, 11:32 AM

Do you mean want to display all three images, one after the other? Like kind of a slide show?

As I understand it sourceset is for providing different image sizes for different devices/resolutions. You list what you have to choose from and the browser chooses the most appropriate one.

Posted by: pandy Nov 29 2020, 11:33 AM

I think it works with both PICTURE and IMG, only not as I think you want.