So take a look at this page in both FireFox and IE: http://www.ideasforministry.com/mart/prod/in-his-steps.php (please excuse the design - it's not launched yet ) For some reason in IE the background image of that div is "overlaying" an image. In FireFox it's reverse - the image floats on top like it should. What I don't understand is that it's only when I ALIGN="left" HTML: the image that this happens. If I don't do that it works fine. But I want the text to flow around the image. I've also tried assigning a float attribute in the CSS as well with the same results. Anyone have an idea what's going on? P.S. here's the css for that div:
My html checker says that left isn't a valid value for the align attribute of an img, the only valid values are dynamic expression, top, middle, bottom.
Hmm, that's weird. I got it from this page: http://www.htmlcodetutorial.com/images/_IMG_ALIGN.html What version of HTML were you validating? TickTock
Hi, It is because of a little "fix" you have in the IE-specific stylesheet. The last line of this file: /themes/mollio/ie6_or_less.css being: ol.code, .featurebox, #content ul, #sidebar ul {position:relative} Code (css): You need to remove the featurebox class from that list. It behaves fine without it and the image is displayed properly. ol.code, #content ul, #sidebar ul {position:relative} Code (css): P.S. Also, while align may be valid (or not, I am unsure) you should use float=left in CSS instead. For example: .featurebox p img { float: left } Code (css): Or you may prefer to give the image a CSS class instead, to allow for alternatively aligned images. Cheers - P
Not tested. IE has several bugs in its rather faulty float model. (align="right" || "left" is usually treated as a float in most browser default style sheets) Try making the img and/or its parent {position: relative;}. If that doesn't work, add a z-index of ≥2 to the img. Further, in xhtml, all attributes are lower case. You have "ALIGN". IE is actually less fault tolerant than most, and that's a Good Thing®. It is always a good idea to validate your code. Invalid code makes it difficult to debug with any expectation of sane results. [edit]penagate was a bit more diligent than I was. The {position: relative;} is the likely culprit. Remove it, as suggested, or add it to the img, also. You established a positional reference. Also pena, didn't intend to step on your answer. You were just ahead of me. [/edit] cheers, gary
Thanks guys! That did the trick perfectly. I looked everywhere except for that IE fix stylesheet. I just added a class specifically for the product images with a position:relative attribute - and it fixed the problem!