Here in brief, with a fuller explanation and screenshots at:

http://sohodojo.com/fyeo/drupalcss/img_css.html

Reference URL: http://theencoreplayers.com/node/57

Problem: The SPAN (with classes 'image' and 'preview' associated with it) that wraps the image tag behaves differently between MSIE and Firefox/Opera. There is likely a CSS hack to solve this problem but my trial and mostly error attempts are not leading me there yet. Your solution/tips are greatly appreciated.

Indicators: As visible in the Firefox and Opera screenshots below, the problematic span is not wrapping/containing the image, while MSIE renders "as expected" (although most likely not as CSS would specify). Also, neither Firefox nor Opera show the '2 em' bottom margin while MSIE does.

Comments

Sohodojo Jim’s picture

Sohodojo Jim commented
Title: Span Around Images does not 'contain' image in FF/Opera » Changing span to a div helps...

Jay Goldbach wrote:
> Have you tried using it in a div instead of a span?
>

Thanks, Jay!

This is probably the easiest and most reasonable solution to this problem (although it doesn't do quite what I hoped in terms of an inset "bleed" on a fixed width theme).

At lines, 376 and 378 of the image_display function in image.module I changed the span to a div. As seen here:

http://sohodojo.com/fyeo/drupalcss/span2div-ff.png

this results in the framing border enclosing the image although the width is constrained to the fixed width of the theme. The bottom margin is also rendered as expected in Firefox and Opera.

Unless I can find a way to widen the div to get the bleed effect for FF/Opera, I will decide to either constrain image widths (not the most desirable solution) or consider a fluid width version for the main content column of the theme I am using.

--Sohodojo Jim--

Sohodojo Jim’s picture

Sohodojo Jim commented
Title: Changing span to a div helps... » Span Around Images does not 'contain' image in FF/Opera