Image Formatting Problem in Firefox

[pbradish]

Hey All,

I know that I've been MIA for a couple of months - been extremely busy :)

On one of our business blogs, we've been running into a formatting issue when posting images. The issue only seems to happen with Firefox. Here's an example:

MMAOverload.com Blog - MMA Clothing, Fight Gear, and Equipment Superstore! (http://www.mmaoverload.com/blog/)

If running Firefox 2, you'll notice how the Contract Killer image overlaps into the next blog post. Any ideas how to correct this?!

Thanks everyone,
Paul

[stymiee]

The floated images isn't being cleared. This way should work for FF2 and all other browsers.

<style type="text/css">
.clear
{
clear: both;
height: 1px;
overflow: hidden;
margin-top: -1px;
}
</style>

<div id="post-38" class="post">
<h2>
</h2>
<p>
</p>
<p>
<img class="alignleft" width="332" height="332" alt="Contract Killer Clothing" src="/images/contract-killer-mma-clothing.jpg" style="float: left; margin-left: 5px; margin-right: 5px;"/>
<strong>
<span style="color: red;">New Brand!</span>
</strong>
<strong>Contract Killer</strong>
</p>
<p>
</p>
<p>
</p>
<p>Contract Killer Clothing - Fight Life</p>
<p>
</p>
<div class="clear"></div>
</div>

[pbradish]

Hey Stymiee, This didn't appear to resolve the issue on my PC - I'm using Firefox 2.0.0.1.4. The images display fine in IE though!

[BPartch]

Hello

Try adding:overflow:hidden;
padding-bottom:10px;to the .entry selector in your .css. :)

Hope it helps.

[SarahG]

Hey Stymiee, This didn't appear to resolve the issue on my PC - I'm using Firefox 2.0.0.1.4. The images display fine in IE though!

Looking in your CSS you've not added the CSS rules that stymiee posted so the markup alone won't work.

A simple

div.clear { clear: both }

Will do the trick. I've edited your CSS via my web dev toolbar (so only locally) and it worked for me in FF3. Or stymiee's code, which is just an extension of the rule above.

[pbradish]

Thanks everyone. Sarah - that little piece of css worked like a charm.

:devilhorns: