Right align a table in firefox help, how can I support mulitple browsers

Question

Good Afternoon All,

I have a table inside a div. The div has a style rule text-align:right;. I realize the element is a table and not text, but nonetheless, I need the table to right align in FireFox. I stumbled upon -moz-right which does the right thing in FireFox, however this breaks every other browser, i.e. the table aligns left as it was doing in FireFox. I read yesterday that the trick is make a CssClass and put both attributes in there.

.someClass { text-align:right; text-align:-moz-right; }

I have tried this and the result is the same, it works in one but not the other. I've tried switching their order which just reverses the effect. Is there any way to make this work in both IE(Safari and Chrome render it as IE does) and FireFox? Can any CSS gurus out there point me in the right direction? Thanks for any help.

Cheers,
~ck in San Diego

Answer 1

Try setting "float: right;" on the table's css:

CSS:

.container
{
    overflow: hidden;
    zoom: 1;
}

.rightTable
{
    float: right;
}

Markup:

<div class="container">
    <table class="rightTable">...</table>
</div>

EDIT: That's a nasty requirement, but you have options: Look here. I implemented the "overflow hidden" solution above and it worked in IE 8 and Firefox 3.6. Look at the article for more options.

Answer 2

Floating the table to the right WILL work, but you have to clear your float after the table so your dive stays around the table and doesn't just collapse with the table sticking out like so:

<div>
<table style="float:right"></table>
<div style="clear:right"></div>
</div>

Answer 3

If you know the width of your table, you can use margin:0 0 0 auto; on the table.