Today’s big task at work will be to keep working on coding the left-hand navigation for our new website design.
Disappointingly I don’t appear to be able to acheive the design that I want using CSS alone, due to the extraneous code that our content management system software adds to the unordered-list — it throws in a span tag with a class of “current<whatever>” between the li and a, which just throws my design by about 2 pixels, but enough to notice.
I’m loathe to use JavaScript to achieve the result, so I’m going back to the drawing board … [puts on thinking cap] … hmmm.
Er, why should a span introduce any space anyway unless you’ve told it to? Can’t you just zero the margins, padding and border and hope?
I managed to get it sorted this afternoon.
Basically, we have a navigation menu marked up as a list, like this: ul li a. But to keep the text from being pressed up against the left-hand side of the navigation ‘button’ we’ve applied 2px padding to the anchor (a) tag.
However, when a particular branch is selected rather than adding a class, such as “currentbranch0” to the list-item (li) a new span tag is introduced: ul li span.currentbranch0 and the anchor (a) tag is removed … and therefore so is the padding.
Fine, well just add 2px padding to the span tag. That works … until you select a sub-menu item until branch1 when the anchor (a) tag is reintroduced for currentbranch0 so we now have: ul li span.currentbranch0 a which now has 4px of padding and pushes stuff out of alignment.
I worked it out this morning, having been staring at it for the best part of a week: I used relative positioning on the anchor (a) tag to shift it 2px to the left!
Phew!