Solved

mouseover effect not filling button

Posted on 2014-02-28
7
299 Views
Last Modified: 2014-02-28
Why is there a gap on the mouseover effect on the navigation bar on items that don't have drop down buttons?  See last 5 buttons on right.

http://nsitedesigns.com/nsitedesigns/lakeshore/index.html
http://nsitedesigns.com/nsitedesigns/lakeshore/lakeshore.css
0
Comment
Question by:nsitedesigns
[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
  • 2
  • 2
7 Comments
 
LVL 10

Assisted Solution

by:jtwcs
jtwcs earned 250 total points
ID: 39895968
Line 199 of lakeshore.css

Remove display: inline-table

nav ul {
	background: #000; 
	padding: 0px; 
	list-style: none;
	position: relative;
	/* display: inline-table; remove this */
	margin:0px;
}

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39896029
You might want to add some padding-bottom to nav ul li a {} (along with the above)
0
 

Author Comment

by:nsitedesigns
ID: 39896031
Well that too care of the mouseover not filling up button but now the navigation words are resting on the bottom of the nav bar.  I tried adding padding and margin to nav and the nav ul but that didn't fix it.  What would you recommend?
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 58

Expert Comment

by:Gary
ID: 39896033
See above.
0
 
LVL 10

Expert Comment

by:jtwcs
ID: 39896057
As Cathal pointed out above, just add some bottom padding to the nav <a> tags.

Line 228.  Add some bottom padding or change it to something like this.

nav ul li a {
			display: block; 
			padding: 4px 22px;
			color: #fff; 
			text-decoration: none;
		}

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 39896118
Missed Cathal's suggestion of adding padding to nav ul li a.  that did trick
0
 

Author Closing Comment

by:nsitedesigns
ID: 39896121
thanks team!
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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)

689 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