CSS Box model problem in navigation
I will describe one problem I came across during development of a navigation for some web page. Picture 1 shows the navigation for one of the web pages. You can see that one navigation item is selected and the others have only their name displayed. When the visitor hovers the navigation element (Picture 2 and 3), the element should get the same design as the selected item.
The designer wanted that all borders of the navigation elements overlap so that only one line can be seen between two navigation elements. OK, but the problem becomes apparent when you start thinking about CSS and its box model. Each list item in unordered list that was used for navigation has its own “box” (content, padding, border and margin) - therefore if you apply a border to each navigation element (currently selected and hovered) you get two lines displayed!
The solution is to use borders in the same color as the background! For the upper navigation element make the bottom border the same color as the background and for the lower navigation element make the top border the same color as the background.
This will also prevent the movement of the navigation - because the size of the navigation will stay the same at all times.
At this particular navigation some additional JavaScript code had to be added to make it work in IE6, but when I figured out how to make it work, the task became a piece of cake.
0%
