weird display effect

[tsrplatelayer]

The Shopping Cart content table heading layout changes when total spend changes from<£10 (4 characters) to >=£10 (5 characters)
Both IE and FF display this effect.

Try visiting http://www.freight-stop-shop.co.uk/tickets/

Go to General tickets and add 3 child tickets (actual date is unimportant but required)
Notice the location of the heading text 'Ticket Type'.
Now use the change quantity button and change to 4 tickets.

Notice how the position of the 'Ticket Type' heading text moves across to the left

Now I have tried looking at the CSS with FF debug tool - I cannot see any difference, I have also compared the source code for the served pages - cannot spot any difference.

Has any one seen this before or are my eyes going funny?

[gjh42]

I can handle making a dummy account to make a test add to cart, but it still needs approval...

[tsrplatelayer]

approved test/test I'll leave it active for a few days - but be warned PayPal is active

[gjh42]

That effect (the columns shifting a hair when the total changes) is due to the auto-sized table columns. They take up no more width than each of them needs, with the attribute list being a block element that tries to be full width. When the numbers get larger, they take more width from the attribute list.

If you don't want this shifting, add to your stylesheet and give fixed widths to
.cartUnitDisplay {}
and
.cartTotalDisplay {}

[tsrplatelayer]

thanks for clarifying that