This is unlike anything I've read about and I've been totally scratching my head for the last few hours trying to figure out what's going on...

I have a hand-coded site @ hartbro.com Part of the site is a blog, in which I include pictures. Here's the HTML code around one of the images that's causing trouble.

<a href="blogcontent/090811.jpg" class="img">
<img src="blogcontent/090811.jpg" alt="Downed trees" width="25%" class="floatright" /></a>
The storm left as quickly as it came. The sky cleared up and we were glad that the oppressive heat had let up.

What I've noticed is that, on some of the blog entries that include more than one image, the 2nd image isn't really floating like its supposed to be, with the text wrapping around it. I figure its got to be some sort of conflict with some CSS that I have that's causing the problem but I just can't figure out what it is.

The page in question has some AJAX elements and when I use those to "refresh" the content (not refreshing the entire page), the float and wrapping seems to work fine. Also, when I reload the page, occasionally everything lines up. Could it be something to do with how the images are loading?

I've read suggestions that say to set the image width in CSS but all of my images are different sizes (percentage widths, set in the IMG tag) so I don't think that's what I'm looking for.

I don't understand how it works in FF & IE but not Chrome or Safari?

Here's all of the relevant CSS, let me know if you need anything else. Thanks in advance.

img{
margin:10px;
}

img.floatleft{
float:left;
}
img.floatright{
float:right;
}

4 answers

1
point

I'm not sure about the cause in this case. I can only make two suggestions: a) include "display: inline;" with each of your float classes; b) see if replacing percentage widths with fixed sizes (temporarily) resolves the issue.

Answered over 7 years ago by Shawn Tritz
  • ahh I was so close to thinking your "display:inline" code worked, until the 10th time I refreshed the page and the text stopped wrapping again... Hartley over 7 years ago
1
point

Why do you have the a element linking to the source of the img element? It seems superfluous.

My suggestion is to strip the a and define the css for the img tag as:

img {
display:block;
float:left;
}
Answered over 7 years ago by Divya Manian
0
points

I'd replace the HTML width attribute of the image with a CSS width, further I'd set also the image height in the CSS.

I don't use the HTML size attributes any longer.

Answered over 7 years ago by Thomas Traub
  • I agree, I think that setting the height in the CSS will probably fix this issue since I think its a matter of the text loading before the image and so the space isn't being saved for it properly. The only problem is that all my images are different heights. Would I have to make classes/ids for all of the images and measure out the absolute heights to create the appropriate CSS? That seems seems kinda tedious and inconcise Hartley over 7 years ago
0
points

Do the above suggestions but you could take the class off and use your selector for styling:

css

img[align="left"] {float: left;
display: inline;}

img[align="right"] {float: right;
display: inline;}

html

<a href="blogcontent/090811.jpg"><img src="blogcontent/090811.jpg" alt="Downed trees" align="right" /></a>

I don't use image size attributes anymore either. I kinda doubt this will fix your issue, but it's worth a shot.

Answered over 7 years ago by Ben Shoults
  • again, I tried giving your method the "refresh-test" and it worked for the first 10 or 15 page loads in Chrome, but then it stopped wrapping again Hartley over 7 years ago
  • *stopped wrapping again, sporadically Hartley over 7 years ago