zaidihacker
New Member
I tested on Chrome, Opera, even Internet Explorer, my below css works as expected.\[code\].carousel{ position:relative; overflow:hidden; width:100%; margin-bottom:0px;}.carousel-inner{ font-size:0; position:absolute; width:6882px;}.carousel-item{ background-repeat:no-repeat; background-position:0px 0px; display:inline-block; cursor
ointer; margin:0px 16px;}\[/code\]But when I tested on Firefox, \[code\].carousel-inner\[/code\] is not hiding overflowing element.In order to add the same effect, I need to add \[code\]float:left\[/code\] to \[code\].carousel-inner\[/code\], which renders \[code\]width:100%\[/code\] to be ignored.Is there another work around specific to Firefox?I tried \[code\]clear:both\[/code\] with no luck.Here is jsfiddle exampleAnd image (Chrome, IE, Opera) :
Firefox :
Cheers !
ointer; margin:0px 16px;}\[/code\]But when I tested on Firefox, \[code\].carousel-inner\[/code\] is not hiding overflowing element.In order to add the same effect, I need to add \[code\]float:left\[/code\] to \[code\].carousel-inner\[/code\], which renders \[code\]width:100%\[/code\] to be ignored.Is there another work around specific to Firefox?I tried \[code\]clear:both\[/code\] with no luck.Here is jsfiddle exampleAnd image (Chrome, IE, Opera) :