gif not displaying on reader

[JLius]

Dear all

I used the following code in a book to serve as a scene-break. It is a gif image.

 <p class="stroke">

    <img src="stroke.gif" alt="Afbeelding"/>

  </p>

The CSS:

.stroke {
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  display: block;
  text-indent: 0;
}

It all looks okay on the preview in Calibre, but on my prs-t2 and prs-t3. I just see a blank space between the paragraphs. Does anybody know what I'm doing wrong here?

[RbnJrg]

I think your path to the .gif image is wrong; IMHO you should use:

<p class="stroke">

    <img src="../Images/stroke.gif" alt="Afbeelding"/>

</p>

Of course, I assuming you have your .gif image inside the "Image" folder of your .epub.

Regards
Rubén

[JLius]

Yes, stroke.gif is inside the image folder, but when I insert your code the .gif isn't displayed at all, I just get a "?" where the .gif should be in the calibre preview.

[JLius]

It must be something in the css, because in other instances in the book where I use

<img src="some image.jpg" alt="Afbeelding"/>

it works just fine.
CSS for the other instances is

.photo {
  text-align: center;
  text-indent: 0;
}

[Jellby]

Can you post the image file? There may be something wrong with it.

[JLius]

When I tried to post the file I got:
stroke.gif:
This JPEG image has the incorrect file extension.

So yeah, there is indeed something wrong with it. I replaced it with another image file and it works. Thanks Jellby!

[Jellby]

Have you tried simply renaming the gif as jpg?

[Ghitulescu]

When a file has its correct path, calibre displays it in blue. If it's not blue, the path is wrong.

[JLius]

@jelby: no, I haven't. I didn't name the .gif, I just got it of the internet. But now I made my own picture with paint.net, works just fine, deleted the .gif.

@Ghitulescu: it was blue in Calibre, problem was in ADE

[Toxaris]

Well, actually it seems the problem was not in ADE. The problem seems a jpg masking as a gif... Calibre is too forgiving sometimes...

[JLius]

Yes, so it seems.

Is there a way to make the .gif scale along when I increase my font-size on the reader?
And is it usefull to add "max-width: 100%" to the CSS?

[Jellby]

Originally Posted by JLius

Is there a way to make the .gif scale along when I increase my font-size on the reader?

Give it a size in ems, like "width: 5em".

And is it usefull to add "max-width: 100%" to the CSS?

It may be, if there is risk that the image would be too large. Don't specify height in that case, or you may end up with an squeezed image.

[JLius]

Okay, will try that, thank you.

[JLius]

When I use "width: 5em", the .gif is no longer centered.
I tried font-size: 1em instead, but that does not make the .gif rescale. Any other suggestions?

[Notjohn]

Originally Posted by Jellby

It may be, if there is risk that the image would be too large. Don't specify height in that case, or you may end up with an squeezed image.

Apologies for hijacking a thread, but I am reminded that in some viewers (Nook desktop app, I think it is) my generously sized cover image displays at its actual size, yielding only a fragment of the upper left. Should I be adding max-width="100%" to my style sheet to prevent such over-runs?

Thanks!