Liferay 6.1 carousel - firefox

Question

When using the carousel function in Liferay 6.1.1 CE GA2 I see the carousel working properly in both Safari and Chrome.
However, the images are not shown in Firefox.
In order to have the function working I created a Webcontent Structure with following code
<?xml version="1.0"?>
<root>
<dynamic-element name="activeIndex" type="text" index-type="" repeatable="false">
<meta-data>
<entry name="displayAsTooltip"><![CDATA[true]]></entry>
<entry name="required"><![CDATA[false]]></entry>
<entry name="instructions"><![CDATA[Index of the first visible item of the carousel]]></entry>
<entry name="label"><![CDATA[activeIndex]]></entry>
<entry name="predefinedValue"><![CDATA[0]]></entry>
</meta-data>
</dynamic-element>
<dynamic-element name="timeInterval" type="text" index-type="" repeatable="false">
<meta-data>
<entry name="displayAsTooltip"><![CDATA[true]]></entry>
<entry name="required"><![CDATA[false]]></entry>
<entry name="instructions"><![CDATA[Interval time in seconds between an item transition.]]></entry>
<entry name="label"><![CDATA[timeInterval]]></entry>
<entry name="predefinedValue"><![CDATA[0.75]]></entry>
</meta-data>
</dynamic-element>
<dynamic-element name="maxImageHeight" type="text" index-type="" repeatable="false">
<meta-data>
<entry name="displayAsTooltip"><![CDATA[true]]></entry>
<entry name="required"><![CDATA[false]]></entry>
<entry name="instructions"><![CDATA[Provide max height of image element. Min limit advisable is 40]]></entry>
<entry name="label"><![CDATA[maxImageHeight]]></entry>
<entry name="predefinedValue"><![CDATA[254]]></entry>
</meta-data>
</dynamic-element>
<dynamic-element name="maxImageWidth" type="text" index-type="" repeatable="false">
<meta-data>
<entry name="displayAsTooltip"><![CDATA[true]]></entry>
<entry name="required"><![CDATA[false]]></entry>
<entry name="instructions"><![CDATA[Provide max width of image element. Min limit advisable is 130]]></entry>
<entry name="label"><![CDATA[maxImageWidth]]></entry>
<entry name="predefinedValue"><![CDATA[600]]></entry>
</meta-data>
</dynamic-element>
<dynamic-element name="ImageElementSet" type="selection_break" index-type="keyword" repeatable="true">
<dynamic-element name="image" type="image" index-type="keyword" repeatable="false"></dynamic-element>
<dynamic-element name="linkUrl" type="text" index-type="keyword" repeatable="false"/>
</dynamic-element>
</root>
And a web template consisting of
#set($imageWidth = $maxImageWidth.Data)
#set($imageHeight = $maxImageHeight.Data)
#set($imageWidthPx = $imageWidth + "px")
#set($imageHeightPx = $imageHeight + "px")
#set($interval = $timeInterval.Data)
#set($activeIndexValue = $activeIndex.Data)
<style type="text/css">
.aui-carousel {
-moz-user-select: none;
margin: 20px 0;
}
.aui-carousel-item {
border-radius: 10px 10px 10px 10px;
text-indent: -9999em;
}
.aui-carousel li {
margin: 0 !important;
}
}
</style>
#set($totalCount = 0)
<div id="carousel">
#foreach($imageElement in $ImageElementSet.getSiblings())
#if($imageElement.image.getData() != "")
#if($imageElement.linkUrl.getData() != "")
<a href="$imageElement.linkUrl.Data">
<img class="aui-carousel-item" src="$imageElement.image.Data" height="$imageHeightPx" width="$imageWidthPx" />
</a>
#else
<img class="aui-carousel-item" src="$imageElement.image.Data" height="$imageHeightPx" width="$imageWidthPx" />
#end
#set($totalCount = $totalCount + 1)
#end
#end
</div>
#if($totalCount > 0)
<script>
AUI().ready('aui-carousel', function(A)
{
var carousel = new A.Carousel(
{
contentBox: '#carousel',
activeIndex: $activeIndexValue,
intervalTime: $interval,
width: $imageWidth,
height: $imageHeight
}).render();
});
</script>
#end
However, it doesn't give what I need.
I appreciate your insights on how to get this working.

Answer 1

I see your live site and debugged a little and I found that text-indent css property in below css class is causing issue for firefox.
.aui-carousel-item { border-radius: 10px; text-indent: -9999em; }
Removal of text-indent css property shows up the image in firefox so You may have to adjust this css property for firefox.