LINK-
http://www.tocdocs.com/toc-spine.100610.html
In IE6 and IE7 the main paragraph text in the large white box seems to be pushed under the first image which is floating to the right. Can someone help me fix it so that the main paragraph looks the same as in IE8? I would greatly appreciate it.
Todd
Yes the SitePoint forums 
The problem with bugs is not that they haven’t been documented but in users realising which bug is triggering their problem.
The sitepoint reference has a lot of the common compatibility problems written into the reference but you need to read up on them and then when you see a bug in your page you have to recognise which bug it is and then act accordingly.
Most people have heard of margin collapse and the double margin float bug etc but don’t know the reasons why they occur or when to recognise them in their layout.
Thank you both! I found the missing “=” and added that in. I can’t thank you both enough for your efforts. I would have never figured this out on my own. Is there a one-stop resource for IE bugs and fixes that you know of?
Be sure to fix the width attribute inside your script to have the = sign.
Your code:
document.write('<IMG class="floatRight" width"318" height="215" src="' + image + '">')
I have added this code and it is still not working. Any other ideas?
Notice that the TocSpines logo is floated right, but it has a width defined for it and that the text seems to float around it just fine? From my understanding, if you float an element, for older browsers to display them properly, you must define a width on the floated element. Otherwise, they will see the floated element as spanning 100%.
Try that out and see if it works on that floated div with the image.
Older browsers just won’t take that I guess… Here’s a way to be able to get the images stacked on top of each other as you want them to look.
Add this to your css:
div.images { float:right; text-align:right; }
This is what your code needs to look like
<div class="images">
<script language="JavaScript">
<!-- Hide this script from old browsers -->
document.write('<img class="floatRight" width="318" height="215" src="' + image + '">')
// -- End Hiding Here -->
</script>
<img src="i/gfx_logo_tocSpine.jpg" alt="TOC Spine - Orthopaedic Center for Spinal Excellence" name="gfx_logo_tocSpine" width="280" height="53" class="floatRight" id="gfx_logo_tocSpine" />
</div>
<p align="left">Because, taking care of you is our mission. Our new location is in close proximity to Parkwest Medical Center allowing you easier access to a wider variety of diagnostic equipment. Additionally, you now have even greater access to the TOC team of board certified, fellowship trained physicians and their subspecialties. Our doctors often work together on cases to ensure you have the best medical advice and care available. </p>
<p>Our Doctors:</p>
<ul style="margin-top: 0;">
<li class="sub"><a href="white.html">P. Merrill White, III M.D.</a></li>
<li class="sub"><a href="kahn.html">Edward Kahn, M.D.</a></li>
<li class="sub"><a href="bolt.html">Patrick Bolt, M.D.</a></li>
</ul>
We’ll see how that turns out for you. If it doesn’t work still, we’ll go from there!
You missed one of my rules out
div.images img{clear:right}
I reworked the HTML and added the CSS rules and it works in IE7 and IE6, BUT now it is breaking in IE8 and Safari. UUUUGGGGGGHHHH!
I just checked your source, you have to add the width to the surrounding div because that is what is technically being floated.
I added a width and height to the first floated image and it still is not rendering properly. Any other ideas?
Hi,
There are two IE bugs going on here.
The first is that a right floated float inside a right floated parent actually spans 100% in IE7 and under unless you give both a width as mentioned above.
The other bug is that IE7 will only rise the text up alongside subsequent floats as long as there is nothing between each float. In your case the second float starts inside the parent p element and therefore IE only lets the float rise to the top of the p element and not slide up alongside the other float.
This is quite awkward and you would need to do move the second float into the same container as the first float and then change the floats so that the child float is floated left inside a right floating parent to kill the 100% wide effect.
<td width="450" class="sub"><div class="images">
<script language="JavaScript">
<!-- Hide this script from old browsers -->
document.write('<IMG class="floatRight" width"318" height="215" src="http://www.tocdocs.com/' + image + '">')
// -- End Hiding Here --></script>
[B] <img src="http://www.tocdocs.com/i/gfx_logo_tocSpine.jpg" alt="TOC Spine - Orthopaedic Center for Spinal Excellence" name="gfx_logo_tocSpine" width="280" height="53" hspace="10" class="floatRight" id="gfx_logo_tocSpine" />[/B]</div>
<p class="sub">Because, taking care of you is our mission. Our new location is in close proximity to Parkwest Medical Center allowing you easier access to a wider variety of diagnostic equipment. Additionally, you now have even greater access to the TOC team of board certified, fellowship trained physicians and their subspecialties. Our doctors often work together on cases to ensure you have the best medical advice and care available. </p>
div.images {
text-align: right;
float: right;
}
[B]div.images img{clear:right}
* html div.images img{float:left!important;clear:none}
*+html div.images img{float:left!important;clear:none}[/B]
So I have now removed the div wrapping the image in question and simply added the class “floatRight” to the actual image and I added the width to that image but it still is not working.
well spotted