?
Solved

mouseover effect not filling button

Posted on 2014-02-28
7
Medium Priority
?
303 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 1000 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 1000 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
Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

765 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