Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

follow-up to previous question - navigation menu issue

Posted on 2013-10-22
8
Medium Priority
?
193 Views
Last Modified: 2013-10-22
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
0
Comment
Question by:Big Monty
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 10

Expert Comment

by:ienaxxx
ID: 39591382
can't find what you are talking about... sorry.. :-(
0
 
LVL 34

Author Comment

by:Big Monty
ID: 39591396
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
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39591485
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 34

Author Comment

by:Big Monty
ID: 39591525
i think that's close, but when I add a width, the top light gray border doesn't extend all the way across...
0
 
LVL 10

Expert Comment

by:ienaxxx
ID: 39591536
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
 
LVL 10

Expert Comment

by:ienaxxx
ID: 39591546
you can try to platy with margin-left property, even with negative values, always selecting only the first LI...
0
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 39591547
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
 
LVL 34

Author Closing Comment

by:Big Monty
ID: 39591618
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question