CSS Issue, overlapping divs/blocks

[leetvape]

So, I changed the image in my 'blockpaymentlogo' block and now, even after editing the .tpl/.php/.css files associated with it, it still overlaps my payment block. Any ideas? Here are some applicable files:

 

 

Screenshot:

http://imageshack.us/photo/my-images/854/screenshot20111123at759.png/

 

Here's the code from the module css:

/* Block logo payment */

.paiement_logo_block {

width: 170px;

height: 108px;

text-align: center;

margin-bottom: 1.5em

}

.paiement_logo_block a { text-decoration: none }

.paiement_logo_block img {

margin: 0 0.5em;

float:left;

}

Here's the .tpl:

<!-- Block payment logo module -->

<div id="paiement_logo_block_left" class="paiement_logo_block">

<a href="{$link->getCMSLink($cms_payement_logo)}">

<img src="{$img_dir}logo.gif" alt="secure" width="162" height="104" />

</a>

</div>

<!-- /Block payment logo module -->

 

 

Any ideas? As always, any help is much appreciated!

[justinl]

I believe it's because you are floating the payment image to the left.

 

try add this CSS attribute to your paiement_logo_block css: overflow: hidden.

 

OR

 

outside of the paiement_logo_block_left div try adding in a <div class="clearfix"></div>

 

Hope that helps. Here is a great resource for help with floats: http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

[leetvape]

Wow, helped a lot! Thanks justin!

[justinl]

Glad to help

[coverman]

Hi. I need some help. Text over images: http://covermania.pt/product.php?id_product=39

 

Thanks