Inline block lists are great for eliminating the need to use floats for creating horizontal link lists. There is one anomaly that has existed since the beginning of CSS in that inline block elements leave a gap (approximately 3 pixels) between elements, when the box is visible. Below, see a default inline block list and 2 examples of ways to eliminate the gaps.
Shows a gap. We actually use that to our styling advantage.
The entire UL code is collapsed to remove all white space and line breaks. This fix will need to be redone each time you use our interface or invoke Dreamweaver's apply source formatting command.
The UL is assigned a User Class of no-gap. Two rules are written. The first sets font-size to zero for the entire UL. The second rule resets font-size to 16px (browser default) for all links inside the list. Here are the rules:
ul.no-gap {
font-size: 0px;
}
ul.no-gap a {
font-size: 16px;
}