Text Wrapping Images Incorrectly

Hey I just had a look. Did you sort this out because I can see the second paragraph does start next to the image on the left.

Hi Samuello

In Firefox everything is OK. Your problem is relative to Internet Explorer…

S.

Boo_77: Which browser were you using? I have IE7 at work and at home and on both my computers the second paragraph starts below the first image, not next to it.

SimonJ: Any ideas how to fix this for IE7, then?

It’s difficult to tell offhands what is the problem with your css setup.

CSS and Internet Explorer, and cross browser compatibility in general is a very large topic… ??

I suggest to make some google about float css problem in internet explorer… ??

S.

I’ve been searching around on Google all morning and can’t find a fix… There are plenty of articles about float problems in IE6 and IE7, but I can’t find anything pertaining to this issue specifically. Anyone else have any ideas? My theme’s style.css file is here: https://www.ourwalkabout.com/wp-content/themes/ and is called “style.css”. Help!

I fixed it… It was as simple as removing the following lines from my style.css:

p {
height: 100%;
}

This post should be in the dictionary next to “frustrating”!

Hi Samuello,

Your hack to the CSS may have other implications … I looked yesterday at the source code for your faulty page, and would like to suggest the following in case you find your fix has repercussions.

In your HTML code on Thursday 18th, you had in essence :

<p>
<img … />
Here is some text
</p>

… which I believe IE7 interprets in such a way that the total height of the paragraph is determined by the height of the largest thing inside it ( in this case, your image ). The NEXT paragraph therefore has to start below the bottom of this block.

Some browsers work differently, and the height of the paragraph is determined by the text only ( pictures will hang down over the bottom of it ). That means that paragraph two will continue to squeeze into the available space alongside the image, until you reach the the end of the image and then it all goes to full width.

I tried a simple fix … move the opening <p> so that instead of coming before the <img …> tag, it comes after the image closing tag ( i.e. just before the first word of text ). That seemed to work and cure the problem in IE7, but I can’t guarantee it’s foolproof.

Also have a look here. It is a great resource for understanding and fixing browser-specific bugs.

Good luck,

Alan

OK. Now I understand a bit more :

Another workaround which would leave your CSS file in the original state ( and therefore not mess anything else up ), would be to override the height setting explicitly like I have here … feel free to use “View / Source” in IE7 to see the code behind this page.

Look at the page full-sized in IE7 and in Firefox, and you will see that in IE7 the two sections are different, while in Firefox they look the same. Now try narrowing the browser windows and watch the text flow around. You can see that the two browsers handle things differently.

The secret to my code is to override the CSS “p.height” setting locally for the paragraph you want to format specially.

Change the ‘<p>’ tag in your HTML editor into ‘<p style=”height:auto;”>’

I haven’t tried this in WordPress yet, because I have only used WP for two days … but it works in my HTML editor ( Microsoft Expression Web ). I have already found that WP tries to strip out some of my attempts at manual coding as soon as I turn my back …

Alan