% width buttons problem - help please!

[uqwebdesign]

Been working on an ebay shop layout but got a slight problem, I need to have some links in the form of buttons at the top of the screen underneath a header image with width at 100%, so the buttons need to align with that.

The only problem is ideally I'd like a border around the buttons and separating them (ie a box around each button), but if I set the button width to 20% and put a border on, I can't fit five across the top, and using 19.9% renders different widths in each browser and leaves a gap at the end (or will only fit 4 buttons if you decrease the resolution). Any ideas? It's gotta be liquid so can't use images either, just need to get a proper border in between the buttons.

As a last resort I may just have to use | separators and not have them as a fixed % width, but I'd like to do it this way if possible

Many thanks

[Lchad]

Haven't done anything in Ebay but will it allow you to use the 19.9% and CENTER the five links?

[uqwebdesign]

Yeah but then the border still won't match up with the header image (which is a full colour). I may have to use the dreaded word....tables

If only you could set the border inside the div etc, or if all the browsers rendered %s the same I wouldn't have this problem! grrr

[Lchad]

Ok.. why not make the border which is a graphic the background of the div?

[uqwebdesign]

Cos it has to be liquid so it wouldn't work, unless I let the background image get strecthed, but then it would look bad :S

Strange problem this one, I'll have a muck about but fear I may have to resort to tables or change the design

[karinne]

Do you have this online somewhere? As a test page or something? I'm having a hard time visualizing this ... that's why I've been refraining from posting but then you said the dreaded "tables" word and ... well ... you know

[uqwebdesign]

Figured out a way around it (haven't got it online at the mo, needs finishing for a client tonight).

Finally did it by setting the width of the buttons to 20% so that 5 fit along each row, then made a 2px wide gif of plain white and set it as the background image position top left and repeat y on the all the buttons except the first in the row to create my own border.

Phew hope this can help someone else out as it was giving me a major headache not being able to use borders or margins due to the width (would have been fine apart from opera doesn't allow decimal percentages) damn multiple browsers!