Float Graphics not showing up in Firefox

Never mind — I went back to the old code I was using before Blogger futzed it up, and it’s working now.

First post and you figured it out all by yourself. Wow.

Also, a quick note. I hope you were capitalizing those attributes as they won’t validate with XHMTL.

Also, if you want to float images, unless it is a special case, this is what I do. I set a left and right float in my CSS and then some attributes for IMG to make them look nice. Here it is:

img {border:0; font-size:60%; }
img.centered { margin-left: auto; margin-right: auto; }
img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
.right { float: right; }
.left { float: left }

I use it like this, very simple, in my posts.

<img src="ball.gif" class="left" alt="ball" />

The margins and paddings take everything into consideration (including different browsers) to accomodate the “space” around the image for the different positions. I just use “left” and “right” and never have to think about it again. I love simple.

No sooner I insert class=”left” the picture disappear, sniff!!!

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 storycontent & 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?

I think I found a solution. ??

I created a new div solely for the content’s background color, and in the page file wrapped it around the post div which still contains the position:relative attribute.

My new div contains only the attribute for the background and the margin attributes from the post div. I also had to slightly adjust the post div’s left & right margin attributes so they would line up correctly with the new div’s background.

Of course other themes may require slightly different adjustments, but I hope this helps others get on the right track.

I don’t exactly understand what to do here….can you be more specific….this is exactly my problem.