Problem with Look Inside

[Notjohn]

Rats. I got adventurous with floating an image, using this style in the CSS:

img.mug {
width:20%;
min-width:130px
height:auto;
float:left;
margin-right:0.5em;
border-style:solid;
border-width:1px
}

Works fine in the book, but on Look Inside sample what I get is the image floating left, and on a level with the top of it the FIRST LINE of the text. The second line however drops down and begins on the line immediately below the photograph.

Is there a solution to this? I suppose I could start the paragraph below instead of to the right of the photograph, so it would look (a bit) better on Look Inside, at the expense of looking not nearly so neat in the book itself.

[Hitch]

Originally Posted by Notjohn

Rats. I got adventurous with floating an image, using this style in the CSS:

img.mug {
width:20%;
min-width:130px
height:auto;
float:left;
margin-right:0.5em;
border-style:solid;
border-width:1px
}

Works fine in the book, but on Look Inside sample what I get is the image floating left, and on a level with the top of it the FIRST LINE of the text. The second line however drops down and begins on the line immediately below the photograph.

Is there a solution to this? I suppose I could start the paragraph below instead of to the right of the photograph, so it would look (a bit) better on Look Inside, at the expense of looking not nearly so neat in the book itself.

NJ:

LITB = KF7, for all intents and purposes. Design your image CSS accordingly.

Hitch

[Notjohn]

Huh. In the DX emulator, the image simply floats above the first line (i.e., first line begins to the right of the bottom of the image, and the second line is directly below that, which looks okay. Not ideal, but okay. Look Inside is a bit off-putting.

I checked the online preview on B&N, but that's so short the first mug-shot doesn't show up!

Thank you! I'll live with it. It's selling okay.

[Hitch]

Originally Posted by Notjohn

Huh. In the DX emulator, the image simply floats above the first line (i.e., first line begins to the right of the bottom of the image, and the second line is directly below that, which looks okay. Not ideal, but okay. Look Inside is a bit off-putting.

I checked the online preview on B&N, but that's so short the first mug-shot doesn't show up!

Thank you! I'll live with it. It's selling okay.

NJ: Can you paste the code here that you used? The HTML and the CSS? Can't guarantee I have an answer, but...all you have now is the CSS for the image, so I can't tell what you've used in the code (markup) itself. Right? You really ought to now use KF8/KF7, with media queries, for this.

Hitch

[Notjohn]

Style sheet:

img.mug {
width:20%;
min-width:130px
height:auto;
float:left;
margin-right:0.5em;
border-style:solid;
border-width:1px
}

Inline:

<img alt="Percy Bartelt" class="mug" src="../Images/bartelt.jpg" />

Thanks!

[Hitch]

Originally Posted by Notjohn

Style sheet:

img.mug {
width:20%;
min-width:130px
height:auto;
float:left;
margin-right:0.5em;
border-style:solid;
border-width:1px
}

Inline:

<img alt="Percy Bartelt" class="mug" src="../Images/bartelt.jpg" />

Thanks!

nj:

Didn't you say you had TEXT floating above/below t he image? Would you mind letting me see the html with the text above/below? Surrounding it, assuming that's two paragraphs? Or should I guess?

Hitch

[Notjohn]

I'd have to do a screenshot. Let me try again:

1) On the DX emulation, the image of course is enlarged, as I expected, and the first line of text starts in line with the lower right corner of the image. The second line of text is immediately below that. It looks okay.

2) On the Look Inside display, the image is right-sized, but the first line of text starts in line with the upper right corner of the image. Then the next line starts underneath the image, flush to the left margin.

3) On my Fire HD and K3 Keyboard, the text starts in line with the upper right corner of the image, and all subsequent lines follow immediately.

[Hitch]

Originally Posted by Notjohn

I'd have to do a screenshot. Let me try again:

1) On the DX emulation, the image of course is enlarged, as I expected, and the first line of text starts in line with the lower right corner of the image. The second line of text is immediately below that. It looks okay.

2) On the Look Inside display, the image is right-sized, but the first line of text starts in line with the upper right corner of the image. Then the next line starts underneath the image, flush to the left margin.

3) On my Fire HD and K3 Keyboard, the text starts in line with the upper right corner of the image, and all subsequent lines follow immediately.

NJ:

You know, I'm flattered, I really am, that you think my superpowers extend to clairvoyance, but they really don't. :-) I can barely manage HTML when it's in front of me, much less when you can't/won't tell me what it is. What I was trying to discern was, HOW is the image placed, relative to the text? Are the image and the concomitant text inside a div, perhaps? Are they not? Is the image first (in the HTML), versus the text? (Does the paragraph that is supposed to float come BEFORE the image code in the HTML file, or after?).

I suspect--but honestly, don't KNOW--that the issue lay either with the min-width or the width in percentage. As you may remember, I warned you that using images in percentages can result in unexpected results, if the container for that image is larger than you anticipate. In this case, now the container is the LITB pop-up, and I don't know if the container is the reading pane, only, or if it's the entire LITB panel/pop-up. You also have the min-width setting in there in PIXELS and we don't know what size the pop-up is, in pixels (and it's no doubt responsive--so it's POSSIBLE that someone else on a different computer is seeing something different, mind you).

I understand what you're describing to me; have you tried, perchance, putting the image and the paragraph that goes with it inside a div? A div that has a somewhat fixed size, perhaps?

Hitch

[Notjohn]

Sorry, I should have written:

<p class="first"><img alt="Percy Bartelt" class="mug" src="../Images/bartelt.jpg" /> <b>Percy Bartelt</b> of (etc)

No, there's no div. But now you mention the min-width, I'll take that out and see what happens.

[dgatwood]

You're missing some semicolons. Assuming that's an exact copy-and-paste, some parsers will throw away min-width and height, some will throw away height, and some (ADE) will throw away the entire stylesheet.

After you fix those typos, if the problem doesn't go away, try using media queries:

@media amzn-mobi {
    // Styles for older devices
}

@media not amzn-mobi {
    // Styles for newer devices
}

and see A. whether it is using the mobi styles or the kf8 styles, and B. whether you can come up with a compromise that makes "Look Inside" behave without wrecking the formatting elsewhere.

BTW, I recommend running your CSS through CSS Lint, if you haven't already:

http://csslint.net

Not everything it whimpers about is necessarily a mistake, but it is good to look through them anyway.

[Hitch]

Originally Posted by dgatwood

You're missing some semicolons. Assuming that's an exact copy-and-paste, some parsers will throw away min-width and height, some will throw away height, and some (ADE) will throw away the entire stylesheet.

After you fix those typos, if the problem doesn't go away, try using media queries:

@media amzn-mobi {
    // Styles for older devices
}

@media not amzn-mobi {
    // Styles for newer devices
}

and see A. whether it is using the mobi styles or the kf8 styles, and B. whether you can come up with a compromise that makes "Look Inside" behave without wrecking the formatting elsewhere.

BTW, I recommend running your CSS through CSS Lint, if you haven't already:

http://csslint.net

Not everything it whimpers about is necessarily a mistake, but it is good to look through them anyway.

dag:

NJ's been extremely resistant to media queries, in the past. I've been sort of hinting at that all the way through, here (if I had something like this, I'd either redesign it, or I'd set it up for KF7 display using hidden to get rid of the KF8 problems). BUT, yes...media queries are the most likely way to go. I presume that the missing semi-colons are typos, because NJ sells a book, on Amazon, about how to make MOBIs for Kindle using code/Sigil-->ePUB-->MOBI.

Hitch

[Notjohn]

The semi-colon was my bad, but I took the min-width line out yesterday and republished, so the semi-colon is now moot. The result is the same: no joy. (Astoundingly, Look Inside was live within hours. I put a code on the title page as a check.)

I'll try the media query. Many thanks.

[dgatwood]

You could probably get away with something as simple as <br class="mobionly" /> (assuming EPUB 2/XHTML source) after the img tag, defining .mobionly to be display:none for @media not amzn-mobi.

[Notjohn]

And thanks for that. Alas, I'm now in limbo. After updating in a couple of hours for versions 1.0 and 2.0, Look Inside has been returning version 3.0 since yesterday morning.

The book is selling, so the flaw doesn't seem to be turning people off.