Home >
CSS
>
Border trouble
13 January, 09:34 pm
Border trouble
I ran into a tricky CSS border issue yesterday: top borders are not displayed the same way as bottom borders. This appears to be by browser consensus rather than design, it’s grey area that the standards apparently deliberately don’t specify. But it appears on all the browsers I can get my hands on, which is a good indication then that this is the de facto standard.
To create the mouse over state I wanted I needed to have a menu where the items had very thick (about 20 pixels) left and right borders. I then specified that the bottom border would be a thin dashed line. This created the effect I wanted, two blocks of colour (in this case the same as the background colour), with a dotted line going between them [figure 1].
Later (to fit the site’s CMS) I needed to change the menu item’s dotted bottom border to a top border. But now the dotted line went right the way across the whole of the element including the width of the side borders, creating a completely different and unwanted effect [figure 2].
The problem is the order that the browsers draw the borders in, there is some detail on Opera’s approach on Tim Altman’s website. It seems most browsers use the order bottom, left, right, and top to draw their borders. Drawing the borders in pairs (top then bottom then left then right) would mean that each border would be a mirror image of it’s opposite. This would have saved me stress on a long Friday afternoon, and doesn’t seem to hard to specify.
I know this seems like a petty thing to complain about, but in every other situation top and bottom borders are interchangeable and are rendered the same—even just changing the top/bottom borders to have a two pixel width rather than one makes them rendered the same. Their is such a strong movement promoting the web standards that it’s a shame when there are silly glitches like this—unexpected and inconsistent behaviour is just as bad any browser bug, even if it is specifically not specified. So come on browser makers, repeat after me: top bottom left right.
Comments closed for this article.
Comments: