Problems with IE5-7 with image-float: right and text

Hi!
I've got a problem with my CSS in IE5-7. I want ALL text after (on screen) my image to wrap around the image but in IE5-7 everything after the <p></p> surrounding my image gets pushed down. I'm guessing the trick is to make a change in the CSS for <h3>?

A better way to illustrate the problem:

This is how I want it:
http://www.neobux.se/how-it-should-be.jpg

This is how it looks with IE5-7:
http://www.neobux.se/the-problem.jpg

The HTML:

<p><img src="some-image.gif" />Some text</p>
<h3>Steg 6</h3>
<p>Some more text</p>

HTML:

The CSS-code:

img {
  float: right;
}

Code (markup):

Really appreciate some help!! Thanks!
If you wan't to take a look on the real thing, it's here:
http://www.neobux.se/guide.php

 

put the image BEFORE the P, not inside it. IE incorrectly wraps child elements that float.

<img src="some-image.gif" />
<p>Some text</p>

That should do the trick. The paragraph was expanding to hold the float pushing everything else down. Just ANOTHER reason I keep saying stop putting images inside paragraphs since grammatically, well, they aren't paragraphs! (and why I want to smack with a wet trout the people who keep saying to do so)

 

Thanks!
Did as you said, but now I've got some new strange problems for you!

In IE5.5 it looks like this? Very wierd?
http://www.neobux.se/ie5-5.jpg

In IE6 the text won't wrap around the images at all...
http://www.neobux.se/ie6.jpg

In IE7 it's the same as in IE6 except that the last image work(?)
http://www.neobux.se/ie7.jpg

IE8 and Firefox works like a charm as usual.

Hope you can help me out! Would really appreciate it!
Thanks!!

Edit: a deeper look at my CSS:

p {
  min-width: 75%;
  max-width: 90%;
  line-height: 140%;
  padding-bottom: 14px;
}
* html p { width: 90%; }

img {
  margin: 7px 11% 14px 21px;
  padding: 2px;
  float: right;
  border: 1px solid #3c372d;
}

Code (markup):

 

Hey do you know any good books to learn css

 

Ok, you've got a plethora of things going on in there that frankly, you shouldn't be trying to do.

The behavior you are seeing in IE 5.5 is called margin doubling. IE will do that on floats from time to time, that can be 'fixed' by setting display:inline on the float. Floats are inherently display:block and NOTHING you set for display (apart from hidden) can change that in any browser - BUT, for some wierd reason that value triggers some strange quirk in IE that fixes that problem.

The paragraphs refusing to wrap in IE6 stems from your setting a width on them. That is almost guaranteed to FAIL to wrap because width triggers haslayout, and elements with haslayout cannot wrap under floats.

In general, you seem to be dicking around with the widths on elements that shouldn't have widths on them too much - and that's the root of much of your problems. If you are going to have width or min-width, it should be on the block level container AROUND your paragraphs and headings, not on the individual child elements like you are trying to do. Setting width or min-width on paragraph is a hell of a lot of layout for the engine to calculate, especially on elements that if you want wrapping behavior should be auto-scaling themselves.

A final little problem I'm seeing is the attempt to use % on margin. By the specification a % padding or margin is based on font-size, NOT the parent container - just like line-height is. as such for example if your font-size was 14px, you'd be seeing that right margin on the image being set to 1.54px (which would round up to 2px)...

For the most part I think you may have REALLY overcomplicated your layout - but I'd have to see the full page in question (or at least what you are aiming for in terms of appearance) to say for sure.

But really it should be something like

<div class="content">
	<img
		src="images/some-image.gif"
		alt="my Image"
		class="trailingPlate"
	/>
	<p>Some text</p>
	<h3>Steg 6</h3>
	<p>Some more text</p>
</div>

Code (markup):

With CSS something like this:

.content {
  min-width:75%;
  max-width:90%;
}

* html .content {
	width:75%; /* narrowest version if scripting unavailable */
}

.trailingPlate {
  float: right;
  display:inline;
  margin: 8px 8px 0.5em 1em;
  padding: 2px;
  border:1px solid #3c372d;
}

.content p {
	padding-bottom:1em;
}

Code (markup):

If you start screwing with widths on those CDATA elements, you won't be able to have that wrapping behavior, so whatever you have for a element around all of that code is where you should be setting that min-width.

Honestly, I'd go higher up than that to set the min-width, probably to a master DIV wrapping ALL the content on the page. Setting a width on a content area inside the page, even on a fixed width layout, is just asking for it to fail.

 

Wow! Thanks alot for all the helpful information!
I've changed the code to this:

img {
  margin: 7px 70px 14px 21px;
  padding: 2px;
  float: right;
  border: 1px solid #3c372d;
  display: inline;
}

p {
  padding: 0 56px 14px 0;
}

Code (markup):

I'm using padding-right instead of max-width and threw away line-height.

Though I've added display:inline to img, it's the same behavior in IE5.5, but in IE6 and the others it looks good!

The problem always occurs when you begin to scroll, if that's to any help?

Thanks again for your help!! I mean it.

 

Sometime you may actually want to make text invisible. Now what do i do?

 

Viriol, here's another tip for you, you will find it VERY helpful:

When dealing with floats and margins and weird shit going on cross-browser, give your elements ugly background colours.

for example, with your older code, if you had given the <p> a background colour of red, you would have seen the differences between a p with Haslayout and one without... the difference between browsers (IE vs the Rest) would become (usually) very very obvious. You might not still know WHY they're doing that but you'd know WHAT was happening.

You might also want to read and bookmark this for in the future: http://www.search-this.com/2007/09/05/lets-be-clear-about-this/