Flight of the navigator

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.

Published by

Gareth Saunders

I’m Gareth J M Saunders, 49 years old, 6′ 4″, father of 3 boys (including twins). Enneagram type FOUR and introvert (INFP), I am a non-stipendiary priest in the Scottish Episcopal Church, I sing with the NYCGB alumni choir, play guitar, play mahjong, write, draw and laugh… Scrum master. Latterly, web architect and agile project manager at the University of St Andrews and former warden at Agnes Blackadder Hall.

2 thoughts on “Flight of the navigator”

  1. 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?

  2. 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!


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.