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, 52 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 at Safeguard Global; latterly at Sky and Vision/Cegedim. Former web architect and agile project manager at the University of St Andrews and previously 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.