How to fix alignment issue with new class ?

[naoko15]

Hello, i've added a new class to my default layout override in category layout. I need a small text right after the price. The text is "(iva inc)".

I've got this code in category default. New class is .precio.

Code Select Expand

// Show Products ?>
<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
<div class="precio">(iva inc)</div>
<div class="spacer">

<div class="">
<left>
<?php /** @todo make image popup */
echo JHTML::_ ( 'link', JRoute::_ ( 'index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $product->virtuemart_product_id . '&virtuemart_category_id=' . $product->virtuemart_category_id ), $product->images[0]->displayMediaThumb( 'class="featuredProductImage" border="0"',false,'class="modal"' ) );
?>
</left>

<!-- The "Average Customer Rating" Part -->
<?php if ($this->showRating) { ?>
<br/>
<center>
<span class="contentpagetitle"><?php echo JText::_('COM_VIRTUEMART_CUSTOMER_RATING') ?>:</span>
</center>
<br />
<?php
// $img_url = JURI::root().VmConfig::get('assets_general_path').'/reviews/'.$product->votes->rating.'.gif';
// echo JHTML::image($img_url, $product->votes->rating.' '.JText::_('COM_VIRTUEMART_REVIEW_STARS'));
// echo JText::_('COM_VIRTUEMART_TOTAL_VOTES').": ". $product->votes->allvotes; ?>
<?php } ?>

<?php
if (!VmConfig::get('use_as_catalog') and !(VmConfig::get('stockhandle','none')=='none') && (VmConfig::get ( 'display_stock', 1 )) ){?>
<!-- if (!VmConfig::get('use_as_catalog') and !(VmConfig::get('stockhandle','none')=='none')){?> -->
<div class="paddingtop8">
<span class="vmicon vm2-<?php echo $product->stock->stock_level ?>" title="<?php echo $product->stock->stock_tip ?>"></span>
<span class="stock-level"><?php echo JText::_('COM_VIRTUEMART_STOCK_LEVEL_DISPLAY_TITLE_TIP') ?></span>
</div>
<?php }?>
</div>



<form method="post" class="product" action="../index.php" id="addtocartproduct<?php echo $product->virtuemart_product_id ?>">
<?php // Product custom_fields
if (!empty($this->product->customfieldsCart)) {  ?>
<div class="product-fields">
<?php foreach ($this->product->customfieldsCart as $field)
{ ?><div style="display:inline-block;" class="product-field product-field-type-<?php echo $field->field_type ?>">
<span class="product-fields-title" ><b><?php echo  JText::_($field->custom_title) ?></b></span>
<?php echo JHTML::tooltip($field->custom_tip,  JText::_($field->custom_title), 'tooltip.png'); ?>
<span class="product-field-display"><?php echo $field->display ?></span>

<span class="product-field-desc"><?php echo $field->custom_field_desc ?></span>
</div><br/ >
<?php
}
?>
</div>

And this css style:


.precio {
    color: #CC0070;
    float: right;
    font-size: 10px;
    margin: 86px 25px 0 0;
    position: relative;
}

The thing is that the alignment looks different in Internet Explorer than it does in other browsers. I've attached a couple of pictures as example.

Would somenoe please tell me what i'm doing wrong?

I'm using Virtuemart 2.0.12f and Joomla 2.5. Can't post an url because the site is closed to visitors yet.

Thanks everyone!!!