WordPress.org

Ready to get started?Download WordPress

Forums

Inline images and browsers problem (2 posts)

  1. szstevo
    Member
    Posted 7 years ago #

    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.

  2. David Yeiser
    Member
    Posted 7 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic