CODEWITHSUNDEEP
htmlcssfirefoxcss-tables
MillerMedia
MillerMedia

Reputation: 3671

Alignment Issue With display:table-cell in Firefox

I'm having a cross-browser positioning issue with Firefox. I'm using display:table and display:table-cell. Here's a JSFiddle:

http://jsfiddle.net/cSq6W/1/

Basically, if you open this up in Safari, Chrome or IE the <li>s are all centered (which is what I want). When you open it in Firefox, everything is justified to the left.

I've tried numerous solutions to realign everything but it doesn't seem to work. I've tried position:absolute with left:0 to start from a common starting point but even then the Firefox <li>s were not aligned with the other browsers.

The reason I'm using display:table-cell is because it seems to be easier to control across all browser (particularly IE) and has worked on other pages on the site. Any ideas on why it would be misaligned in Firefox (btw this issue persists from FF5 to FF10)?

Upvotes: 0

Views: 1227

Answers (1)

sandeep
sandeep

Reputation: 92803

May be you have to define display:inline-block to your img & define text-align:center to it's parent. Check this:

http://jsfiddle.net/cSq6W/2/

UPDATED

For IE7 there a hack check the link http://jsfiddle.net/cSq6W/5/

Upvotes: 1

Related Questions