Missing pics with ie – update

I’ve been puzzling over the missing pictures in internet explorer after the post two before this one had the picture missing. In internet explorer on the main page at absoblogginlutely.net you will get just an empty space where the google map picture is, but if you click on the space you will get taken to the larger image so it really is there.
If you click through to the monthly archive or individual entry the image shows up fine.
I know the problem is partly to do with the align=”left” attribute on the image – if I remove this, then the image appears again properly. I know that this should really be styled with css, so I put the float=”left” on the image and the image disappears again. If you add the “position=relative” to the css then the image appears again and the text wraps around correctly but if the page is wide the graphic overflows out of the background image and spoils the effect.

There are several posts on the internet that I’ve found describing my problem but I couldn’t find a solution.1 2 3

The following posts were made from a sample posting to demonstrate the problem (I chose a garish yellow background to make it easier to see where everything is). As all these screenshots are hosted on zooomr and I’ve used the blog picture functionality, which includes styling on each picture posting, these images look ok in this posting but the styling is a pain to type in for each picture and not exactly easy to remember either.
The original posting with an empty picture.

Set float=left or align=left and the image disappears

The same posting viewed in firefox – looks great

Looks great in Firefox (narrow screen)

and in firefox again, extra wide – the image stays within the background box.

Looks great in Firefox with a wide screen the post just expands

Remove the float left and the picture appears in internet explorer

The hammock picture is in the wrong place.

But if I set float=left within css the image disappears again.
Add position=”relative” and the image reappears again and looks great

Set position=

Until I change the width of the browser and then the image bleeds outside of the box.

Image bleeds over the containing box.

Comments

  1. PatrickQG

    Sounds like ye traditional float escaping container pain in the neck.

    If you set whatever the img is inside of (ie. the div) to overflow:hidden; make sure it has a width set (can be a %), and it should work.

  2. me

    Thanks for the suggestion but it doesn’t make any difference to the bleeding and the picture still disappears if I remove position:absolute and keep float:left in.

Comments are closed.