Crossfader / CSS looks works in firefox but...

[Tanmccuin]

Not in IE... crazy hu? The container in Firefox is positioned properly, but when viewed in IE, its shot out to the right about 200px; I gather this has something to do w/ relative positioning perhaps, but i can't see how to fix it.

THE CODE:

<tr>
<td class="green_11" style="padding-right:7px; padding-top:20px; line-height:12px" valign="top" align="center">
<span class="green_12"><b>LATEST<br />CASTING CALLS</b></span>

<div class="cf_wrapper" style="margin-left:0; margin-top:-10px;">

{foreach key=key name=calls item=feature from=$feature_call}<br />
{if $smarty.foreach.calls.iteration == 1}
<div class="cf_element" id="cf1">
<div class="content">
{elseif $smarty.foreach.calls.iteration == 4}
<div class="cf_element" id="cf2">
<div class="content">
{elseif $smarty.foreach.calls.iteration == 7}
<div class="cf_element" id="cf3">
<div class="content">
{/if}

<b><a href="index.php?page=casting_call&block=details&call_id={$feature.id}"> {$feature.title}</a></b><br />
<span class="green">{$feature.info}<br>
<b><em>-{$feature.state}</em></b></span><br />

{if $smarty.foreach.calls.iteration == 3}
</div>
</div>
{elseif $smarty.foreach.calls.iteration == 6}
</div>
</div>
{elseif $smarty.foreach.calls.iteration == 9}
</div>
</div>
{/if}
{/foreach}
</div>

</td>
</tr>

THE CSS


div.cf_wrapper
{
position: relative;


}

div.cf_element
{
width: 130px;
/*height: 230px;*/
background-color: #eee;

}

div.cf_element div.content
{
padding: 10px;
}

div.cf_element div.content h3
{
padding-top: 0;
margin-top: 0;
}


---------------------------------------------

If anyone out there has any ideas for me, i'd greatly appreciate it, i'm stuck!

Thanks,

TM

[jmouta]

Hi,

I've had the same problem: Firefox vs IE.
Part of your problem is the "padding" issue. Try using "cm" instead of "px" in:

div.cf_element div.content
{
padding: 10px;
}

But you'll have to change the size number: 10px != 10cm. Try with lower values such as 1 or less, like 0.8.

Hope to solve at least the padding!

[boogyman]

Hi,

I've had the same problem: Firefox vs IE.
Part of your problem is the "padding" issue. Try using "cm" instead of "px" in:

div.cf_element div.content
{
padding: 10px;
}

But you'll have to change the size number: 10px != 10cm. Try with lower values such as 1 or less, like 0.8.

Hope to solve at least the padding!

noooooooooooo, cm still uses a non-browser based standardization.

I would recommend em's, which are based upon the rendering of an average lower-cased M character as the browser renders it.