Inline images cover up text

[loring]

Hi, I'm searching high and low for an answer and haven't found it yet.

My EPUBs are viewed in iBooks. When an image (like an icon or equation) is in the middle of a list item, the inline image covers up the text.

The bullet itself is in a separate div. (Don't ask..that's how the converter works.) The text itself is a hanging indent. Here's the definition:

{
line-height: 1.25em;
margin: 0.35em 0 0.45em 1.45em;
text-align: Left;
text-indent: -1.45em;
}

When I change the style in the source file to "body", the inline image displays fine.

Has anyone run into this problem?

[Toxaris]

Can you give some code examples and some more style examples? This is little to go on.

[loring]

Originally Posted by Toxaris

Can you give some code examples and some more style examples? This is little to go on.

Sure. Here's an example of the entire paragraph that contains the inline graphic.

<div class="N1bullet"><span class="Number">• </span>The Chi-square <img class="Default" src="images/BA_03_Univariate_80.jpg" width="37" height="37" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Equation shown here" /> distribution occurs when....</div>

Style for the bulleted paragraph:

div.N1bullet
{
line-height: 1.25em;
margin: 0.35em 0 0.45em 1.45em !important;
text-align: Left;
text-indent: -1.45em !important;
}

The text-indent causes the problem. It's the hanging indent for the list item.

For the bullet character:

span.Number
{
width: 1.45em;
display: inline-block;
margin: 0;
padding: 0;
text-indent: 0;
}

For images:

img
{
vertical-align: middle;
}

I appreciate your help.

[odedta]

Just by looking at the code I think that "float:none" might be causing a problem, otherwise I'd look at the text-indent like you mentioned and then the "display:inline-block"

[DomesticExtremis]

Your inline style rules for the image tag:

style="display: inline; float: none; left: 0.0; top: 0.0"

will have higher priority than the rules in the stylesheet.

You should either remove them or move the ones you want to the css.
I don't think the left and top properties will have any effect unless you
define the position property to be something other than static (the default).