follow-up to previous question - navigation menu issue

Hi There!

This is a follow-up question to

http://www.experts-exchange.com/Web_Development/Miscellaneous/Q_28272726.html

I've gotten my menu to look pretty much how I want with regards to spacing, except for one little piece. On my top menu, there is a darker shade of gray in my border that I don't want, and I know it has to do with the first LI, but I can't seem to get rid of it. Any suggestions is greatly appreciated!

you can view the code at

http://www.exchangetree.org/includes/header.asp

Cheers
Josh
LVL 34
Big MontySenior Web Developer / CEO of ExchangeTree.org Asked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
OK. That's because you no longer have 5 elements, each set to 20% width, so we need a different approach. How about this: keep the width as it was (i.e delete the new width declaration), align the image to the right and set the background colour of the first LI to white:

<li style="border: medium none;background-color:white;text-align:right"><img src="/images/diagonal.png" style="vertical-align: bottom;"></li>

Open in new window

0
 
ienaxxxCommented:
can't find what you are talking about... sorry.. :-(
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
i'm using Chrome at this stage, I havent even begun testing other browsers yet. I've attached a screenshot of what im seeing
Untitled.png
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Chris StanyonCommented:
It looks like it's down to the width of the first LI exceeding the width of your image. Just add a width to the first LI to match the image:

<li style="border: medium none;width:135px"><img src="/images/diagonal.png" style="vertical-align: bottom;"></li>

Open in new window

0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
i think that's close, but when I add a width, the top light gray border doesn't extend all the way across...
0
 
ienaxxxCommented:
i don't see the problem with Firefox.

anyway you can change the style of the first LI element in a elegant way by using the nth-of-type CSS3 selector http://reference.sitepoint.com/css/pseudoclass-nthoftype

So this doesn't require you to make your HTML dirty.
2013-10-22EE.JPG
0
 
ienaxxxCommented:
you can try to platy with margin-left property, even with negative values, always selecting only the first LI...
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
great, works perfectly! I did have to add

margin-right:-1px;

to my image style because a white line was appearing on some resolutions, other than that, many thanks for your help!
0
All Courses

From novice to tech pro — start learning today.