WordPress.org

Ready to get started?Download WordPress

Forums

Pair of images, left and right aligned, wrong in Internet Explorer (12 posts)

  1. roadie
    Member
    Posted 3 years ago #

    I have posts with two images, one on the left, one on the right. Any subsequent text is supposed to appear below both of the images.

    This works fine in Firefox and Opera. See http://www.roadsigns.me.uk/1996/12/18/no-overtaking-viii/

    However, in Internet Explorer 7, the top of the right hand image drops to be level with the bottom of the left hand image and the text wraps round the side and below this right hand image - not what I want.

    Is there any fix for IE?

    I have tried a few things, including adding the css code mentioned in http://www.dailyblogtips.com/now-i-see-why-the-wordpress-image-align-feature-was-not-working/

    By the way, using class="alignleft" on the left hand image wrecks things in all my browsers - the text below gets sucked upwards into the gap between the left and right images.

  2. Frumph
    Member
    Posted 3 years ago #

    In the post editor, click to HTML tab

    put <div style="clear:both;"></div>

    directly under those two images to clear the floats, then the text will appear properly below it.

  3. roadie
    Member
    Posted 3 years ago #

    Frumph

    Thanks, I followed your suggestion. It had no effect.

    By the way, it is disconcerting that I can add this html, save, switch to
    "Visual" edit mode, switch back to "html" edit mode and the code vanishes from the edit screen. It's still there as I can see by viewing the html source in my browser.

  4. Frumph
    Member
    Posted 3 years ago #

    Yeah, that's only a hack. You just don't switch back to visual mode.

    The issue is that they're being floated, and you need to clear the float afterwards.

    So try <br style="clear:both;" />

    find something that won't disappear afterwards.

  5. roadie
    Member
    Posted 3 years ago #

    Frumph

    No, that doesn't do it either. Thanks anyway.

  6. Frumph
    Member
    Posted 3 years ago #

    <p style="clear:both;">
    next set of content
    
    </p>

    Personally I don't switch back to visual on the posts I have to do this on.

  7. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    clear:both; will not do anything in this case. Simple "fix" without doing anything to your stylesheet is this:

    Just do align your left image to the left and leave the right one alone as is (align right)

    Your css alignleft is float left and alignright float right, all good in IE7 and IE8 too.

    Sample result:
    Take a look what happens when I add class: alignleft; to your left image http://i.imgur.com/3w6g8.jpg

    Enjoy,
    Emil

    PS This is directly from your post.

  8. Frumph
    Member
    Posted 3 years ago #

    Nice catch Emil, I could have sworn seeing the alignleft attached to it viewing it 9 hours ago. /shrug maybe not, but great find.

  9. roadie
    Member
    Posted 3 years ago #

    Emil Uzelac

    Emil, thanks very much. It now works for me in IE7 as well as my other browsers.

    I imagine that when I tried it earlier, I did not have the most uptodate css for alignleft and alignright.

    Thanks again everyone.

  10. roadie
    Member
    Posted 3 years ago #

    No, I was wrong there. I took out the <br style="clear:both;" /> and had to put it back again, because without it the text below gets sucked upwards into the gap between the left and right images in all browsers.

    So the solution for me is using alignleft and alignright followed by a <br style="clear:both;" />

    Thanks again.

  11. Frumph
    Member
    Posted 3 years ago #

    Ah well hey that's great that you got it working right.

  12. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    Whatever you had in with alignleft was the solution. I am glad that this worked out nicely for you. Little bit from Frumph, very minor from me and voila it all works great.

    @Frumph at that time I had more rest probably ;) It'a all good!

Topic Closed

This topic has been closed to new replies.

About this Topic