Inline images and browsers problem

  • I’ve been trying to use text wrap inline images in posts (using CSS img.right img.left).

    Everything looks great when viewed in IE 6, but when I view the page with Firefox 2 I get no image, just the highlight box and caption.

    Am I doing something horribly wrong? The CSS code I am using is:

    > img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }

    > img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }

    > .right { float: right; }

    > .left { float: left; }

    > .caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; background: #E5F2FF; font-size:90%; color: black }

    Any help greatly appreciated.

Viewing 1 replies (of 1 total)

  • I would recommend wrapping the image and caption in a div and then floating the entity as a whole.

    XHTML:

    <div class="image-caption">
<img class="image" src="image.jpg" />
<span class="caption">Image caption</span>
</div>

    CSS:

    .image-caption
{
display:inline;
float:left;
}

img.image
{
...
}

span.caption
{
display:block;
...
}

    For further reading on the subject, Garret Dimon just wrote an article about it at Digital Web.

Viewing 1 replies (of 1 total)
  • The topic ‘Inline images and browsers problem’ is closed to new replies.