Tabs are splitting


I created some tabs for a webpage using Rachel Andrew’s technique in her book (The CSS anthology 2nd edition - chpt 4 How do I create tabbed navigation with CSS?)

But in my example attached, the 2nd and 5th tabs are split into 2 images, but the other tabs appear fine. I’ve been unable to correct this. Does anyone have any idea what might be wrong here? (I don’t mind that the tabs go over two lines.


It looks like the text is exceeding the total width of your images.
Try condensing the the link text.

I would recommend using the Sliding Doors technique for creating tabs - by using two images, you can have flexible width tabs that grow to accommodate whatever length of text you use.


After days of trying different things with the CSS rules, I managed to get the effect I was after (or close to it).

Thanks for your responses, and for the reference to A-list-apart. The technique I started of with was based on that in my earlier reference to Rachel Andrew’s.

Thanks again!