I have been using Lorelle's basic Css image code for a clean layout in Several WP blogs. (I actually got it from an image upload plugin a long time ago.) Slight tweeking takes place, but the
float attributes are always the same - gotta have them, right?
Only recently I have run into a problem with them -- in the Oasis theme. Using
float the images seem to "disappear" in IE. Although I did discover they are actually there - they are just "hiding" behind the content div's background. (I discovered this because the browser's every option insists that the image is actually there, so I reduced the text size in the browser window which then caused the images to "fall out" a bit from under the content div.)
Here's the problem as I have discovered it. The one significant difference I could find between this theme and others I use is the attribute
position: relative; in my content divs (in Oasis these divs are labeled
post). Removing both allows the images to show up -- on top -- in the desired positions.
Unfotunately, it has caused a new problem. Without the
position: relative; attribute in the content divs, every
titlewrapper div sits at the absolute top of the page - since it's
absolute positioning relies on the
relative positioning of the content divs.
The clear problem remains:
float attributes do not work well in IE when they are used within divs that have the
position: relative; attribute - even when nested within a div that does not contain the relative attribute.
I've replaced the relative attribute in the
post div since I cannot have the post titles sitting at the very top of the page in their nice little boxes. But even with this attribute NOT used in the actual
storycontent div, the images once again sit "under" the content's background color. Yes, when I remove the post div's background color, I CAN see the images.
Oh, and I did make an attempt to use z-indexes, but that didn't help.
Any CSS Gurus know a way to work around this problem?