Posted by Rob
Posted on 05-08-2010 under CSS/HTML Markup, Creative Inspiration, Development, JavaScript / AJAX

AKA: Why your image carousel pulling content from posts or pages in Wordpress is not working

We recently ran into a fairly frustrating little issue on a site we were working on.  This particular site had a jQuery Cycle gallery on the home page, and it was pulling images from individual pages in Wordpress using query_posts().  Problem was, images in IE would appear and then disappear.  This was happening in all versions of Internet Explorer.

Cycle uses absolute positioning and z-index, so we initially assumed that was part of the problem, since Internet Explorer deals with z-index in its own special way.  After a number of go-rounds involving various z-index combinations and changing how our positioning was working didn’t pan out, I started looking at the code that query_posts was spitting out, and noticed that (like almost everything coming from the wordpress editor), it was wrapping content in a paragraph tag.  This in turn led to a little firebug magic which revealed that max-width: 100% was being applied by the stylesheet to images in paragraphs.

It looked like this:

p img { max-width: 100% }

This particular line of CSS comes from the Wordpress default template, and is intended to handle situations where users try to insert images that are bigger than the width of a column from breaking the layout.  So it’s a good thing.  We won’t go into IE’s general handling of max-width here.

Anyway, long story short, a little specificity in our CSS took care of the whole thing.

.carousel p img { max-width: 586px; }

Cheers!