Forum Moderators: not2easy
<a href="#" class="service"><img src=#" /><br />Text</a>
There are 9 of these on the page - 3 x 3. They have a flexible width and fixed height, which is controlled by the table styles.
I want to differentiate one of these a elements using the class "service", which is fed from our CMS. Other than that I can't touch the HTML.
I want borders on the bottom, left and right but not the top. At the top I've got a background image that looks like the top border as well as a tab that displays above the top border.
The problem:
If I use borders on the left and right they will display to the left and right of the background image at the top, which messes up the appearance.
The Conundrum:
How can I get a single background image displaying at the top, with borders left, right and bottom and flexible width, without the left and right borders messing up the appearance by overflowing to the left and right of the bg image at the top?
The closest I've got:
My best attempt so far is to have the tab and top border rolled into one bg image + the right border and bottom border all contained in this one bg image. Then the left border is the only border, which is not noticeable against the tab in bg image because the tab is on the left and the bg is positioned left.
It doesn't work because the right border is in a fixed position (as part of the bg image) and so my solution does not work with the flexible width table cells.
I think I need an entirely new solution.
Anyone know of a way of getting a flex width cell with a bg image at top, borders on left, bot and right with only one class and element to play with?
Things that will eventually become CSS3 include image borders [w3.org] and multiple image backgrounds [w3.org].
I did play in a previous post with CSS3 image borders: [webmasterworld.com...]
Until then... ...empty span tags inside the a element I guess.
