My guess is you need to zero out the padding for your <li> tags in that area. If not that, then the margin. The #nav li CSS might have overridden your previous code where you zeroed it out for a bunch of stuff.
That is very odd behavior. My first thought was padding or margin, but they are at 0.
I spent few a minutes in firebug trying stuff and after a few things I put a "float: left;" on those <li> tags and it seemed to work. Except for the fact that all of the links or "|" have " " or spaces with them, so some if extra spacing may be caused by them. Also the "|" has a font size of 30px, whereas the links are 25px, so the "float: left; will cause the "contact" link to shift up. So setting a "line-height" to the <li> may fix that somewhat. Best option is to remove those spans and use the same font size for all the text. If you have to have the "|" at 30px you may to need change the <ul> and <li> to a <div> and <span>, respectively. The <ul> and <li> tags have predefined style attributes, as they are intended for text styling, using them for a block element, like div, can be difficult. I personally avoid using <ul> and <li> for menus.
A few side notes:
The </> is not the correct way to closes a <span>, or any tag for that matter. I'd get rid of the "target=_blank", most users will find it annoying if your opening links in a new tab or window, only do that when the link is pointing off your website.
Reply With Quote
Bookmarks