IE7文本对齐问题-文本换行且不应

Question

If you take a look at http://wilwaldon.com/ie7sucks/inner7ie.html with IE7 you will notice that the text wraps the image. With all other browsers it doesn't. I'd like it to not wrap the image in IE7. I've used the ie dev tools but can't figure out what's causing the glitch.

Any help would be appreciated and I'll be eternally grateful.

THANK YOU!

Answer 1

It doesn't look like it is wrapping to me. Wrapping is where a single paragraph wraps around an image. What is happening here is that you have 2 paragraphs, the first of which is longer than the image and so pushes the bottom paragraph, below the image.

Try doubling the size of the first paragraph and see if it wraps on both Firefox and IE7. I think it probably won't.

Therefore, your problem is that you have a bottom padding to all your paragraphs in .mainright. Firefox is including this padding in the height of the paragraph whereas IE7 is, incorrectly, adding it on to the bottom. This means, in Firefox, the first paragraph isn't long enough to push the 2nd paragraph below the image whereas in IE7, it is long enough.

If Firefox is displaying as you want it to, try removing this bottom padding. Then, if you want to retain spacing between the Featured header and the spotlight images, add the following:

.featuredbold, .spotlightbox {margin-bottom:36px;}

UPDATE: To accommodate the dynamic content you will have to do the 1 of the following:

1) Have a single paragraph per box and then use <br /><br /> to simulate a paragraph break.

2) Put all of the paragraphs in a div and have whatever is generating the content change the class of that div. You could, for example have ".fat" and ".thin" as classes and then associate the appropriate widths with those classes so that the paragraphs were unable to wrap as they would be constrained by the div. You would also have to float the div to the right.

Solution 2 is much better but you may not be able to implement it, depending on your setup.

Answer 2

Remove, or re-set: #mainright p {padding-bottom:36px;} .

Also, you have some validation errors.

Answer 3

http://www.w3schools.com/css/pr_class_display.asp

No versions of Internet Explorer (including IE8) support the property values 
"inline-table", "run-in", "table", "table-caption", "table-cell", 
"table-column", "table-column-group", "table-row", or "table-row-group".

By setting table-row-group on your P-tags, they no longer take padding-bottom, but IE does.

The structure of your code is wrong also. You need something like this:

<div class="spotlightbox">
  <img style="float: left">
  <div style="float: left">Text here</div>
  <div style="clear: both;"></div>
</div>