Quick favor from IE7 users

Hi, I’m working on an OO-CSS gallery and trying to polish the components I’m displaying. Can you please take a look at this demo of text wrapping around captioned images and let me know how it looks?

http://www.earthchronicle.com/EC/Content/Computers/Programming/~OOCSSGallery.aspx#advancedCaptions

In the closest I can get to IE7 (IE8 compatibility view) the images in my demo are not floating nicely and before I spend a week trying to tech the issue, I’m wondering if it really looks like that in IE7.

You only notice the problem in Firefox 3.6 when the screens is wide and the floated caption isn’t contained because the parent is not high enough. It’s the same in ie6 and 8 but IE7 was more broken with the haslayout bug I mentioned above.:slight_smile:

:slight_smile: Too funny, it works in 6 and 8 but not 7, and in FF 2 and 3.6, but not your version? Ahhhhh… the joys of CSS. What version of FF are you running?

The default settings of my editor are set to no BOM, and usually it’s not a problem, but occasionally I find files like this where I have to yank it. I’ll fix that with the other mods.

And thanks for the heads up on the conditional comment. One of the great things about master pages is that you can group things more logically in the content page, but it means you forget their actual order on the page. These are OO-CSS components so there shouldn’t be any serious conflicts, but I have switched the conditional comment on my dev box to come after the embedded styles. When I’m finished with the rest of the changes, I’ll upload it and test again.

Hi,

The floated captions are broken in Firefox as well as IE7 because they haven’t been cleared.:slight_smile:

The main problem in IE7 is haslayout which can be fixed like this and cure the clearing at the same time.


.testOutput {overflow:hidden}
* html .testOutput {height:1%;overflow:visible}

Note that your css file is outputting a BOM (byte order mark) at the start of every file and could cause some browsers to miss the styles.




Change your editor settings so that the BOM isn’t output.

I also note that the IE7 css file is first in the html so I assume that there are no conflicts inside it otherwise the normal rules will over-write them (I didn’t check what was in your IE7 file though.)